Przewodnik po siatce CSS: opanowywanie układów za pomocą właściwości siatki

Pozycjonowanie elementów na stronie internetowej może być bardzo skomplikowane podczas pracy ze złożonymi układami. Tutaj z pomocą przychodzi siatka CSS. Jest to system układu zaprojektowany w celu uproszczenia procesu tworzenia złożonych układów.

Jak ci to pomaga? W przeciwieństwie do tradycyjnych metod układu, które pozwalają jedynie na rozmieszczenie elementów w wierszach lub kolumnach, siatka CSS oferuje to, co najlepsze z obu światów — podejście 2D z wykorzystaniem wierszy i kolumn.

Siatka kontenerów i przedmiotów

Możesz zastosować właściwości siatki CSS do dwóch głównych typów elementów: nadrzędnego i podrzędnego. Kiedy ustawisz właściwość display na „grid” dla elementu nadrzędnego, przekształca on ten element w kontener siatki. Każdy element podrzędny w tym kontenerze siatki staje się elementem siatki, dziedzicząc zastosowane właściwości siatki.

Oto jak to jest reprezentowane:

Element siatki może również stać się kontenerem siatki. Możesz teraz nazwać układ siatką zagnieżdżoną — siatką w siatce. Główny pojemnik siatki jest teraz nazywany siatką zewnętrzną, podczas gdy pojemnik z siatką z przedmiotami staje się siatką wewnętrzną.

Każda z tych siatek działa niezależnie od drugiej, co oznacza, że ​​właściwości ustawione dla siatki wewnętrznej nie wpływają na układ siatki zewnętrznej i odwrotnie.

Oto jak to wygląda:

Opanowanie relacji między pojemnikami siatkowymi a przedmiotami jest niezbędne budowanie dwuwymiarowych układów efektywnie.

Należy pamiętać, że istnieją właściwości siatki dla kontenerów siatki, a inne dla elementów siatki.

Linie siatki i ścieżki

Zanim zaczniesz korzystać z siatki CSS, powinieneś znać dwa kluczowe terminy:

1. Linie siatki: Linie siatki odnoszą się do linii poziomych i pionowych tworzących siatkę w układzie siatki CSS. Określają punkty początkowe i końcowe wierszy i kolumn, pomagając w organizacji miejsca w siatce. Te linie są jak krawędzie pudełek; posiadają numery ułatwiające odniesienie się do elementów podczas pozycjonowania. Tutaj przedstawia je czerwona przerywana linia:
2. Ścieżki siatki: Są to przerwy pomiędzy liniami siatki, które definiują wiersze i kolumny. Są jak elementy składowe układu siatki. Na powyższym obrazku kolorowy obszar w każdym elemencie reprezentuje ścieżkę siatki.

Pomyśl o liniach siatki i ścieżkach jako o elementach składowych układu siatki, takich jak linie na kartce papieru milimetrowego. Kiedy pozioma linia siatki przecina się z pionową linią siatki, tworzy komórkę w kształcie pudełka. Komórki te pełnią rolę pojemników, w których można umieszczać elementy siatki.

Właściwości kontenera siatki CSS

Są to właściwości, które można zastosować do kontenera siatki, aby uporządkować układ i pomóc w rozmieszczeniu elementów w nim. Jak wspomniano wcześniej, jedną z nich jest właściwość display ustawiona na grid. Oto więcej:

Szablon siatki

Ta właściwość definiuje rozmiar wierszy i kolumn. Rozmiar tych właściwości można określić za pomocą pikseli, procentów lub jednostek ułamkowych (fr). Możesz także użyć słów kluczowych, takich jak automatyczny, minimum maksimum(), I powtarzać() w celu zwiększenia elastyczności.

• wiersze szablonu siatki: Ustawia wysokość wierszy.
• kolumny szablonów siatki: Określa szerokość kolumn.

Oto kilka przykładów:

Korzystanie z pikseli:

.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}

Korzystanie z procentów:

.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}

Korzystając z ks:

.grid-container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr;
}

Używanie słów kluczowych auto i minmax().:

.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}

Używanie funkcji powtarzania () w celu zapewnienia spójnego rozmiaru:

.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}

Obszary automatycznego umieszczania i szablonów siatki

Automatyczne rozmieszczanie: Automatyczne rozmieszczanie przypomina pozwalanie siatce decydować, gdzie umieścić przedmioty. Jeśli nie określisz dokładnych pozycji, siatka automatycznie umieści elementy w kolejności, w jakiej pojawiają się w znacznikach. Jest to przydatne, gdy masz wiele elementów i chcesz, aby równomiernie wypełniały siatkę.

Obszary szablonów siatki: Pomyśl o obszarach szablonów siatki jak o tworzeniu układu przy użyciu nazwanych stref. To jak nazywanie pomieszczeń na planie piętra. Podczas pozycjonowania elementów siatki można odwoływać się do tych nazw obszarów. Na przykład:

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

Ten układ przypomina siatkę z trzema kolumnami i czterema rzędami. Główny obszar zawartości zawiera dwa wiersze. Oznaczone obszary obejmują „nagłówek”, „pasek boczny”, „treść” i „stopkę”. W następnych sekcjach dowiesz się, jak używać etykiet obszarów we właściwościach każdego elementu siatki.

Wyrównanie w siatce CSS

Możesz użyć właściwości wyrównania, aby kontrolować położenie elementów siatki w komórkach siatki. Właściwości to:

• uzasadnij-przedmioty: kontroluje poziome wyrównanie elementów w komórkach siatki.
  • Wartości: początek, koniec, środek i rozciągnięcie.
