Pojemnik na siatkę w CSS | Wyjaśnione

Siatka CSS jest uważana za model układu, który dzieli stronę internetową w różnych wierszach i kolumnach, aby ułożyć elementy. Te rzędy i kolumny pomagają w łatwym dostosowaniu elementów, a nie przy użyciu właściwości pozycji i pływaka. Siatka pozycjonuje elementy w odniesieniu do strony internetowej lub innych elementów obecnych na stronie internetowej. Składa się z różnych komponentów, takich jak pojemniki z siatką i elementy siatki. Jednak w tym poście omówimy pojemnik na siatkę.

Co to jest 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świetlania na siatkę lub sieć inline.

Możesz zrobić pojemnik na siatkę zachowywać się w określony sposób, wykorzystując powiązane z nim właściwości CSS. Te właściwości są omówione poniżej.

Właściwości kontenera siatki

Właściwości połączone z pojemnikiem siatkowym opisano szczegółowo poniżej.

Nieruchomość z kradzieży

Pojemnik z siatką jest podzielony na wiele kolumn z określonymi rozmiarami, aby określić 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ść: Ta wartość ustawia daną wartość jako szerokość kolumn.

Przykład
Załóżmy, że chcesz stworzyć cztery kolumny o określonej długości, a następnie postępuj zgodnie z poniższym kodem.

Html

1
2
3
4
5
6
7
8

W celu stworzenia systemu siatki stworzyliśmy element DIV z klasą „elementy kontenerowego”, który działa jako kontener siatki, w międzyczasie inne elementy Div są zagnieżdżone w nim elementy siatki.

CSS

.pojemnik
Wyświetlacz: siatka;
Kolecka-tablonów Grid: 50px Auto 70px Auto;
Grid Gap: 5px;
kolor tła: Sandybrown;
Wyściółka: 10px;

Tutaj utworzyliśmy cztery kolumny o szerokości określonej w powyższym kodzie i mają szczelinę wynoszącą 5px. Tymczasem Divowi przypisano piaszczysty brązowy kolor i wyściółkę 10px.

CSS

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

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

Wyjście

Nieruchomość działa poprawnie.

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ść: Ta wartość ustawia daną wartość jako wysokość wierszy.

Przykład
Tutaj zademonstrujemy, jak tworzyć rzędy o określonej wysokości.

Html

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

Tutaj tworzymy dwa rzędy mają wysokość określoną w powyższym kodzie. Utworzyliśmy również cztery kolumny o szerokości automatycznej.

Wyjście

Rzędy zostały pomyślnie wygenerowane.

Justify-Content Proper

W celu wyrównania całej siatki w poziomie pojemnika używana jest właściwość uzasadnienia. Pamiętaj, że aby ta nieruchomość działała, całkowita szerokość siatki powinna być niższa niż w pojemniku.

Składnia

Justify-Content: Start | koniec | Centrum | przestrzeń między | przestrzeń | Space-nawet | rozciągnij | początkowe | dziedziczyć;

Wyjaśnione parametry
start: pozycjonuje siatkę na początku pojemnika i jest wartością domyślną.

koniec: To umieszcza siatkę na ostatnim pojemniku.

Centrum: To pozycja siatki na środku pojemnika.

przestrzeń pomiędzy: Dodaje równą ilość miejsca między kolumnami.

kosmiczny: Dodaje równe miejsce wokół kolumn.

przestrzeń-nawet: To dodaje równe miejsce wokół i między kolumnami.

rozciągać się: Zmienia rozmiar elementów, umożliwiając siatkę na pokrycie pełnej szerokości pojemnika.

Przykład
Załóżmy, że chcesz dodać przestrzeń między kolumnami wewnątrz pojemnika na siatkę.

CSS

.pojemnik
Wyświetlacz: siatka;
Justify-Content: Space-Between;
Kolecka z kratami: 40px 40px 40px;
Grid Gap: 5px;
kolor tła: Sandybrown;
Wyściółka: 10px;

W powyższym kodzie, aby siatka była mniejsza niż pojemnik, tworzymy trzy kolumny 40px każda i do dodania miejsca między tymi kolumnami używamy wartości pomiędzy wartością właściwości justify-content.

Wyjście

Między kolumnami dodano miejsce.

Własność wyrównana

W celu wyrównania całej siatki w pojemniku pionowo używana jest właściwość wyrównana. Pamiętaj, że aby ta nieruchomość działała, całkowita wysokość siatki powinna być niższa niż w pojemniku.

Składnia

Align-Content: Start | koniec | Centrum | przestrzeń między | przestrzeń | Space-nawet | rozciągnij | początkowe | dziedziczyć;

Wyjaśnione parametry
początek: Umieszcza wiersze na początku kontenera i jest wartością domyślną.

koniec: To pozycjonuje wiersze na końcu pojemnika.

Centrum: To pozycja siatki na środku pojemnika.

przestrzeń pomiędzy: Dodaje równą ilość miejsca między wierszami.

kosmiczny: Dodaje równe miejsce wokół rzędów.

przestrzeń-nawet: To dodaje równe miejsce wokół i między wierszami.

rozciągać się: Zmienia rozmiar elementów, umożliwiając siatkę na pokrycie pełnej wysokości pojemnika.

Przykład
Załóżmy, że chcesz dodać przestrzeń między rzędami wewnątrz pojemnika.

CSS

.pojemnik
Wyświetlacz: siatka;
Wysokość: 350px;
Align-Content: Space-Between;
Kolecki z kradzieżą gridów: automatyczne automatyczne auto;
Grid Gap: 5px;
kolor tła: Sandybrown;
Wyściółka: 10px;

Aby dodać przestrzeń między wierszami, przede wszystkim zapewniamy pewną wysokość do siatki, a następnie wykorzystujemy przestrzeń między wartością wyrównanej właściwości, dodajemy przestrzeń między wierszami. Ponadto utworzyliśmy trzy kolumny z automatyczną szerokością.

Wyjście

Między wierszami dodano przestrzeń.

Wniosek

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 pojemnika z siatką wyświetla go jako siatkę lub sieć. Pojemnik siatki może osiągnąć pewne cechy poprzez użycie niektórych powiązanych z nim właściwości CSS, takich jak justify-content, kolumny z kratami, wyrównane i rzędne rows-content i rows. Każda z tych właściwości została wyjaśniona w artykule wraz z odpowiednimi przykładami.