Lernen Sie CSS Grid: Einfache Anleitung mit vielen Beispielen

Hallo! Wenn Sie jemals das Gefühl hatten, dass CSS Grid ein bisschen so ist, als würde man mit verbundenen Augen versuchen, einen Zauberwürfel zu lösen, dann sind Sie nicht allein. Ich bin Eleftheria und heute bin ich hier, um Ihnen dabei zu helfen, sich mühelos im CSS-Raster zurechtzufinden. Lasst uns eintauchen. ?

Einführung in CSS Grid

CSS Grid wurde entwickelt, um Ihnen die Erstellung komplexer, zweidimensionaler Layouts zu ermöglichen, deren Umsetzung bisher ziemliche Mühe bereitete. Vor Grid jonglierten wir mit Floats, Tabellen oder Flexbox für Layouts. Grid kam und sagte: „Halt mein Bier“ und bot eine intuitivere und leistungsfähigere Möglichkeit, Webseiten zu strukturieren.

Warum CSS Grid lernen?

• Effizienz

  : Grid vereinfacht die Art und Weise, wie Sie Layouts entwerfen, und reduziert den Bedarf an verschachtelten Elementen nur für Layoutzwecke.

• Flexibilität

  : Es eignet sich hervorragend für responsives Design und passt sich wunderbar an verschiedene Bildschirmgrößen an.

• Leistung

  : Mit Grid können Sie Elemente problemlos sowohl vertikal als auch horizontal ausrichten, was bei älteren Methoden ein Albtraum war.

Die Grundlagen von CSS Grid

Lasst uns ganz am Anfang beginnen. Um CSS Grid verwenden zu können, müssen Sie einen Container als Raster definieren. Zum Beispiel:

.container { display: grid;}

Diese einfache Zeile verwandelt den .container in einen Gittercontainer, was bedeutet, dass seine direkten untergeordneten Elemente zu Gitterelementen werden.

Rasterspalten und -zeilen erstellen

Sie definieren die Rasterstruktur, indem Sie Spalten und Zeilen angeben:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Three columns with equal width */
    grid-template-rows: auto auto auto;  /* Three rows with automatic height */
}

Hier bedeutet 1fr einen Bruchteil des verfügbaren Platzes, sodass die Spalten gleich breit sind.

Elemente im Raster platzieren

Sie können Elemente mithilfe der Rasterspalten- und Rasterzeileneigenschaften in bestimmten Bereichen platzieren:

.item-a {
    grid-column: 1 / 3; /* Start at line 1, end at line 3 */
    grid-row: 1 / 2;    /* Span from line 1 to line 2 */
}

Dadurch wird .item-a von der ersten Spaltenzeile bis zur dritten und bis zur ersten Zeile platziert.

Gitterlinien und Flächen

Sie können Zeilen zur leichteren Referenz benennen:

.grid-container {
    grid-template-columns: [start] 1fr [line2] 1fr [end];
    grid-template-rows: [row1-start] auto [row2-start] auto [row3-end];
}

Dann verwenden Sie diese Namen:

.item-b {
    grid-column: start / line2;
    grid-row: row1-start / row2-start;
}

Gitterflächen

Für einen visuelleren Ansatz können Sie Bereiche benennen:

.grid-container {
    display: grid;
    grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

Ordnen Sie dann diesen Bereichen Elemente zu:

<div class="grid-container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="main">Main</div>
    <div class="footer">Footer</div>
</div>

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Weitere Beispiele für CSS-Raster in Aktion

1. Responsives Layout mit Medienabfragen

Eine der Stärken von CSS Grid ist die einfache Handhabung responsiver Designs. Hier ist ein Beispiel, das zeigt, wie man Rasterlayouts für verschiedene Bildschirmgrößen

anpasst:

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}

Dieses Setup erstellt ein Raster, in dem jedes Element mindestens 300 Pixel breit ist, aber wächst, um den verfügbaren Platz einzunehmen. Auf Bildschirmen, die kleiner als 768 Pixel sind, wird auf ein einspaltiges Layout umgestellt.

2. Komplexes Layout: Magazinstil

Stellen Sie sich eine Zeitschriftenseite mit einem großen Artikel, kleineren Nebenartikeln und Anzeigen vor:

<div class="grid-container">
    <article class="featured">Featured Article</article>
    <article class="side">Side Article 1</article>
    <article class="side">Side Article 2</article>
    <div class="ad">Advertisement</div>
    <footer class="footer">Footer</footer>
</div>

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 
        "featured featured ad"
        "side1 side2 ad"
        "footer footer footer";
    gap: 10px;
}

.featured { grid-area: featured; }
.side:nth-child(1) { grid-area: side1; }
.side:nth-child(2) { grid-area: side2; }
.ad { grid-area: ad; }
.footer { grid-area: footer; }

In diesem Beispiel werden benannte Rasterbereiche verwendet, um ein komplexes, aber optisch ansprechendes Layout zu erstellen.

3. Verschachtelte Gitter für das Komponentendesign

Für Komponenten in Ihrem Raster können Sie Raster verschachteln:

