Właściwości siatki CSS | Wyjaśnione

CSS Grid to model układu, który umożliwia łatwe rozmieszczenie elementów pojawiających się na stronie internetowej w różne wiersze i kolumny. Ten model działa, dzieląc stronę internetową na sekcje i wyrównuje elementy bez konieczności przechodzenia problemów z użyciem pozycjonowania i pływaków. Aby użyć tego modelu, dostępne jest wiele właściwości CSS, które wyjaśniliśmy dogłębnie w tym poście.

Właściwości siatki CSS

Właściwości związane z modułem układu siatki są wyjaśnione poniżej.

Nieruchomość z kradzieży

Ponieważ wiemy, że układ siatki składa się z wielu kolumn o określonym rozmiarze, aby stwierdzić liczbę kolumn i ich szerokości, stosuje się właściwość z tablonem siatki.

Składnia

Grid-Template-Columns: Brak | Auto | Max-Content | Min-Content | długość | początkowe | dziedziczyć;

Wyjaśnione parametry
nic: Jest to wartość domyślna, która generuje kolumny w razie potrzeby.

automatyczny: Ta wartość ocenia szerokość kolumn na podstawie rozmiaru kontenera i rozmiar zawartości elementów obecnych w kolumnie.

Max-Content: Dostosowuje szerokość kolumny na podstawie największej pozycji w kolumnie.

Min-content: Dostosowuje szerokość kolumny na podstawie najmniejszej pozycji w kolumnie.

długość: To ustawia daną wartość jako szerokość kolumn.

Przykład
Załóżmy, że chcesz zrobić cztery kolumny, każda z długością określoną w kodzie. Oto jak to robisz.

Html

1
2
3
4
5
6
7
8

W powyższym kodzie, aby stworzyć kontener siatki, utworzyliśmy element DIV o klasie „elementy kontenera” i umieszczać niektóre elementy siatki w tym pojemniku, zagnieżdżę się osiem elementów Div wewnątrz kontenera siatki Div.

CSS

.pojemnik
Wyświetlacz: siatka;
Kolumny z kratami: 70px 70px 70px auto;
Grid Gap: 5px;
kolor tła: Sandybrown;
Wyściółka: 10px;

Tutaj ustawiamy wyświetlanie elementu DIV z klasą „kontenera” na siatkę, aby uczynić go kontenerem siatkowym. Następnie tworzymy cztery kolumny z pierwszymi trzema kolumnami o długości 70px, podczas gdy szerokość ostatniej kolumny jest ustawiona na automatyczne. Każda kolumna ma lukę 5px i kolor Sandybrown. Wreszcie, wyściółka pojemnika jest ustawiona na 10px.

CSS

.Przedmioty> div
kolor tła: bisque;
Wyściółka: 20px;
Text-Align: Center;
Rozmiar czcionki: 35px;

Teraz używając podstawowych właściwości CSS, które stylujemy nasze przedmioty, które są obecne w pojemniku.

Wyjście

Utworzono cztery kolumny o określonej szerokości.

właściwość Rows-Template Rows

System siatki składa się również z niektórych wierszy, aby określić liczbę wierszy wraz z ich wysokością, stosowana jest właściwość Rows-Template Rows.

Składnia

Rows-tablania siatki: Brak | Auto | Max-Content | Min-Content | długość | początkowe | dziedziczyć;

Wyjaśnione parametry
nic: Jest to wartość domyślna, która generuje wiersze w razie potrzeby.

automatyczny: Ta wartość ocenia wysokość wierszy na podstawie rozmiaru kontenera i rozmiar zawartości elementów obecnych w wierszu.

Max-Content: Dostosowuje wysokość wiersza na podstawie największego elementu w rzędzie.

Min-content: Dostosowuje wysokość wiersza na podstawie najmniejszego elementu w rzędzie.

długość: To ustawia daną wartość jako wysokość wierszy.

