Element siatki CSS
1
2
3
4
5
Elementy podrzędne (przedmioty)
Kontener siatki zawiera elementy siatki .
Domyślnie kontener ma jeden element siatki na każdą kolumnę w każdym wierszu, ale można stylizować elementy siatki tak, aby obejmowały wiele kolumn i/lub wierszy.
Właściwość kolumny siatki:
Właściwość grid-columnokreśla, w której kolumnie (kolumnach) umieścić element.
Definiujesz, gdzie pozycja się rozpocznie, a gdzie zakończy.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Uwaga: Właściwość grid-columnjest skróconą własnością dla właściwości grid-column-starti grid-column-end.
Aby umieścić element, możesz odwołać się do numerów wierszy lub użyć słowa kluczowego „span”, aby określić, ile kolumn będzie obejmował element.
Przykład
Ustaw „element 1” na początku w kolumnie 1 i kończ przed kolumną 5:
.item1 {
grid-column: 1 / 5;
}
Przykład
Ustaw pozycję „item1” na początku kolumny 1 i rozszerz 3 kolumny:
.item1 {
grid-column: 1 / span 3;
}
Przykład
Ustaw pozycję „item2” na początku kolumny 2 i rozszerz 3 kolumny:
.item2 {
grid-column: 2 / span 3;
}
Właściwość wiersza siatki:
Właściwość grid-rowokreśla, w którym wierszu umieścić element.
Definiujesz, gdzie pozycja się rozpocznie, a gdzie zakończy.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Uwaga: Właściwość grid-rowjest skróconą własnością dla właściwości grid-row-starti grid-row-end.
Aby umieścić element, możesz odwołać się do numerów wierszy lub użyć słowa kluczowego „span”, aby określić, ile wierszy ma obejmować element:
Przykład
Spraw, aby „element 1” zaczynał się w wierszu w wierszu 1 i kończył w wierszu w wierszu 4:
.item1 {
grid-row: 1 / 4;
}
Przykład
Spraw, aby „element 1” zaczynał się w rzędzie 1 i obejmował 2 rzędy:
.item1 {
grid-row: 1 / span 2;
}
Właściwość obszaru siatki
Właściwość grid-areamoże być używana jako skrócona właściwość dla
właściwości grid-row-start, grid-column-starti .grid-row-endgrid-column-end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Przykład
Niech „item8” zaczyna się w wierszu 1 i kolumnie 2, a kończy w wierszu 5 i kolumnie 6:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
Przykład
Ustaw pozycję „item8” na początku wiersza-wiersz 2 i kolumny-wiersz 1 i obejmując 2 wiersze i 3 kolumny:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
Nazewnictwo elementów siatki
Właściwość grid-areamoże również służyć do przypisywania nazw do elementów siatki.
nagłówek
Menu
Główny
Prawidłowy
Stopka
Nazwane elementy siatki mogą odnosić się do grid-template-areaswłaściwości kontenera siatki.
Przykład
Element 1 otrzymuje nazwę „myArea” i obejmuje wszystkie pięć kolumn w układzie siatki z pięcioma kolumnami:
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
myArea myArea myArea';
}
Każdy wiersz jest określony apostrofami (' ')
Kolumny w każdym rzędzie są określone w apostrofach oddzielonych spacją.
Uwaga: Znak kropki reprezentuje element siatki bez nazwy.
Przykład
Niech „myArea” obejmuje dwie kolumny w układzie siatki z pięcioma kolumnami (znaki kropek reprezentują elementy bez nazwy):
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
. . .';
}
Aby zdefiniować dwa wiersze, zdefiniuj kolumnę drugiego wiersza wewnątrz innego zestawu apostrofów:
Przykład
Spraw, aby „item1” obejmował dwie kolumny i dwa wiersze:
.grid-container {
grid-template-areas: 'myArea myArea
. . .' 'myArea myArea . . .';
}
Przykład
Nazwij wszystkie elementy i stwórz gotowy do użycia szablon strony internetowej:
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 {
grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area:
footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main
main main right right'
'menu footer footer footer footer
footer';
}
Kolejność przedmiotów
Układ siatki pozwala nam umieszczać elementy w dowolnym miejscu.
Pierwszy element w kodzie HTML nie musi pojawiać się jako pierwszy element w siatce.
1
2
3
4
5
6
Przykład
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
Możesz zmienić kolejność dla określonych rozmiarów ekranu, korzystając z zapytań o media:
Przykład
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 /
span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 /
span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6
{ grid-area: 2 / 3 / 3 / 4; }
}