Tagesarchiv: 7. März 2020

CSS Grid erlaubt es alleine mittels CSS zweidimensionale Layouts zu erstellen. Optisch erinnern diese Raster an Tabellen. Sie können einfach nur Zeilen oder Spalten erstellen, diese aber auch beliebig kombinieren.

Zeilen

Mit folgendem Beispiel erzeugen Sie einfache Zeilen. Alleine werden Sie das wohl kaum verwenden, weil das wenig Sinn macht.

.container{
   display: grid;
   grid-template-columns: 250px;
   grid-template-rows: 150px;
}

<div class="container">
   <div> Zeile 1 </div>
   <div> Zeile 2 </div>
   <div> Zeile 3 </div>
</div>

Dieses Beispiel erzeugt im <DIV> 3 Zeilen.

codepen.io/radarin/zeilen

Spalten

Mit folgendem Beispiel erzeugen Sie einfache Spalten. Das alleine können Sie durchaus mal brauchen.

.container{
   display: grid;
   grid-template-columns: 250px 250px 250px;
}

.spalte-1 {
   grid-row: 3/3;
}
.spalte-2 {
   grid-row: 3/3;
}

.spalte-3 {
   grid-row: 3/3;
}

<div class="container">
   <div class="spalte-1"> Zeile 1 </div>
   <div class="spalte-2"> Zeile 2 </div>
   <div class="spalte-3"> Zeile 3<br />mit Untertext </div>
</div>

z7

codepen.io/radarin/spalten

Layouts

Mit folgendem Beispiel erzeugen Sie ein einfaches Layout für eine Webseite.

codepen.io/radarin/Zeilen-Spalten

medium.com/…/css-grid-einführung

Weiterführende Informationen

medium.com/…/css-grid-einführung