Przykład
Załóżmy, że chcesz utworzyć dwa rzędy o określonej wysokości, a następnie postępuj zgodnie z poniższym kodem.

Html

.pojemnik
Wyświetlacz: siatka;
Kolecka z kradzieży Grid: Auto Auto Auto Auto;
Rowki z kradzieżą: 150px 250px;
Grid Gap: 5px;
kolor tła: Sandybrown;
Wyściółka: 10px;

W powyższym kodzie wygenerowaliśmy dwa wiersze. Tymczasem pierwszy rząd ma wysokość 150px. Oprócz tego utworzyliśmy również cztery kolumny, każda z automatyczną szerokością o szczelinie 5px.

Wyjście

Utworzono dwa rzędy o określonej wysokości.

właściwość Grid-Template-Areas

W celu określenia nazwy obszarów w systemie siatki używana jest właściwość siatki-tablonów. Działa w taki sposób, aby nazwać obszar za pomocą właściwości obszaru siatki, a następnie odwołać się do tej nazwy w tej właściwości.

Składnia

Grid-Template-Areas: Brak | nazwa i nazwa przedmiotu;

Wyjaśnione parametry
nic: Jest to wartość domyślna, która nie określa żadnej nazwy dla obszaru siatki.

nazwa i nazwa przedmiotu: Ta wartość reprezentuje sekwencję, w jaki sposób będą wyświetlane wiersze i kolumny w siatce.

Przykład
Oto jak działa ta nieruchomość.

CSS

.jeden
obszar siatki: itema;

.pojemnik
Wyświetlacz: siatka;
Grid-Template-Areas: „Itema itema…”;
Grid Gap: 5px;
kolor tła: Sandybrown;
Wyściółka: 10px;

W powyższym kodzie, używając właściwości obszaru siatki i zajmie miejsce na dwie kolumny na pięć.

Wyjście

Nieruchomość działa poprawnie.

właściwość-krążą

Jest to właściwość skrótów dla wymienionych poniżej właściwości.

1. Kolecki z kratami
2. Rowki z kratą siatki
3. Sirat-Template-Areas

Składnia

Templat siatki: Brak | Rows-tablon z siatką/kolumn z kratą sieciowy | Siat-Template-Areas | początkowe | dziedziczyć;

Wyjaśnione parametry
nic: Jest to wartość domyślna, która nie określa żadnego rozmiaru wierszy i kolumn.

Kolecki z kratami: Określa rozmiar kolumn.

Rowki z kratą siatki: Określa rozmiar wierszy.

Sirat-Template-Areas: Określa nazwy obszarów siatki.

Przykład
Przypiszmy liczbę i rozmiar wierszy i kolumn naraz.

CSS

.pojemnik
Wyświetlacz: siatka;
Siat-Template: 200px/ automatyczne auto auto;
Grid Gap: 5px;
kolor tła: Sandybrown;
Wyściółka: 10px;

W powyższym kodzie określono, że istnieją dwa rzędy z wierszem 1 o wysokości 200px i trzech kolumn o automatycznej szerokości dla każdej kolumny.

Wyjście

Nieruchomość została pomyślnie wdrożona…

właściwość Grid-Row-Start

Jak sama nazwa wskazuje, ta właściwość stwierdza, że ​​wiersz element siatki zacznie wyświetlać.

Składnia

Grid-Row-Start: Auto | Row-line;

Wyjaśnione parametry
automatyczny: Jest to wartość domyślna, która umieszcza elementy zgodnie z przepływem siatki.

linia wiersza: Stwierdza, w którym wierszu element zacznie się wyświetlać.

Przykład
Rozważ poniższy przykład, aby zrozumieć działanie tej właściwości.

CSS

.pojemnik
Wyświetlacz: siatka;
Kolecka z kratami: 200px 200px 200px;
Grid Gap: 5px;
kolor tła: Sandybrown;
Wyściółka: 10px;

