Co to jest siatka CSS?

Przypisywanie odpowiednich pozycji do elementów jest bardzo znaczące przy projektowaniu strony internetowej. Istnieją różne właściwości i układy dostępne w CSS, które pomagają wykonać to zadanie. Jednym z takich układów jest moduł siatki CSS, który układa elementy w rzędach i kolumnach. Celem tego artykułu jest podkreślenie tego, czym jest ten układ i jak można go użyć.

Zacznijmy.

Co to jest siatka CSS

Grid to model układu CSS, który umożliwia użytkownikom umówienie elementów pojawiających się na stronie internetowej w różnych wierszach i kolumnach. Ten model zasadniczo dzieli stronę internetową na sekcje i wyrównuje elementy bez konieczności przechodzenia problemów z użyciem pozycjonowania i pływaków.

Siatka pozycjonuje elementy w odniesieniu do strony internetowej lub innych elementów obecnych na stronie internetowej. Poniżej pokazaliśmy wizualną reprezentację układu siatki CSS.

Model układu siatki działa ze wszystkimi najnowszymi przeglądarkami. Składa się z dwóch komponentów, które są pojemnik na siatkę I elementy siatki. Poniżej wyjaśniliśmy je szczegółowo.

Pojemnik na siatkę

Pojemnik na siatkę to element nadrzędny, który trzyma elementy siatki umieszczone w rzędach i kolumnach. W celu utworzenia elementu przyjęcia zachowania kontenera siatki Ustaw jego właściwość wyświetlacza na siatkę lub sieć inline.

Elementy siatki

Element siatki to element dziecięcy, który jest obecny w pojemniku siatki. Domyślnie w pojemniku jest jeden element obecny dla każdej kolumny, w każdym wierszu. Jednak możesz obejmować elementy siatki w licznych rzędach i kolumnach.

Oto graficzna reprezentacja pojemnika siatki i elementów siatki.

Jak już wspomniano, siatka CSS dzieli stronę internetową na wiersze i kolumny, aby ułożyć elementy. Te rzędy i kolumny wraz z innymi ważnymi terminologii siatki wyjaśniono poniżej.

Kolumny w siatce

Linie pionowe w siatce, w której umieszczane są elementy, są uważane za kolumny w siatce. System siatki może mieć co najmniej dwie i co najwyżej dwanaście lub więcej kolumn.

Rzędy w siatce

Linie poziome w siatce, w której umieszczane są pozycje, są uważane za rzędy w siatce. System siatki może mieć wiele wierszy.

Luki w siatce

Obszar między każdym wierszem i kolumną jest określany jako luki.

Linie w siatce

Linie między każdym wierszem są określane jako wiersze wiersza, podczas gdy linie między każdą kolumną są określane jako linie kolumny.

Istnieje wiele właściwości powiązanych z siatką CSS. Zapoznaj się z następną sekcją, aby dowiedzieć się o nich.

Właściwości siatki

Poniższa tabela zawiera przegląd właściwości układu siatki.

Nieruchomości	Opis
Kolecki z kratami	Ta właściwość podaje liczbę i rozmiar kolumn w układzie siatki.
Rowki z kratą siatki	Opisuje rozmiar wierszy w systemie siatki.
Sirat-Template-Areas	Ta właściwość przypisuje nazwy do różnych elementów w siatce.
Grid-Auto-Columns	Ustawia początkowy rozmiar kolumny.
Rows-Auto Row	Ta właściwość ustawia początkowy rozmiar rzędu.
Grid-Auto-Flow	Stwierdza, w jaki sposób elementy automatyczne umieszczane są w systemie siatki.
Grid-rzędowy start	Ta nieruchomość stwierdza, gdzie rozpocząć przedmiot w siatce.
Grid-kolumn-start	Wykonuje tę samą funkcję co powyższa właściwość.
Grid-rzędowy
Kolumn-kolumn	Wykonuje tę samą funkcję co powyższa właściwość.
obszar siatki	Ta właściwość służy do nazwania określonego obszaru siatki.
Gapa w wierszach	Ta własność przedstawia lukę między wierszami.
luka w kolumnie	Stwierdza lukę między kolumnami.

Rozumiemy system siatki dalej za pomocą przykładu.

Przykład

W przykładzie pokazanym poniżej stworzyliśmy prosty układ siatki. Szkic siatki pokazano poniżej.

Zacznijmy kodowanie.

Html

A
B
C
D

Tutaj po prostu zagnieżdżyliśmy cztery pojemniki Div w większym pojemniku Div. Każdemu z elementu DIV przypisano jakąś klasę.

CSS

.pojemnik
Wyświetlacz: siatka;
Grid Gap: 5px;
Kolecka z kradzieży siatki: 120px 120px 120px;

Korzystając z klasy „kontenera” przypisanego do większej div, wyświetlamy go jako siatkę. Ponadto przypisał lukę 5px między wierszami i kolumnami. Na koniec utworzyliśmy trzy kolumny o rozmiarze 120px każdy za pomocą właściwości z kratą-tablonem.

CSS

.przedmiot
kolor tła: Sandybrown;
kolor biały;
RADIUS BRAVES: 6px;
Wyściółka: 25px;
Rozmiar czcionki: 20px;

Teraz po prostu stylizujemy elementy obecne w pojemniku siatki za pomocą podstawowych właściwości CSS.

CSS

.jeden
Kolumna siatki: 1/3; / * Określa lokalizację i rozmiar elementu w kolumnie */
Grid Row: 1; / * Określa lokalizację i rozmiar elementu w wierszu */

Właściwość Grid-Column ustawia pozycję początkową i końcową elementu siatki w kolumnie, tymczasem właściwość Grid Row definiuje pozycję elementu z rzędu. Na przykład w powyższym fragmencie kodu element 1 zacznie wyświetlać w kolumnie 1 i zakończy w kolumnie 3, podczas gdy będzie wyświetlany w wierszu 1.

CSS

.dwa
Kolumna siatki: 3;
Grid Row: 1/3;

.trzy
Kolumna siatki: 1;
Grid-Row: 2;

.cztery
Kolumna siatki: 2;
Grid-Row: 2;

Korzystanie z kolumny siatki i właściwości Grid-Row określone są również pozycje reszty elementów.

Wyjście

Wygenerowano prosty układ siatki.

Wniosek

Model układu siatki umożliwia użytkownikom umówienie elementów pojawiających się na stronie internetowej w różnych rzędach i kolumnach. Ten model zasadniczo dzieli stronę internetową na sekcje i wyrównuje elementy w odniesieniu do strony internetowej lub innych elementów obecnych na stronie internetowej. Składa się z różnych elementów, które są pojemnikiem sieci. Pojemnik z siatką jest elementem nadrzędnym, podczas gdy elementy siatki są elementami dzieci. W tym spisie omawia wszystkie niezbędne szczegóły układu siatki wraz z reprezentacjami graficznymi oraz odpowiedni przykład.