• wyrównaj-przedmioty: kontroluje pionowe wyrównanie elementów w komórkach siatki.
  • Wartości: początek, koniec, środek i rozciągnięcie.
• uzasadnij-treść: Wyrównuje całą siatkę w kontenerze wzdłuż osi poziomej.
  • Wartości: początek, koniec, środek, rozciąganie, przestrzeń pomiędzy, przestrzeń wokół i przestrzeń równomiernie.
• wyrównaj zawartość: Wyrównuje całą siatkę w kontenerze wzdłuż osi pionowej.
  • Wartości: początek, koniec, środek, rozciąganie, przestrzeń pomiędzy, przestrzeń wokół i przestrzeń równomiernie.

Oto przykład:

.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}

W tym przykładzie elementy zostaną wyśrodkowane w komórkach zarówno w poziomie, jak i w pionie. Przestrzeń zostanie równomiernie rozłożona pomiędzy kolumnami całej siatki, a siatka zostanie wyśrodkowana pionowo w kontenerze.

Przerwa w siatce

Odstęp siatki odnosi się do odstępu między wierszami i kolumnami w układzie siatki. Pomaga stworzyć wizualną separację i dodaje trochę miejsca pomiędzy elementami siatki.

The przerwa w siatce Właściwość pozwala ustawić odstęp między wierszami i kolumnami. Aby to zdefiniować, możesz użyć różnych jednostek, takich jak piksele (px), procenty (%), jednostki em (em) i inne.

.grid-container {
grid-gap: 20px;
}

W tym przykładzie kontener siatki zawiera dwie kolumny z 20-pikselowym odstępem między nimi. Odstępy te wizualnie oddzielają kolumny i poprawiają układ.

Właściwości elementu siatki CSS

Oto kilka kluczowych właściwości kontrolujących zachowanie poszczególnych elementów siatki w układzie siatki CSS, wraz z przykładami:

początek wiersza siatki i koniec wiersza siatki:

• Definiuje początkowe i końcowe linie wierszy elementu.
• Wartościami mogą być numery linii, „span n” lub „auto”.

.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

Ten kod umieszcza Siatka Element 1 od linii drugiego rzędu do linii czwartego rzędu.

początek-kolumny siatki i koniec kolumny siatki:

• Definiuje początkowe i końcowe linie kolumn dla elementu.
• Wartościami mogą być numery linii, „span n” lub „auto”.

.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

Ten kod umieszcza Element siatki 2 od pierwszego wiersza kolumny do trzeciego wiersza kolumny.

obszar siatki:

• Określa rozmiar i położenie elementu siatki w siatce poprzez odniesienie do nazwanych linii siatki obszary szablonów siatki.
• Jak wspomniano wcześniej, predefiniowane nazwy obszarów są już używane w programie obszary szablonów siatki nieruchomość. Oto przykład użycia go razem z obszar siatki.

.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}

Oto wynik:

usprawiedliwiać się:

• Wyrównuje poszczególne elementy w komórce w poziomie.
• Wartościami mogą być początek, koniec, środek i rozciągnięcie.

.grid-item-5 {
justify-self: center;
}

Ten kod centruje poziomo Siatka Pozycja 5 w swojej komórce.

wyrównać się:

• Wyrównaj poszczególne elementy w pionie w komórce.
• Wartościami mogą być początek, koniec, środek i rozciągnięcie.

.grid-item-1 {
align-self: end;
}

Ten kod się zgadza Siatka Element 1 na dno swojej komórki.

Możesz swobodnie łączyć i dostosowywać te właściwości, aby utworzyć układ i wygląd, jaki chcesz dla każdego elementu siatki w siatce CSS.

Tworzenie responsywnych układów za pomocą siatek CSS

Używanie siatek CSS do tworzenie responsywnych układów ważne jest, aby Twoja strona internetowa bezproblemowo dopasowywała się do różnych rozmiarów ekranów i urządzeń. Możesz zastosować następujące metody:

• Zapytania o media: Możesz używać zapytań o media aby zastosować różne układy siatki w zależności od rozmiarów ekranu. Na przykład może zaistnieć potrzeba zmiany układu elementów siatki lub dostosowania szerokości kolumn w przypadku mniejszych ekranów.
• Elastyczne jednostki: Użyj jednostek względnych, takich jak procenty i fr, aby umożliwić proporcjonalne dostosowanie elementów siatki i kolumn do dostępnej przestrzeni.
• minimum maksimum(): Użyj minimum maksimum() funkcja określająca zakres rozmiarów kolumn lub wierszy siatki. Zapewnia to, że elementy nie będą wyświetlane na różnych ekranach jako zbyt małe lub zbyt duże.

Pamiętaj o dostosowaniu kolumn i innych elementów, takich jak odstępy między elementami siatki, rozmiary czcionek i marginesy. Zapewnia spójny i dobrze zaprojektowany układ, który działa dobrze na różnych urządzeniach.

Poznaj możliwości układu siatki CSS

Wykorzystanie elastyczności i mocy siatki CSS umożliwi Ci tworzenie układów, które nie tylko świetnie wyglądają, ale także płynnie dostosowują się do wymagań nowoczesnego projektowania stron internetowych. Zatem zanurz się w świat gridów, odkryj możliwości i podnieś swoje umiejętności tworzenia stron internetowych.

Gdy zagłębisz się w systemy układów, możesz chcieć porównać inne metody układu z siatkami CSS. Można to zrobić za pomocą modułu CSS Flexbox. Dzięki temu nauczysz się podejmować decyzje podczas pracy nad projektem.