.trzy
Grid-Row-Start: 1;

W powyższym kodzie jesteśmy przede wszystkim określając trzy kolumny o szerokości 200px, a następnie stwierdzamy, że trzeci element zacznie wyświetlać w wierszu 1.

Wyjście

Pozycja 3 została umieszczona na początku rzędu 1.

Nieruchomość-kolumn-kolumn

Aby określić, w której kolumnie element siatki zacznie wyświetlać, używana jest właściwość Grid-Column-Start.

Składnia

Grid-Column-Start: Auto | span-n | linia kolumnowa;

Wyjaśnione parametry
automatyczny: Jest to wartość domyślna, która umieszcza elementy zgodnie z przepływem siatki.

span-n: Okazuje liczbę kolumn, które element powinien obejmować.

linia kolumnowa: Określa, w której kolumnie element zacznie się wyświetlać.

Przykład
Załóżmy, że chcesz umieścić określony element siatki na określonej kolumnie.

CSS

.jeden
Grid-kolumn-start: 2;

Tutaj używamy właściwości Grid-Column-Start i umieszczamy pozycję 1 w kolumnie 2.

Wyjście

Pozycja 1 została pomyślnie umieszczona w kolumnie 2.

Nieruchomość z rzędu siatki

Ta właściwość stwierdza, na którym wiersz element siatki zakończy się wyświetlanie lub liczba wierszy, który element siatki będzie obejmował.

Składnia

Grid-Row-end: Auto | span-n | linia wiersza;

Wyjaśnione parametry
automatyczny: Jest to wartość domyślna, która sprawia, że ​​element rozpiętości tylko jeden wiersz.

span-n: Stwierdza, że ​​liczba wierszy, które przedmiot powinien obejmować.

linia wiersza: Określa, w którym wierszu element zakończy się wyświetlanie.

Przykład
Zapoznaj się z przykładem poniżej.

.jeden
Grid-rzęd-end: Span 2;

W powyższym kodzie produkujemy punkt 1 w 2 wierszach za pomocą właściwości Grid-Row-End.

Wyjście

Przedmiot z powodzeniem rozciągnął się na dwa wiersze.

Nieruchomość-kolumna

Ta właściwość stwierdza, na której kolumnie element siatki zakończy się wyświetlanie lub liczba kolumn, które element siatki będzie obejmował.

Składnia

Grid-column-end: Auto | span-n | linia kolumnowa;

Wyjaśnione parametry
automatyczny: Jest to wartość domyślna, która sprawia, że ​​element rozpiętości tylko pojedyncza kolumna.

span-n: Okazuje liczbę kolumn, które element powinien obejmować.

linia kolumnowa: Określa, w której kolumnie element skończy się wyświetlanie.

Przykład
Tutaj tworzymy rozpiętość elementu w dwóch kolumnach.

CSS

.jeden
Grid-kolumn-end: Span 2;

Powyższy kod stwierdza, że ​​pozycja 1 będzie obejmować dwie kolumny.

Wyjście

Pozycja 1 obejmuje dwie kolumny.

Nieruchomość z siatki

Ta właściwość służy do zdefiniowania lokalizacji i rozmiaru elementu siatki lub nadania określonej nazwy elementowi siatki, które następnie jest określane przez właściwość siatki-template-areas. Ponadto jest to krótka właściwość dla wymienionych poniżej właściwości.

1. Grid-rzędowy start
2. Grid-rzędowy
3. Grid-kolumn-start
4. Kolumn-kolumn

Składnia

Ostat Grid: Row-start / kolumna-start / Row-end / kolumna | nazwa i nazwa przedmiotu;

Wyjaśnione parametry
Grid-rzędowy start: Ta wartość stwierdza, gdzie zacząć wyświetlać element z rzędu.

Grid-kolumn-start: Stanowi, gdzie zacząć wyświetlać element w kolumnie.

