grid.md

Grid

Ein CSS Grid Layout bietet dem Webdesigner zwei Dimensionen zur Platzierung der Objekte. Statt nur auf einer Achse kann man mit CSS Grid ein Raster mit Zeilen und Spalten verwenden.

---

Grundlage: Grid, Columns und Rows festlegen

    <div class="container">
        <div id="one">1.Kind Grid Container</div>
        <div id="two">2.Kind Grid Container</div>
        <div id="three">3.Kind Grid Container</div>
        <div id="four">4.Kind Grid Container</div>
        <div id="five">5.Kind Grid Container</div>
        <div id="six">6.Kind Grid Container</div>
        <div id="seven">7.Kind Grid Container</div>
        <div id="eight">8.Kind Grid Container</div>
    </div>

Im CSS wandeln wir die Klasse .container ganz einfach in ein Grid, indem wir display:grid hinzufügen. Mit grid-template-columns aktivieren wir die gewünschten Spalten, in diesem Fall 5 Spalten mit je 250px und mit grid-template-rows können wir die Höhe der Zeile einstellen, in diesem Fall 150px. Und das war’s, unser Raster ist fertig!

.container{
    display: grid;
    grid-template-columns: repeat(5, 250px);
    grid-template-rows:repeat(3, 150px);
    grid-gap: 30px;
}

---

Auf unserem erstellten Grid Raster (5 Spalten und 3 Zeilen) können wir nun mit Hilfe der Grid Linien unsere Kinder innerhalb des Containers plazieren.

#five{
    grid-column: 5/6;
    grid-row: 1/4;
    background-color: blue;
}

#eight{
    grid-column: 3 /span 2;
    grid-row: 2/ span 2;
    background-color: crimson;
}

mehr Lesematerial

👉grid cheatsheet
👉learn css grid
👉lerne css grid (deutsch)
👉grid in 5 Minuten verstehen (deutsch)
👉css-grid-crash-course
👉practice grid mit Freecodecamp
👉grid by example
👉grid-auto-fill-vs-auto-fit
👉grid-template-areas
👉flexbox vs grid

CSS Game

👉css grid game (grid-garden)