Układ siatki CSS
Źródło: CSS Grid Layout Module Level 1
grid
Atrybuty mieszane układu siatki
- Wartość
<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>- Inicjalizacja
- none
- Zastosowanie
- kontenery układu siatki
- Dziedziczenie
- zobacz cechy indywidualne
- Procenty
- zobacz cechy indywidualne
grid-area
Obszar układu siatki
- Wartość
<grid-line> [ / <grid-line> ]{0,3}- Inicjalizacja
- auto
- Zastosowanie
- dzieci kontenera układu siatki i elementy pozycjonowane absolutnie, których blok obejmujący jest kontenerem układu siatki
- Dziedziczenie
- nie
- Procenty
- nie
grid-auto-columns
Automatyczne kolumny układu siatki
- Wartość
<track-size>+- Inicjalizacja
- auto
- Zastosowanie
- kontenery układu siatki
- Dziedziczenie
- nie
- Procenty
- zobacz grid-template-columns i grid-template-columns
grid-auto-flow
Automatyczny przepływ układu siatki
- Wartość
[ row | column ] || dense- Inicjalizacja
- row
- Zastosowanie
- kontenery układu siatki
- Dziedziczenie
- nie
- Procenty
- nie
grid-auto-rows
Automatyczne wiersze układu siatki
- Wartość
<track-size>+- Inicjalizacja
- auto
- Zastosowanie
- kontenery układu siatki
- Dziedziczenie
- nie
- Procenty
- zobacz grid-template-columns i grid-template-columns
grid-column
Atrybuty mieszane kolumny układu siatki
- Wartość
<grid-line> [ / <grid-line> ]?- Inicjalizacja
- auto
- Zastosowanie
- dzieci kontenera układu siatki i elementy pozycjonowane absolutnie, których blok obejmujący jest kontenerem układu siatki
- Dziedziczenie
- nie
- Procenty
- nie
grid-column-end
Kolumna końcowa układu siatki
- Wartość
<grid-line>- Inicjalizacja
- auto
- Zastosowanie
- dzieci kontenera układu siatki i elementy pozycjonowane absolutnie, których blok obejmujący jest kontenerem układu siatki
- Dziedziczenie
- nie
- Procenty
- nie
grid-column-start
Kolumna początkowa układu siatki
- Wartość
<grid-line>- Inicjalizacja
- auto
- Zastosowanie
- dzieci kontenera układu siatki i elementy pozycjonowane absolutnie, których blok obejmujący jest kontenerem układu siatki
- Dziedziczenie
- nie
- Procenty
- nie
grid-row
Wiersz układu siatki
- Wartość
<grid-line> [ / <grid-line> ]?- Inicjalizacja
- auto
- Zastosowanie
- dzieci kontenera układu siatki i elementy pozycjonowane absolutnie, których blok obejmujący jest kontenerem układu siatki
- Dziedziczenie
- nie
- Procenty
- nie
grid-row-end
Wiersz końcowy układu siatki
- Wartość
<grid-line>- Inicjalizacja
- auto
- Zastosowanie
- dzieci kontenera układu siatki i elementy pozycjonowane absolutnie, których blok obejmujący jest kontenerem układu siatki
- Dziedziczenie
- nie
- Procenty
- nie
grid-row-start
Wiersz początkowy układu siatki
- Wartość
<grid-line>- Inicjalizacja
- auto
- Zastosowanie
- dzieci kontenera układu siatki i elementy pozycjonowane absolutnie, których blok obejmujący jest kontenerem układu siatki
- Dziedziczenie
- nie
- Procenty
- nie
grid-template
Szablon układu siatki
- Wartość
none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?- Inicjalizacja
- none
- Zastosowanie
- kontenery układu siatki
- Dziedziczenie
- zobacz cechy indywidualne
- Procenty
- zobacz cechy indywidualne
grid-template-areas
Obszary szablonu układu siatki
- Wartość
none | <string>+- Inicjalizacja
- none
- Zastosowanie
- kontenery układu siatki
- Dziedziczenie
- nie
- Procenty
- nie
grid-template-columns
Kolumny szablonu układu siatki
- Wartość
none | <track-list> | <auto-track-list>- Inicjalizacja
- none
- Zastosowanie
- kontenery układu siatki
- Dziedziczenie
- nie
- Procenty
- odnosi się do odpowiedniego wymiaru obszaru zawartości
grid-template-rows
Wiersze szablonu układu siatki
- Wartość
none | <track-list> | <auto-track-list>- Inicjalizacja
- none
- Zastosowanie
- kontenery układu siatki
- Dziedziczenie
- nie
- Procenty
- odnosi się do odpowiedniego wymiaru obszaru zawartości
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
grid: wartość | 57 2017-03-09 | 52 2017-03-07 | 16 2017-10-17 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-area: wartość | 57 2017-03-09 | 52 2017-03-07 | 16 2017-10-17 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-auto-columns: wartość | 57 2017-03-09 | 70 2019-10-22 | 16 2017-10-17 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-auto-flow: wartość | 57 2017-03-09 | 52 2017-03-07 | 16 2017-10-17 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-auto-flow: column | 57 2017-03-09 | 52 2017-03-07 | 79 2020-01-15 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-auto-flow: dense | 57 2017-03-09 | 52 2017-03-07 | 79 2020-01-15 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-auto-flow: row | 57 2017-03-09 | 52 2017-03-07 | 79 2020-01-15 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-auto-rows: wartość | 57 2017-03-09 | 70 2019-10-22 | 16 2017-10-17 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-column: wartość | 57 2017-03-09 | 52 2017-03-07 | 16 2017-10-17 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-column-end: wartość | 57 2017-03-09 | 52 2017-03-07 | 16 2017-10-17 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-column-start: wartość | 57 2017-03-09 | 52 2017-03-07 | 16 2017-10-17 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-row: wartość | 57 2017-03-09 | 52 2017-03-07 | 16 2017-10-17 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-row-end: wartość | 57 2017-03-09 | 52 2017-03-07 | 16 2017-10-17 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-row-start: wartość | 57 2017-03-09 | 52 2017-03-07 | 16 2017-10-17 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-template: wartość | 57 2017-03-09 | 52 2017-03-07 | 16 2017-10-17 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-template: none | 57 2017-03-09 | 52 2017-03-07 | 79 2020-01-15 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-template-areas: wartość | 57 2017-03-09 | 52 2017-03-07 | 16 2017-10-17 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-template-areas: none | 57 2017-03-09 | 52 2017-03-07 | 79 2020-01-15 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-template-columns: wartość | 57 2017-03-09 | 52 2017-03-07 | 16 2017-10-17 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-template-columns: auto | 57 2017-03-09 | 52 2017-03-07 | 79 2020-01-15 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-template-columns: none | 57 2017-03-09 | 52 2017-03-07 | 79 2020-01-15 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-template-rows: wartość | 57 2017-03-09 | 52 2017-03-07 | 16 2017-10-17 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-template-rows: auto | 57 2017-03-09 | 52 2017-03-07 | 79 2020-01-15 | 44 2017-03-21 | 10.1 2017-03-27 |
grid-template-rows: none | 57 2017-03-09 | 52 2017-03-07 | 79 2020-01-15 | 44 2017-03-21 | 10.1 2017-03-27 |