#grid-template-areas Definiert Bereiche innerhalb eines Raster-Containers. Diese Bereiche können dann referenziert werden, wenn ein Gitterelement platziert wird. default grid-template-areas: none; Es ist kein Gebiet definiert. Header Sidebar Main grid-template-areas: „header header header“ „sidebar main main“; Sie können…
#grid Kurzschreibweise für grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns und grid-auto-flow. grid: „header header header“ 50px „sidebar main main“ 200px / 100px auto; Sie können es als grid-template verwenden, indem Sie alle expliziten Zeilen, Spalten und Bereiche festlegen.…
#grid-template-columns Definiert die Spalten eines Raster-Containers. Sie können die Breite einer Spalte durch ein Schlüsselwort (wie auto) oder eine Länge (wie 10px) angeben. Die Anzahl der Spalten wird durch die Anzahl der Werte bestimmt, die in der…
#grid-row Kurzschreibweise für grid-row-start und grid-row-end. default grid-row: auto auto; Der Zeilenanfang und das Zeilenende des Gitterelements werden automatisch festgelegt. Item Item Target Item Item Item Item Item Item grid-row: 1 / 3; Das Gitterelement beginnt vor…
#grid-template-rows Definiert die Zeilen eines Raster-Containers. Sie können die Breite einer Zeile durch ein Schlüsselwort (wie auto) oder eine Länge (wie 10px) angeben. Die Anzahl der Zeilen wird durch die Anzahl der Werte bestimmt, die in der…
#grid-auto-flow Bestimmt die Position der automatisch erzeugten grid items. default grid-auto-flow: row; In diesem zweispaltigen Aufbau ist das zweite Gitterelement zweispaltig, das dritte Element ist vierzeilig hoch. Die anderen Gitterelemente sind auf zusätzlichen Reihen platziert. 1. One…