Model układu siatki CSS pozwala nam utworzyć dwuwymiarowy układ na stronie internetowej i wyrównać elementy siatki w rzędach i kolumnach. Jeśli porównamy model układu siatki CSS z wcześniejszymi modelami układu, dowiemy się, że dwukierunkowe zachowanie modelu siatki CSS całkowicie zmieniło sposób projektowania interfejsów użytkownika. Model układu siatki CSS umożliwia projektowanie stron internetowych bez użycia pływaków, pozycjonowania, blokad itp.

W tym artykule omówimy wszystkie podstawy modelu układu siatki CSS i zostanie on zorganizowany w następujący sposób:

• Jaki jest model układu siatki CSS?
• Różnica między siatkami CSS i CSS Flexbox.
• Co to jest pojemnik na siatkę?
• Jakie są elementy siatki?
• Praktyczne wdrożenie układu siatki CSS.

Więc zacznijmy!

Jaki jest model układu siatki CSS

Jest to dwupoziomowy model układu oparty na siatce z wierszami i kolumnami. Te rzędy i kolumny mogą pomieścić elementy siatki.

Jaka jest różnica między modelem siatki i flexbox

Teraz musisz zastanawiać się, czy zarówno CSS Flexbox, jak i siatka CSS to modele układu, więc jaka jest różnica między obiema modelami układu?

Poniższa tabela pomoże ci zrozumieć podstawy tej koncepcji:

Układ siatki CSS	CSS Flexbox
Jest to dwuwymiarowy model układu.	Jest to jednowymiarowy model układu.
Układ siatki może jednocześnie działać na rzędach i kolumnach.	Flexbox może jednocześnie pracować na rzędach lub kolumnach.
Pomaga tworzyć bardziej skomplikowane i zorganizowane układy.	Pomaga zaprojektować i tworzyć responsywne strony internetowe.
Siatki CSS najlepiej nadają się do układów na większą skalę.	Układy CSS Flexbox najlepiej nadają się do układów mniejszych.
Układ pierwsze podejście.	Pierwsze podejście treści.

Co to jest pojemnik na siatkę?

Pojemnik z siatką to pudełko/kontener, który zawiera elementy siatki i może umieszczać te elementy w rzędach i kolumnach. Aby utworzyć pojemnik na siatkę, musimy wykorzystać właściwość wyświetlania i ustawić jej wartość jako sieć inline lub siatkę.

Poniższa tabela zawiera krótki przewodnik dla właściwości kontenera siatki:

Nieruchomości	Opis
wyświetlacz	określa element jako siatkę, określając jego wartość do sieci inline lub siatki.
Kolumn i rzędy z kratami z kratami	Określ rozmiar kolumn i wierszy w pojemniku siatkowym, a właściwości te mogą zająć listę wartości oddzielonych przestrzenią E.G. Ścieżka, nazwa linii.
Sirat-Template-Areas	Określa, jak wyświetlać wiersze i kolumny za pomocą nazwanych elementów siatki.
Siat-Template	Jest to właściwość skrótów używana do osiągnięcia funkcjonalności trzech nieruchomości i.mi. kolumny z kratami, rzędy z kratami i obok siatki.
Gap i luka w kolumnie	Właściwości te określają szczelinę odpowiednio między rzędami siatki a kolumnami siatki.
Grid-kolumn i gapa-gapa	Określ rozmiar luki odpowiednio między różnymi kolumnami i wierszami siatki.
GRID GAP	Jest to właściwość skrótów używana do osiągnięcia funkcjonalności dwóch nieruchomości i.mi. Grid-kolumn i gapa-gapa
Justify-Items	Wyrównuje elementy siatki wzdłuż rzędów/osi inline.
Wyrównanie	Wyrównuje elementy siatki wzdłuż kolumn/osi inline.
Place-Items	Jest to właściwości skrótów dla wyrównanych i elementów uzasadnienia, które ustalają obie te właściwości w jednym deklaracji.
justify-content	Wyrównuje siatkę wzdłuż rzędów/osi inline
Align-Content	Wyrównuje siatkę wzdłuż osi kolumn/bloku
Place-content	Jest to krótka właściwość dla wyrównania i uzasadnienia.
Grid-Auto-Columns	Określa domyślny rozmiar dla kolumn…
Rows-Auto Row	Definiuje domyślny rozmiar dla wierszy.
Grid-Auto-Flow	Określa, w jaki sposób elementy automatyczne są dodawane w siatce CSS
siatka	Własność skrótów dla rzędów-tablonów siatki, rowów siatki, kolumny z kratami, siatką-auto-kolumnami, siatką i właściwościami siatki i przepływu.