<div class="grid-container">
    <div class="card">
        <h2 class="card-title">Card Title</h2>
        <div class="card-content">
            <p>Content Here</p>
            <button class="card-button">Action</button>
        </div>
    </div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.card-title {
    /* Styles for title */
}

.card-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
}

.card-button {
    align-self: flex-start;
}

Hier verwendet jede Karte selbst ein Raster zur Gestaltung ihres Titels und Inhalts und demonstriert so, wie Raster verschachtelt werden können, um eine genaue Kontrolle über Designelemente zu ermöglichen.

4. Dynamisches Raster mit Bildern

Für eine Galerie oder ein Portfolio:

<div class="gallery">
    <img src="img1.jpg" alt="Image 1">
    <img src="img2.jpg" alt="Image 2">
    <img src="img3.jpg" alt="Image 3">
    <!-- More images -->
</div>

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.gallery img {
    width: 100%;
    height: auto;
}

Dieses Raster passt sich dynamisch an, um den Container mit Bildern zu füllen, jedes mindestens 200 Pixel breit, sodass so viele wie möglich in jede Zeile passen.

Erweiterte Rasterfunktionen

• Grid Auto-Flow

  : Elemente werden automatisch platziert.

• Gitterlücken

  : Fügt Abstand zwischen Gitterzellen hinzu.

• Minmax()

  : Definiert einen Größenbereich für Zeilen oder Spalten.

Raster-Auto-Flow

Grid Auto-Flow

steuert, wie der Browser das Raster mit Elementen füllen soll, wenn diese nicht explizit platziert werden. Standardmäßig werden Elemente in der Reihenfolge der Hauptzeilen platziert, was bedeutet, dass Elemente zeilenübergreifend gefüllt werden, bevor sie in die nächste Zeile verschoben werden. Sie können dieses Verhalten jedoch ändern:

• Zeile

  : Das Standardverhalten, bei dem Elemente in Zeilen platziert werden, bevor sie in die nächste Spalte verschoben werden.

• Spalte

  : Elemente werden in Spalten platziert, bevor sie in die nächste Zeile verschoben werden.<script> // Detect dark theme var iframe = document.getElementById('tweet-1832648056296063240-389'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1832648056296063240&theme=dark" } </script>

• dense : This option tells the browser to fill in gaps in the grid as items are placed, potentially rearranging items to avoid empty spaces. This can result in an "optimal" arrangement but can also lead to unexpected layouts if not used carefully.

Example:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: column; /* Items will fill by column before moving to next row */
}

Grid Gaps (or Gutter)

Grid Gaps add space between grid cells, which is crucial for visual breathing room in your layout. You can set gaps for rows, columns, or both:

Example:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px 40px; /* 20px vertical gap, 40px horizontal gap */
    grid-row-gap: 30px; /* Alternative for vertical gap */
    grid-column-gap: 50px; /* Alternative for horizontal gap */
}

Using gap is shorthand for both grid-row-gap and grid-column-gap. This feature helps in creating a more polished and organized look, making your content feel less cramped.

Minmax() Function

The Minmax() function in CSS Grid allows you to define a size range for grid tracks (rows or columns). This is extremely useful for creating flexible yet controlled layouts:

Example:

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

• minmax(min, max): Here, min is the minimum width (or height for rows) the track can take, and max is the maximum. The track will grow from min to max as more space becomes available.

• auto-fill inside repeat alongside minmax means the browser will automatically generate as many columns as fit within the container, each having a minimum width of 100px but can expand if there's space.

• 1fr means the track can grow to take up an equal fraction of the available space if there's room after all minimum sizes are accounted for.

Real Example Use:

Imagine designing a dashboard where you want cards to have at least 200px width but grow to fill the space without exceeding 400px:

Solution:

.dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 400px));
    gap: 20px;
}

This setup ensures each card is visible and usable on smaller screens while maximizing space on larger displays.

• Grid Auto-flow helps in managing how items are naturally placed within your grid, optimizing for space or maintaining order.

• Grid Gaps provide the breathing room that makes layouts more visually appealing and user-friendly.

• Minmax offers the flexibility to design layouts that adapt beautifully to different screen sizes and content volumes.

Conclusion

I hope by now, you've seen Grid not just as a layout tool, but as a creative companion in your web design adventures. CSS Grid has transformed how we approach layout design, offering a blend of simplicity and power that was hard to imagine before its arrival.

Remember, mastering Grid isn't about memorizing every property or function, but understanding its logic. Like learning any new language, it's about practicetrying out different configurations, seeing how elements respond, and adapting your design to the fluidity of the web.

As you incorporate Grid into your projects, whether they're personal blogs, complex dashboards, or innovative web applications, you'll find yourself equipped to handle challenges with elegance and efficiency. Keep this guide handy, refer back to these examples, and most importantly, keep experimenting.

Thank you for joining me on this exploration of CSS Grid.

---

? Hello, I'm Eleftheria, Community Manager, developer, public speaker, and content creator.

? If you liked this article, consider sharing it.

? All links | X | LinkedIn

Das obige ist der detaillierte Inhalt vonLernen Sie CSS Grid: Einfache Anleitung mit vielen Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!