Elementy siatki w CSS | Wyjaśnione

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 użycia właściwości pozycji i pływających. Ma dwa komponenty, pojemnik i przedmioty. Jednak w tym poście podkreślymy, czym jest element siatki i różne powiązane z nim właściwości.

Co to jest element 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.

Istnieje wiele właściwości związanych z elementem siatki, która określa jej cechy. Wyjaśniliśmy te właściwości poniżej.

Właściwości elementów siatki

Właściwości połączone z elementem siatki są szczegółowo wyjaśnione poniżej.

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
Załóżmy, że chcesz umieścić konkretny element w pierwszym rzędzie pojemnika.

Html

1
2
3
4
5
6

Aby wygenerować pojemnik na siatkę, utworzyliśmy element div o klasie „elementy kontenera” i umieścić niektóre elementy siatki w tym pojemniku, zagnieżdżliśmy sześć elementów Div wewnątrz kominka siatki, każdy o innej klasie.

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 przypisując większy wyświetlacz DIV A Grid, aby uczynić go kontenerem siatkowym, a następnie określamy, że w siatce znajdują się trzy kolumny o szerokości 200px i ma szczelinę 5px. Pojemnik otrzymał również kolor tła i wyściółkę. Na koniec stwierdzamy, że trzeci element zostanie wyświetlony na początku rzędu 1.

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

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

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

.jeden
Grid-kolumn-start: 2;

W powyższym kodzie stworzyliśmy cztery kolumny z szerokością 200px, a następnie przy użyciu właściwości Grid-Column-Start 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
Zróbmy rozpiętość przedmiotu na 2 rzędach.

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

.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 zakończy wyświetlanie.

Przykład
Zróbmy element 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.

właściwość Grid Row

W celu zdefiniowania lokalizacji i wielkości elementu siatki używana jest właściwość Grid-Row. Ponadto jest to właściwość skrótów dla wymienionych poniżej właściwoś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 zakończy się pokazując.

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

CSS

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

.dwa
Grid-Row: 1 / span 2;

W powyższym kodzie stwierdziliśmy, że pozycja 2 zostanie umieszczona w wierszu 1 i będzie rozprzestrzeniła się w 2 wierszach. 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 zakończy się pokazując.

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.

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: 2/1 / span 2 / span 3;

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

Wyjście

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

Wniosek

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. Aby przypisać różne cechy do elementu siatki, istnieje z nim wiele właściwości, takie jak Grid-Row, Grid-Column, Grid Area itp. Ten przewodnik uczy, czym jest element siatki i jak możesz sprawić, by te elementy zachowały się w określony sposób, korzystając z powiązanych właściwości wraz z odpowiednimi przykładami.