Co to jest właściwość siatki?

Właściwość grid jest stenograficzną właściwością rzędów szablonów siatki, kolumn szablonów siatki, obszarów szablonów siatki, automatycznych wierszy siatki, automatycznych kolumn siatki, automatycznego przepływu siatki, odstępu między kolumnami siatki oraz właściwości odstępu między wierszami siatki.

Struktura siatki

Właściwość Grid sprawia, że ​​elementy wyświetlają się jak macierz ⊞

 
 
 
 
 
 
 
 

W css

#pojemnik {
 wyświetlacz: siatka;
 }

W przykładzie #kontener jest wyświetlany jako siatka, a jego elementy potomne będą wyświetlane jako komórki lub elementy siatki

Kompatybilność z przeglądarkami

To ogromne podekscytowanie, że IE, Edge i Firefox obsługują właściwość grid CSS . Przeważnie cała przeglądarka ma piękny interfejs użytkownika w widoku siatki w narzędziach programistycznych.

Linie siatki

Linie siatki to linie poziome i pionowe, służą do pozycjonowania. Indeks pozycjonowania może być liczbą całkowitą (zarówno liczbami całkowitymi ujemnymi, jak i dodatnimi).

Właściwości → początek-kolumny-początek, koniec-kolumny, koniec-rzędu, koniec-rzędu.

Przykładowy kod :

#grid> div: nth-child (2) {
 grid-column-start: 2;
 grid-column-end: 3;
 początek rzędu rzędów: 2;
 koniec rzędu rzędów: 3;
}

Element 2 rozpocznie się na drugiej linii pionowej w 2 linii poziomej, a element zakończy się na 3 linii pionowej i 3 linii pionowej.

Linia siatki

Komórka siatki

Komórka siatki to przestrzeń między dwiema sąsiednimi pionowymi liniami siatki i dwiema sąsiednimi poziomymi liniami siatki.

Grid Cell

Ścieżki siatki

Ścieżka siatki to przestrzeń między dwiema sąsiadującymi liniami siatki. tj. wiersz, kolumny.

Ścieżka siatki

Obszar siatki i przerwa w siatce

Obszar siatki to grupa jednej lub więcej komórek.

Siatka Szczelina to przestrzeń między wierszami i kolumnami. Jest to skrótowa właściwość odstępu między rzędami siatki i odstępu między słupami siatki.

Wiersz siatki i kolumna siatki

grid-row to skrótowa właściwość dla grid-row-start i grid-row-end.

grid-column jest skrótową właściwością dla grid-column-start-and-grid-column-end

Wiersz siatki

grid-row-start → określa pozycję początkową elementu siatki w rzędzie

np. grid-row-start: 2 → Element rozpocznie się od drugiej linii pionowej

grid-row-end → określa pozycję końcową elementu siatki w rzędzie

np. koniec linii-rzędu: 3 → Element zakończy się na drugiej linii pionowej

Automatyczny przepływ w sieci

Kontroluje działanie algorytmu automatycznego umieszczania. Domyślnie wartością jest wiersz (elementy są umieszczane w rzędzie)

grid-auto-flow: row;
grid-auto-flow: kolumna;
Siatka automatycznego przepływu kolumna i wiersz automatycznego przepływu siatki

grid-auto-flow: rząd gęsty → Wykorzystuje algorytm upakowania „gęsty”. Wypełnij wolne miejsce w siatce na podstawie wierszy.

grid-auto-flow: kolumna gęsta → Wykorzystuje algorytm upakowania „gęsty” Wypełnij wolną przestrzeń w siatce na podstawie kolumny

Jawna siatka i niejawna siatka

Jawna siatka to siatka utworzona przez użytkownika za pomocą siatki-szablonu-wiersza, siatki-szablonu-kolumn

grid-szablon-kolumny: powtórz (3, 100px);
siatki-szablony-wiersze: 100px 100px;

Niejawna siatka jest tworzona przez przeglądarkę. Rozmiar niejawnej siatki można modyfikować za pomocą właściwości grid-auto-columns i grid-auto-rows.

grid-szablon-kolumny: powtórz (3, 100px);
siatki-automatyczne-wiersze: 100 pikseli;

Kolejność siatki:

Możemy zamówić element według właściwości obszaru szablonu.

możemy zmienić obszar szablonu w zapytaniu o media i wyświetlić nową strukturę siatki.

sprawdź codepen, aby uzyskać więcej.

W przypadku siatki najczęściej używamy systemu siatki ładowania początkowego. Bootstrap może zmienić nazwę klasy w każdej wersji (ale nie tak jak Angular ), więc musimy pamiętać, która wersja ma nazwę klasy .

Korzystając z właściwości grid CSS, MOŻEMY (nawet w IE ) z łatwością wyświetlać elementy w widoku siatki.

Wielkie dzięki za czytanie! Jeśli ci się podobało, proszę o wsparcie, klaszcząc i udostępniając post. Dodaj komentarz poniżej.