Praktyczne wdrożenie układu siatki CSS

Teraz wdrożyćmy kilka powyżej opisanych nieruchomości praktycznie:

Przykład 1

Po pierwsze, zaimplementujemy właściwość siatki i ustalimy jej wartość jako "siatka". Następnie wykorzystamy właściwość Grid-Template-Columns i ustawym wartość „Auto” dla wszystkich trzech kolumn:

Model układu siatki

Pierwszy element
Drugi element
Trzeci przedmiot
Czwarty przedmiot
Piąty przedmiot
Szósty przedmiot

Otrzymamy następujące dane wyjściowe dla powyższego fragmentu kodu:

Przykład 2

Teraz zaimplementujmy właściwość Rows-Template Rows, aby określić rozmiar wiersza:

Rowki z kratą siatki: automatyczne 150px;

Powyższy fragment pokazuje, że rozmiar pierwszego rzędu jest "automatyczny" A rozmiar drugiego rzędu jest „150px”. Wynikowe wyjście będzie wyglądać tak:

Możemy obserwować przestrzeń u dołu drugiego rzędu, która potwierdza działanie właściwości Rows-Template Rows.

Jakie są elementy siatki?

Elementy/elementy obecne w pojemniku siatki CSS są znane jako elementy siatki lub elementy dziecięce.

Poniższa tabela ilustruje różne właściwości elementów siatki:

Nieruchomości	Opis
Grid-Column-Start i Grid-Row-Start	Właściwości te określają lokalizację elementów siatki, określając, gdzie rozpocząć element.
Grid-kolumn-end-end-end-end-end	Właściwości te określają lokalizację elementów siatki, określając, gdzie zakończyć element siatki.
Kolumnalka	Jest to nieruchomości streszczenia startowego i kolumny z kolumny.
Grid Row	Jest to właściwość skrótów dla dwóch nieruchomości i.mi. Grid-rzędowy start i rzędu siatki.
obszar siatki	Określa nazwę elementu siatki lub można go użyć do osiągnięcia funkcji wielu właściwości i.mi. Grid-rzędowy start, siatka-kolumna, start, grid-rzędowy i.
Jausify-Self	Wyrównuje element siatki w komórce wzdłuż osi wiersza/.
wyrównać jaźń	Wyrównuje element siatki w komórce wzdłuż osi kolumny/bloku.
Place-Self	Jest to właściwość skrótów dla dwóch nieruchomości i.mi. wyrównać sobie i usprawiedliwić siebie.

Przykład 3

W tym przykładzie wykorzystamy właściwość wyrównania w „Klasa przedmiotów”, Tak więc cały kod będzie taki sam, jak określono w poprzednich przykładach, a jedyna różnica wystąpi w klasie pozycji, jak pokazano poniżej:

.KLAS ITUTS
kolor tła: SkyBlue;
Border: 2px Solid Black;
Wyściółka: 30px;
Rozmiar czcionki: 30px;
Text-Align: Center;
Align-Self: Flex-end;

Ustawiamy wartość właściwości wyrównanej jako elastyczność, która wyrównuje linie na końcu kontenera:

W ten sposób możemy wykorzystać dowolne pojemniki z siatką lub właściwości elementów siatki zgodnie z naszym scenariuszem.

Wniosek

Model układu siatki CSS pozwala nam utworzyć dwuwymiarowy układ na stronie internetowej i wyrównać elementy siatki w rzędach i kolumnach. Dwuwymiarowe zachowanie modelu układu siatki pozwala nam jednocześnie pracować nad rzędami i kolumnami. Model układu siatki CSS może mieć jeden element nadrzędny i wiele elementów dziecka. Element nadrzędny nazywa się pojemnikiem siatki, a element dziecięcy nazywa się elementem siatki. Liczne właściwości można użyć do pracy z modelami układu siatki, takimi jak display, siatka, miejsce, uzasadnienie przedmiotów itp