#grid-area Kurzschreibweise für grid-row-start grid-column-start grid-row-end und grid-column-end. default grid-area: auto; Die Spalten- und Zeilenanfänge und -enden des Gitterelements werden automatisch festgelegt. Item Item Target Item Item Item Item Item Item grid-area: main; Sie können einen Bereichsnamen…
#grid-column-start Definiert die Spaltenanfangsposition eines Rasterelements. default grid-column-start: auto; Bei dieser 3-spaltigen Einrichtung wird das Gitterelement automatisch platziert. Item Item Target Item Item Item grid-column-start: 2; Das Zielgitterelement wird in der zweiten Spalte platziert. Item Item Target…
#grid-row-start Definiert die Position des Zeilenanfangs eines Rasterelements. default grid-row-start: auto; Bei dieser 3-spaltigen Einrichtung wird das Gitterelement automatisch in der ersten Zeile platziert. Item Item Target Item Item Item grid-row-start: 2; Das Zielgitterelement wird in der…
#grid-column-gap Definiert den Zwischenraum zwischen den Spalten eines Raster-Containers. default grid-column-gap: 0; Entfernt die Lücke. 1. One 2. Two 3. Three grid-column-gap: 10px; Sie können Pixel-Werte verwenden. 1. One 2. Two 3. Three grid-column-gap: 3rem; Sie können…
#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…
#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 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.…