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

CSS zapewnia model układu siatki, który umożliwia utworzenie dwuwymiarowego układu na stronie internetowej. Dwuwymiarowe zachowanie siatki CSS umożliwia wyrównanie elementów siatki w rzędach i kolumnach. Właściwości kontenerów siatki CSS można wykorzystać do osiągnięcia różnych funkcji, takich jak wyrównanie treści, wyrównanie pozycji itp.

W tym artykule zawiera kompleksowy przewodnik dla kontenera sieciowego i pod tym względem obejmie następujące fundamentalne koncepcje kontenera siatki:

• Co to jest pojemnik na siatkę w CSS
• Właściwość wyświetlania
• Właściwości kontenera siatki w CSS
• Jak korzystać z właściwości pojemnika w siatce w CSS

Więc zacznijmy!

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.

Właściwość wyświetlania

Aby utworzyć pojemnik na siatkę, musimy wykorzystać właściwość wyświetlania i ustawić jej wartość jako sieć inline lub siatkę. Poniższy fragment pokazuje podstawową składnię właściwości wyświetlania:

Wyświetlacz: wartość;

Przykład 1

W poniższym fragmencie kodu utworzymy kontener sieciowy, a w kontenerze zadeklarujemy pięć elementów dziecięcych:

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

Odpowiednie klasę stylów dla pojemników z siatką i elementy siatki będą takie:

Powyższy fragment kodu wyświetli następujące dane wyjściowe:

Wyjście weryfikuje, że zarówno kontener siatki, jak i elementy siatki są stylizowane zgodnie z ich klasami stylu.

Właściwości kontenera siatki w CSS

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

Nieruchomości	Opis
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. Tack-size, 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	Właściwości te są używane do określania rozmiaru szczeliny odpowiednio między kolumnami siatki a 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 właściwości wyrównanych i uzasadnionych, które ustalają oba w jednej 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	Jest to właściwość skrótów dla wielu właściwości siatki (i.mi. Rowki z kratą, kolumny z kratami, rakiem kratowe, rzędy, rzędy, grid-auto-kolumnami i Grid-Auto-Flow).

Jak korzystać z właściwości pojemnika w siatce w CSS

Teraz praktycznie wdrożymy niektóre z wyżej opisanych nieruchomości, aby uzyskać głębokie zrozumienie.

Właściwości Rows-Template-Columns-Template-Columns

Właściwości te mogą przyjmować wiele wartości rozdzielanych przez przestrzeń, takich jak auto, procent itp.

Zmodyfikujmy trochę przykład1; W poniższym przykładzie cały kod pozostanie taki sam, z wyjątkiem właściwości z kratą-tablonem.

Przykład 2

W tym przykładzie dodamy właściwość Grid-Template-Columns, aby określić rozmiar kolumn naszego wyboru:

Kolecka z kradzieży siatki: 1FR Auto Auto;

Z powyższego fragmentu możemy zauważyć, że szerokość pierwszej kolumny jest „1FR” a szerokość pozostałych dwóch kolumn to "automatyczny".

Dlatego szerokość pierwszej kolumny będzie różni się od pozostałych dwóch kolumn:

Podobnie możemy użyć Rowki z kratą siatki właściwość do określania wielkości wierszy.

Własność wyrównana

Aby wyrównać siatkę wzdłuż osi pionowej/bloku lub kolumn, możemy użyć właściwości wyrównanej i może wymagać różnych wartości, aby wykonywać różne funkcje, takie jak „Center”, „Start”, „End”, „Rem nawet przestrzeń”, itp.

Przykład 3

W tym przykładzie wykorzystamy właściwość wyrównania i ustawimy jej wartość jako „koniec”, aby ustawić/wyrównać wiersze na końcu kontenera. Poniższy fragment kodu pokazuje kod dla klasy kontenera, podczas gdy klasa Item i kod HTML pozostaną takie same jak w poprzednich przykładach:

.klasa kontenera
Wyświetlacz: siatka;
Kolecki z kradzieżą gridów: automatyczne automatyczne auto;
Wysokość: 300px;
Align-Content: End;
kolor tła: zielony;
Wyściółka: 10px;

Właściwość wyrównania, wywiera następujący wpływ, gdy jej wartość zostanie ustalona jako "koniec":

Wyjście uwierzytelnia działanie właściwości wyrównanej.

Podobnie możemy zaimplementować resztę właściwości kontenera siatki, aby skorzystać z różnych funkcji w zależności od naszego pragnienia i potrzeb.

Wniosek

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ę. Ponadto w CSS dostępna jest szeroka gama właściwości siatki do projektowania stron internetowych, takich jak wyrównane elementy uzgodnienia, justify-content, Align-Content, Grid-Auto-Flow, Grid i tak dalej. Ten zapis wyjaśnił różne aspekty właściwości kontenera siatki i praktycznie je wdrożył.