Zum Inhalt springen

CSS Grid

grid-template-areas

#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

#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

#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

#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-auto-flow

#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… 

grid-row-gap

#grid-row-gap Definiert den Zwischenraum zwischen den Zeilen eines Raster-Containers. default grid-row-gap: 0; Entfernt die Lücke. 1. One 2. Two 3. Three 4. Four 5. Five 6. Six grid-row-gap: 10px; Sie können Pixel-Werte verwenden. 1. One 2. Two… 

grid-gap

#grid-gap Kurzschreibweise für grid-row-gap und grid-column-gap. default grid-gap: 0 0; Entfernt sowohl Zeilen- als auch Spaltenlücken. 1. One 2. Two 3. Three 4. Four 5. Five 6. Six grid-gap: 10px; Sie können einen einzigen Wert einstellen. 1.… 

grid-column-end

#grid-column-end Definiert die Position des Spaltenendes eines Rasterelements. default grid-column-end: auto; Bei dieser 3-spaltigen Einrichtung wird das Gitterelement automatisch platziert. Item Item Target Item Item Item grid-column-end: 2; Das Zielgitterelement endet kurz vor der zweiten Spalte. Item… 

grid-auto-columns

#grid-auto-columns Legt die Größe von Rasterspalten fest, die implizit erstellt wurden: Das bedeutet, dass grid-auto-columns auf die Spalten abzielt, die nicht mit grid-template-columns oder grid-template-areas definiert wurden. default grid-auto-columns: auto; Die implizit erzeugten Spalten haben eine auto… 

grid-template

#grid-template Kurzschreibweise für grid-template-rows grid-template-columns und grid-template-area. default grid-template: none; Es sind keine Zeilen, Spalten oder Bereiche definiert. 1. One 2. Two 3. Three 4. Four 5. Five 6. Six grid-template: 200px 1fr / 100px auto 3rem;… 

grid-column

#grid-column Kurzschreibweise für grid-column-start und grid-column-end. default grid-column: auto auto; Der Spaltenanfang und das Spaltenende des Gitterelements werden automatisch festgelegt. Item Item Target Item Item Item Item Item Item grid-column: 1 / 3; Das Gitterelement beginnt vor…