CSS zapewnia model układu siatki, który pomaga nam podzielić stronę na różne regiony i pozwala nam dynamicznie wyrównać elementy do wierszy i kolumn. Ten model ma dwa podstawowe elementy, i.mi. pojemnik na siatkę i elementy siatki. W szczególności, jeśli mówimy o elementach siatki, dostępnych jest wiele nieruchomości, które mogą służyć różnym celom.

Ten zapis przedstawi dokładny przegląd właściwości elementów siatki CSS i zostanie on zorganizowany w następujący sposób:

• Jakie są elementy siatki?
• Właściwości elementów siatki w CSS
• Składnia właściwości elementów siatki CSS
• Jak używać właściwości elementów siatki

Więc zacznijmy!

Jakie są elementy siatki?

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

Właściwości elementów siatki w CSS

CSS zapewnia liczne właściwości do pracy z przedmiotami CSS. 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, która jest używana do osiągnięcia funkcjonalności start-rzędu siatki 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.

Składnia

Podany poniżej fragment pomoże ci zrozumieć podstawową składnię właściwości elementu siatki:

Nazwa właściwości: wartość (y);

Po nazwie właściwości nastąpi okrężnica „:”, a następnie wartości zostaną określone po drugiej stronie okrężnicy, a wartości te zdecydują, jaką funkcjonalność zostanie wykonana przez element siatki.

Jak używać właściwości elementów siatki

Na razie mamy podstawowe zrozumienie właściwości elementów siatki, teraz poruszamy się o krok dalej i wdrażamy wyżej opisane właściwości praktycznie.

Przykład

Załóżmy, że mamy dwa wiersze i cztery kolumny i mamy w sumie sześć elementów siatki. Teraz określamy pierwsze cztery elementy w pierwszym rzędzie i dwa ostatnie elementy w drugim rzędzie:

Model układu siatki

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

Z powyższego fragmentu możemy zauważyć, że w znaczniku ciała mamy element macierzystego i sześć elementów dziecięcych. W znaczniku głównym określiliśmy styl dla elementów dla rodziców i dzieci. Ponadto, ponieważ chcemy zaimplementować określony styl na imienie Class5 i Item-Class6, więc zaprojektowaliśmy je osobno:

Wyjście weryfikuje działanie właściwości kolumny siatki i właściwości rzędu siatki.

Podobnie możemy wykorzystać pozostałe właściwości elementu siatki w zależności od naszych potrzeb.

Wniosek

Elementy w pojemniku siatki CSS są znane jako elementy siatki lub elementy dziecięce. CSS zapewnia liczne właściwości do pracy z elementami siatki CSS, takimi jak start-kolumn siatki, start-start-rzędowy określa lokalizację początkową elementu, Justify-Self, właściwości Align-Isfel, wyrównuje element siatki w komórce wzdłuż osi wiersza/wbudowanego , odpowiednio osi kolumny/bloku. Podobnie istnieje o wiele więcej właściwości elementów siatki CSS, które można wykorzystać do obsługi różnych funkcji.