Grid-rzędowy: Opisuje, gdzie przestać wyświetlać elementy z rzędu lub ile rzędów rozwiążę.

Kolumn-kolumn: Opisuje, gdzie przestać wyświetlać elementy w kolumnie lub ile kolumn obejmuje.

nazwa i nazwa przedmiotu: Ta wartość podaje nazwę elementu siatki.

Przykład
Aby zrozumieć działanie tej właściwości, rozważ następujący przykład.

.pojemnik
Wyświetlacz: siatka;
Kolecka z kradzieży Grid: Auto Auto Auto Auto;
Grid Gap: 5px;
kolor tła: Sandybrown;
Wyściółka: 10px;

.siedem
obszar siatki: 1/2 / span 3 / span 2;

Powyższy kod stwierdza, że ​​istnieją cztery kolumny o automatycznej szerokości. Tymczasem siódmy pozycja w siatce zostanie umieszczona w pierwszym rzędzie i drugiej kolumnie i rozpiętości 3 wierszy i 2 kolumny.

Wyjście

Nieruchomość została pomyślnie wdrożona.

Nieruchomość Grid-Auto-Columns

Ta właściwość zapewnia określony rozmiar do kolumn układu siatki.

Składnia

Grid-Auto-Columns: Auto | Max-Content | Min-Content | długość;

Wyjaśnione parametry
automatyczny: Ta domyślna wartość ocenia rozmiar kolumn na podstawie rozmiaru pojemnika.

Max-Content: Dostosowuje rozmiar kolumny na podstawie największej pozycji w kolumnie.

Min-content: Dostosowuje rozmiar kolumny na podstawie najmniejszej pozycji w kolumnie.

długość: Ta wartość ustawia daną wartość jako rozmiar kolumn.

Przykład
Rozważ przykład poniżej.

CSS

.jeden
obszar siatki: 1/1/2/2;

Przed skorzystaniem z tej właściwości musisz najpierw przypisać lokalizacje do każdego z elementów siatki za pomocą właściwości sieciowej. Na przykład w powyższym kodzie określiliśmy, że element 1 zostanie umieszczony na początku wiersza 1 i kolumny 1, a na końcu wiersza 2 i kolumny 2. Teraz lokalizacje reszty elementów są przypisane w podobnym wzorze.

CSS

.dwa
obszar siatki: 1/2/2/3;

.trzy
obszar siatki: 1/3/2/4;

.cztery
obszar siatki: 2/1/3/2;

.pięć
obszar siatki: 2/2 / 3/3;

.sześć
obszar siatki: 2/3 / 3/4;

Reszta elementów siatki są również przypisywane w pewnej lokalizacji za pomocą właściwości w obszarze siatki.

CSS

.pojemnik
Wyświetlacz: siatka;
Grid-Auto-Columns: 200px;
Grid Gap: 5px;
kolor tła: Sandybrown;
Wyściółka: 10px;

Teraz, korzystając z omawianej właściwości, rozmiar kolumn jest ustawiony na 200px.

Wyjście

Nieruchomość została wdrożona.

Nieruchomość Grid-Auto Rows

Ta właściwość zapewnia określony rozmiar do rzędów układu siatki.

Składnia

Grid-Auto Rows: Auto | Max-Content | Min-Content | długość;

Wyjaśnione parametry
automatyczny: Ta domyślna wartość ocenia rozmiar wierszy na podstawie wielkości kontenera.

Max-Content: Dostosowuje rozmiar wiersza na podstawie największego elementu w rzędzie.

Min-content: Dostosowuje rozmiar wiersza w oparciu o najmniejszy element w rzędzie.

długość: Ta wartość ustawia daną wartość jako rozmiar wierszy.

Przykład
Podajmy określony rozmiar rzędów w pojemniku za pomocą omawianej nieruchomości.

CSS

