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