#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 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 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 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 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…
#grid-row-end Definiert die Position des Zeilenendes eines Rasterelements. default grid-row-end: auto; Bei dieser 3-spaltigen Einrichtung wird das Gitterelement automatisch platziert. Item Item Target Item Item Item grid-row-end: 3; Das Zielgitterelement endet kurz vor der dritten Zeile. Item…
#grid-auto-rows Definiert die Größe von Rasterzeilen, die implizit erstellt wurden: Das bedeutet, dass grid-auto-rows auf die Zeilen abzielt, die nicht mit grid-template-rows oder grid-template-areas definiert wurden. default grid-auto-rows: auto; Die implizit erzeugten Zeilen haben eine auto Größe.…
#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…