.jeden obszar Grid: 1/1/2/2;
.dwa obszar Grid: 1/2/2/3;
.trzy obszar Grid: 1/3/2/4;
.cztery obszar Grid: 2 / 1/3/2;
.Five Grid-Area: 2/2 / 3/3;
.Six Grid-Area: 2/3 / 3/4;
.pojemnik
Wyświetlacz: siatka;
Grid-Auto Rows: 200px;
Grid Gap: 5px;
kolor tła: Sandybrown;
Wyściółka: 10px;

Podobnie jak właściwość Grid-Auto-Columns, musimy najpierw przypisać lokalizacje do elementów siatki za pomocą właściwości sieci, a następnie za pomocą właściwości Grid-Auto Rows, rozmiar wierszy został ustawiony na 200px.

Wyjście

Każdy wiersz został pomyślnie przypisany rozmiar.

Nieruchomość Grid-Auto-Flow

Ta właściwość obsługuje sposób, w jaki automatyczne pozycje siatki zostaną umieszczone w pojemniku.

Składnia

Grid-Auto-Flow: Row | Kolumna | Gęsty | Row gęsty | Kolumna gęsta;

Wyjaśnione parametry
wiersz: Ta domyślna wartość umieszcza elementy wypełniające wszystkie wiersze.

kolumna: Wartości to umieszcza elementy wypełniające wszystkie kolumny.

gęsty: Ta wartość wypełnia przestrzenie w siatce, umieszczając przedmioty w tych przestrzeniach.

Row gęsty: Umieszcza przedmioty wypełniające wszystkie rzędy, pozostawiając otwory w siatce.

Kolumna gęsta: Umieszcza elementy wypełniające wszystkie kolumny, pozostawiając otwory w siatce.

Przykład
Załóżmy, że chcesz umieścić elementy siatki, wypełniając każdą kolumnę.

CSS

.pojemnik
Wyświetlacz: siatka;
Kolecka z kradzieży Grid: Auto Auto Auto Auto;
Rowki z kradzieżą siatki: automatyczne auto;
Grid-Auto-Flow: kolumna;
Grid Gap: 5px;
kolor tła: Sandybrown;
Wyściółka: 10px;

W powyższym kodzie, przede wszystkim utworzyliśmy cztery kolumny z automatyczną szerokością, a następnie wygenerowaliśmy dwa wiersze z automatyczną wysokością. Następnie używamy właściwości Grid-Auto-Flow do umieszczenia elementów wypełniających każdą kolumnę.

Wyjście

Nieruchomość działa poprawnie.

właściwość Grid Row

W celu zdefiniowania pozycji i wielkości elementu siatki używana jest właściwość Grid Row. Ponadto jest to właściwość skrótów dla następujących nieruchomości.

1. Grid-rzędowy start
2. Grid-rzędowy

Składnia

Grid-Row: Grid-Row-Start / Grid-Row-end;

Wyjaśnione parametry
Grid-rzędowy start: Stwierdza, w którym wierszu element zacznie się wyświetlać.

Grid-rzędowy: Określa, w którym wierszu element skończy się wyświetlenie.

Przykład
Oto przykład tej właściwości.

CSS

.dwa
Grid-Row: 1 / span 2;

W powyższym kodzie stwierdziliśmy, że pozycja 2 zostanie umieszczona w wierszu 1 i rozpiętej na 2 rzędach. Tymczasem siatka ma cztery kolumny z automatyczną szerokością.

Wyjście

Właściwość stenografii została poprawnie zaimplementowana.

Nieruchomość siatki

Aby opisać pozycję i szerokość elementu siatki, stosuje się właściwość Grid-Row. Ponadto jest to właściwość krótkoterminowa dla wymienionych tutaj nieruchomości.

1. Grid-kolumn-start
2. Kolumn-kolumn.

Składnia

Kolumna siatki: Grid-Column-Start / Grid-Column-end;

Wyjaśnione parametry
Grid-kolumn-start: Stwierdza, w której kolumnie element zacznie wyświetlać.

