Wprowadzenie do modułu układu siatki CSS

To było jednorazowo stoły, następnie marginesy i pływaki, następnie flexbox i teraz krata: CSS zawsze kierował się w stronę nowych i lepszych sposobów na złagodzenie odwiecznej pracy kodowanie układów internetowych. The Model układu siatki CSS może tworzyć i aktualizować układ wzdłuż dwóch osi: poziomy i pionowy, wpływa zarówno na szerokość, jak i wysokość elementów.

Układ siatki nie zależy od położenia elementów w znacznikach, a więc możesz przetasuj rozmieszczenie elementów w znacznikach bez zmiany układu. W modelu siatki jest elementem kontenera siatki podzielony na kolumny siatki i wiersze (zbiorczo znany jako ślady siatki) przez linie siatki. Teraz zobaczmy, jak to zrobić utworzyć przykładową siatkę.

Obsługa przeglądarki

Podczas pisania tego artykułu moduł siatki CSS jest obsługiwany tylko przez najnowszą przeglądarkę IE i Edge. Siatka CSS jest w fazie eksperymentalnej w innych głównych przeglądarkach, w których musisz włącz obsługę ręcznie:

• Firefox: Naciśnij Shift + F2, wprowadź następujące polecenie do paska wejściowego GCLI, który pojawił się na dole przeglądarki: pref set layout.css.grid.enabled true.
• Chrom: Przeglądaj chrome: // flagi URL i włącz Eksperymentalne funkcje platformy internetowej.

Prawdopodobnie wszystkie główne wsparcie przeglądarki przyjść na początku / w połowie 2017 roku.

Przykładowa siatka

Do zamień element w pojemnik z siatką możesz użyć jeden z tych trzech pokaz nieruchomości:

1. wyświetlacz: siatka; - element jest konwertowane na kontener siatki blokowej
2. wyświetlacz: siatka inline; - element jest konwertowane na wbudowany kontener siatki
3. display: subgrid; - jeśli element jest elementem siatki, to jest konwertowane na podrzędną to ignoruje szablon siatki i właściwości przerwy w siatce

Tak jak tabela składa się z wielu komórek tabeli, siatka jest składa się z wielu komórek siatki. Element siatki to przypisany do zestawu komórek siatki to jest znane jako obszar siatki.

Stworzymy siatka z pięcioma sekcjami (obszary siatki): góra, dół, lewo, prawo i środek. HTML składa się z pięć div wewnątrz kontenera div.

 
 
Top
 
Lewo
 
środek
 
Dobrze
 
Dolny
 
 

W CSS, obszary siatki-szablonu własność definiuje siatkę z różnymi obszarami siatki. W swojej wartości, ciąg reprezentuje wiersz siatki i każda poprawna nazwa w ciągu reprezentuje kolumnę. Do utworzyć pustą komórkę siatki musisz użyć kropka (.) postać w ciągu wiersza.

The nazwy obszarów siatki mają odnosić się do obszar siatki właściwość poszczególnych elementów siatki.

 .grid-container width: 500px; wysokość: 500px; wyświetlacz: siatka; grid-template-areas: „top top top” „left center right” „bottom bottom bottom”;  .grid-top grid-area: top;  .grid-bottom grid-area: bottom;  .grid-left grid-area: left;  .grid-right grid-area: right;  .grid-center grid-area: center;  

Więc ten kod tworzy siatka z trzema rzędami i kolumnami. The Top przedmiot zajmuje obszar, który się rozciąga trzy kolumny w pierwszym rzędzie i Dolny element obejmuje trzy kolumny w ostatnim rzędzie. Każdy z lewo, środek i dobrze przedmioty zabiera jedna kolumna w środkowym rzędzie.

Teraz musimy przypisz wymiary do tych wierszy i kolumn. The kolumny-szablon-kolumny i rzędy szablonu siatki nieruchomości zdefiniuj rozmiar ścieżki siatki (wiersz lub kolumna).

 .grid-container width: 500px; wysokość: 500px; wyświetlacz: siatka; grid-template-areas: „top top top” „left center right” „bottom bottom bottom”; grid-template-columns: 100px auto 100px; grid-template-rows: 50px auto 150px;  

Oto jak wygląda nasza siatka CSS (z dodatkowymi stylami):

Odstęp między elementami siatki

Możesz dodać pusta przestrzeń między kolumnami i wierszami za pomocą przerwa w kolumnie siatki i szczelina między rzędami siatki, lub ich własność luka w siatce.

 .grid-container width: 500px; wysokość: 500px; wyświetlacz: siatka; grid-template-areas: „top top top” „left center right” „bottom bottom bottom”; grid-template-columns: 100px auto 100px; grid-template-rows: 50px auto 150px; przerwa w siatce: 5px 5px;  

Poniżej możesz zobaczyć, że luka w siatce Właściwość dodała luki między elementami siatki.

Wyrównaj zawartość siatki i elementy

The uzasadniaj treść właściwość kontenera siatki (.pojemnik na siatkę) wyrównuje zawartość siatki wzdłuż osi liniowej (oś pozioma) i nieruchomości wyrównanie treści, wyrównuje zawartość siatki wzdłuż osi bloku (oś pionowa). Obie właściwości może mieć jedną z tych wartości: początek, koniec, środek, przestrzeń pomiędzy, przestrzeń wokół i równomiernie.

W stosownych przypadkach rozmiar ścieżki (wiersz lub kolumna) kurczy się, aby dopasować zawartość po wyrównaniu. Spójrz na zrzuty ekranu zawartości siatki dostosowane do różnych wartości poniżej.

justify-content: start;

justify-content: end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

uzasadniaj treść: równomiernie;

align-content: start;

align-content: end;

wyrównanie treści: centrum;

align-content: space-between;

align-content: space-around;

wyrównanie treści: równomiernie;

Oboje uzasadniaj treść i wyrównanie treści nieruchomości wyrównaj całą zawartość w siatce.

Do wyrównaj poszczególne elementy w ich obszarach siatki, Użyj inna para właściwości wyrównania: justify-items i elementy wyrównania. Obie mogą mieć jedną z następujących wartości: początek, koniec, środek, linia bazowa (wyrównaj elementy wzdłuż podstawowej linii siatki obszaru) i rozciągać (przedmioty wypełniają cały obszar).