Kolumn-kolumn: Określa, w której kolumnie element skończy się wyświetlenie.

Przykład
Oto przykład tej właściwości.

CSS

.jeden
Kolumnalka Grid: 2 / Span 2;

Kod powyżej stwierdza, że ​​pozycja 1 zostanie umieszczona w kolumnie 2 i będzie obejmować 2 kolumny.

Wyjście

Nieruchomość działa poprawnie.

Własność gapy rowerowej

Jak sama nazwa wskazuje, właściwość Row Gap określa lukę między rzędami siatki.

Składnia

Row-Gap: Długość | Normalne | początkowe | dziedziczyć;

Wyjaśnione parametry
długość: Przedstawia lukę między wierszami.

normalna: Definiuje normalną lukę między wierszami i jest wartością domyślną.

Przykład
Zapoznaj się z poniższym przykładem, aby zrozumieć tę nieruchomość.

CSS

.pojemnik
Wyświetlacz: siatka;
Kolecki z kradzieżą gridów: automatyczne automatyczne auto;
Gapa wiersza: 60px;
kolor tła: Sandybrown;
Wyściółka: 10px;

W powyższym kodzie określiliśmy, że szczelina między każdym wierszem wyniesie 60px.

CSS

.Przedmioty> div
kolor tła: bisque;
granica: 1px Solid Black;
Wyściółka: 20px 0;
Text-Align: Center;
Rozmiar czcionki: 35px;

Ten kod jest taki sam jak powyżej z jedyną różnicą, jaką Aby odpowiednio zademonstrować pojęcie luki między wierszami, dodaliśmy granice do elementów wewnątrz siatki.

Wyjście

Różnica między wierszami została pomyślnie wdrożona.

Właściwość GAP w kolumnie

Ta właściwość podaje lukę między kolumnami siatki.

Składnia

Kolumna Gap: długość | Normalne | początkowe | dziedziczyć;

Wyjaśnione parametry
długość: Przedstawia lukę między kolumnami.

normalna: Definiuje normalną lukę między kolumnami i jest wartością domyślną.

Przykład
Dodajmy określoną lukę między kolumnami wewnątrz siatki.

CSS

.pojemnik
Wyświetlacz: siatka;
Kolecki z kradzieżą gridów: automatyczne automatyczne auto;
Gapa w kolumnie: 60px;
kolor tła: Sandybrown;
Wyściółka: 10px;

Tutaj dodaliśmy lukę 60px między każdą kolumną.

Wyjście

Dodano lukę między kolumnami.

GAP Nieruchomość

Aby określić lukę między wierszami i kolumnami jednocześnie, używana jest właściwość szczeliny. Jest to krótka właściwość dla następujących następujących.

1. Gapa w wierszach
2. luka w kolumnie

Składnia

Gap: Gap kolumny gapie wiary;

Wyjaśnione parametry
Gapa w wierszach: Dodaje lukę między wierszami.

luka w kolumnie: Dodaje lukę między kolumnami.

Przykład
Ustawmy trochę przerwy między wierszami i kolumnami jednocześnie.

CSS

.pojemnik
Wyświetlacz: siatka;
Kolecki z kradzieżą gridów: automatyczne automatyczne auto;
Gap: 65px;
kolor tła: Sandybrown;
Wyściółka: 10px;

W powyższym kodzie określiliśmy, że między każdym wierszem a każdą kolumną będzie szczelina 65px.

Wyjście

Nieruchomość działa poprawnie.

Wniosek

CSS Grid to model układu, który umożliwia łatwe rozmieszczenie elementów pojawiających się na stronie internetowej w różne wiersze i kolumny. Istnieje z tym wiele właściwości, takie jak kolumny z kradzieży siatki, rzędy z kraty, kolumna siatki, rzędu siatki, obszar siatki itp. Każda z tych właściwości służy inny cel, który wyjaśniliśmy w tym poście wraz z odpowiednimi przykładami.