Siatka CSS - wielki przewodnik do nauki układów siatki CSS

10 Min.
Układy siatki CSS - Kompletny przewodnik do nauki siatki CSS

Flexbox powinien być już wszystkim znany i niejednemu programiście dał już spokojną noc. Ale co jeśli mógłbyś rozszerzyć swój układ Flexbox nie tylko w pionie, ale także w poziomie? To i więcej jest możliwe dzięki integracji CSS Grid.

Wyobraź sobie, że istnieje możliwość dowolnego zaprojektowania swojej strony w dwuwymiarowej siatce. Na przykład poprzez tworzenie bloków tekstowych, które częściowo nakładają się na obrazy. Lub nawet bardziej złożone galerie obrazów bez ujemnego marginesu lub pozycjonowania. Lub, z pomocą CSS, możesz szybko zaprojektować szablony stron, które są również responsywne. Istnieje rozwiązanie dla tego wszystkiego: CSS Grid.

Czym jest siatka CSS?

Podobnie jak Flexbox, CSS Grid jest również zintegrowany z pomocą elementu kontenera i elementów CSS Grid. Dla przykładu, znajdziemy również kilka właściwości do pozycjonowania Flexboxa: align-items, justify items, justify self oraz align-self. Pomagają one w odpowiednim rozmieszczeniu zawartości siatki.

Z grubsza rzecz biorąc, CSS Grid jest flexboxem, który działa dwuwymiarowo:

What-Is-CSS-Grid
Jak działa system siatki w Bootstrapie

Podczas gdy we Flexboxie możemy budować wiersze i odpowiadające im kolumny tylko w poziomie, CSS Grid daje nam możliwość układania ich również w pionie:

Układ siatki CSS
CSS Grid jest potężnym narzędziem do tworzenia dwuwymiarowych układów na stronach internetowych.

Na pierwszy rzut oka, CSS Grid może wydawać się stosunkowo mało spektakularny. Przecież ten sam efekt można osiągnąć za pomocą wierszy i kolumn.

Co sprawia, że CSS Grid jest tak wyjątkowy?

Dzięki nowemu systemowi siatki można budować wszystkie możliwe kombinacje. Jedynym warunkiem jest to, że muszą być one prostokątne. Na przykład, nie można skonstruować czystych kształtów L.

W ten sposób możesz zaplanować i zbudować cały układ strony w oparciu o CSS Grid. Zagnieżdżone siatki są tak samo możliwe jak połączenie CSS Grid i Flexbox.

Dzięki sprytnemu planowaniu, możesz teraz również zaprogramować swoje układy w taki sposób, że możesz obejść się bez zapytań o media tak dalece, jak to możliwe, ale oczywiście nie musisz. Bardziej szczegółowo omówię różne możliwości później.

CSS Grid zawiera również wiele innych nowych sztuczek CSS, które ułatwią ci życie w przyszłości. Jedną z nich jest nowa jednostka CSS: tak zwana frakcja (fr). Działa to podobnie jak podział wielkości elementów flexbox. 

Ułamek (1fr) jest częścią całego rzędu. Więc jeśli podzielisz swoją siatkę na 3×4 jak w poniższym przykładzie z CSS Tricks, wtedy 1fr = ¼ lub 25%.

Pojawia się tu również inna cecha szczególna: Nie wszystkie boksy muszą być wypełnione treścią. Możesz również przypisać pustą zawartość w siatce CSS:

Siatka CSS Pusta przestrzeń
Pusta zawartość w siatce CSS

W3Schools pokazuje inne możliwe układy, dla których siatki CSS są odpowiednie. W ten sposób możemy łatwo określić, że pewne elementy powinny być rozłożone w poziomie i w pionie na określoną liczbę pól. Ramki mogą mieć różną szerokość (kolumny) i wysokość (wiersze).

Siatka CSS Najlepsze układy
Układy w siatce CSS

W powyższym przykładzie pierwsza kolumna zajmuje procentowo większą szerokość niż pozostałe. Dzieje się tak, ponieważ szerokość nie została wstępnie zdefiniowana w CSS i dlatego jest automatycznie zorientowana na treść. To samo stałoby się, gdybyśmy stworzyli więcej treści niż zdefiniowaliśmy w CSS. Wtedy siatka automatycznie powiększy się i dołączy nową zawartość.

Światy zakupów Shopware oparte na systemie CSS Grid - przynajmniej w widoku backendowym. W ich edytorze WYSIWYG, treść może być wyświetlana w siatce, która na pierwszy rzut oka wygląda bardzo podobnie do siatki CSS. Na skompilowanej stronie nie jest jednak używany żaden CSS Grid, przynajmniej domyślnie.

Najlepsze praktyki dotyczące siatki CSS
Przebudowana strona startowa Shopware w Projektancie Światów Zakupów

Od 2017 roku CSS Grid jest obsługiwany przez prawie wszystkie popularne przeglądarki. Tylko wersje Internet Explorera od 10 wymagają jeszcze przedrostka -ms-, aby móc wyświetlić siatkę CSS prawie w całości. Z kolei Microsoft Edge posiada już pełną integrację. Teraz już nic nie stoi na przeszkodzie, abyś użył CSS Grid w swoich przyszłych projektach:

Definiowanie siatki CSS
Które przeglądarki obsługują siatkę CSS

Jak wygląda CSS Grid w praktyce?

Jak już wspomniano, funkcję basic wykorzystujemy w podobny sposób jak flexbox. Najpierw określamy kontener, do którego przypiszemy funkcje siatki.

.container {
		display: grid;}

Istnieje wiele innych wartości, które można przypisać, aby zbudować siatkę zgodnie z własnymi życzeniami:

grid-template-columns, grid-template-rows i grid-template-areas (zbiorczo, wszystkie one mogą być również ustawione za pomocą grid-template ). Właściwości te zawierają informacje o ilości i wielkości wierszy i kolumn. Można również zdefiniować odległości między nimi za pomocą właściwości column-gap i row-gap (w skrócie gap).

Masz również możliwość - podobnie jak w przypadku flexbox - określić ogólne pozycjonowanie w obrębie siatki. Do tego celu służą właściwości: justify-items, align-items (w skrócie: place-items), justify-content, align-content (w skrócie: place-content).

Za pomocą właściwości grid-auto-flow można również określić, w którym kierunku powinna płynąć siatka z wartościami wiersz, kolumna lub gęstość. Podczas gdy wiersz i kolumna zajmują się odpowiednio wyrównaniem poziomym i pionowym, gęstość określa, że siatka jest wypełniona ekonomicznie. Oznacza to, że przy tej wartości, układ elementów w siatce może się zmienić w pewnych okolicznościach, aby wypełnić pustą przestrzeń. Jest to szczególnie interesująca funkcja dla galerii zdjęć. W ten sposób elementy przesuwają się w razie potrzeby w górę w różnych rozmiarach ekranu i nie powstają żadne wizualne luki.

Podczas gdy definiujesz kolumny i wiersze w kontenerze, a także odległości między nimi, używasz elementów siatki, aby określić, gdzie dokładnie powinny się one znajdować w siatce. 

Gotowa siatka mogłaby wyglądać tak po stronie CSS:

.container {
		display: grid;
grid-template-columns: 40px 1fr 1fr 1fr 40px;
grid-template-rows: 25% 100px auto;
gap: .5rem .8rem
justify-items: stretch;}

Teraz, gdy już utworzyłeś swój kontener siatki, nadszedł czas, aby wypełnić go elementami siatki. Szczególną rzeczą w systemie siatki CSS jest to, że układ w HTML może być drugorzędny, ponieważ możesz nadać każdemu elementowi współrzędną początkową i końcową. Odbywa się to za pomocą grid-column-start, grid-column-end, grid-row-start, grid -row-end.

Współrzędne wskazują na linie siatki i liczone są od lewej do prawej, lub z góry na dół. Mogą być one również skracane jako kolumna siatki lub grid-row. 

Zaawansowani użytkownicy mogą również użyć grid-area , aby nadać tym polom wszystkie współrzędne naraz lub przypisać nazwę do elementu siatki, którego położenie można następnie określić w kontenerze siatki. Ale możesz nie tylko nadawać nazwy elementom siatki. Możliwe jest również przypisanie nazw do linii siatki, dzięki czemu można przekazać elementom siatki ich współrzędne za pomocą tych nazw. Oszczędza to konieczności liczenia przez siatkę.

Również stosowanie wartości ujemnych, lub liczenie od lewej do prawej, od dołu do góry są możliwe. Są one jednak bardziej interesujące dla zaawansowanych użytkowników CSS Grid i można o nich szczegółowo przeczytać tutaj:

Wreszcie, masz również możliwość indywidualnego określenia położenia zawartości w obrębie elementów siatki. Odbywa się to za pomocą właściwości: justify-self i align-self (w skrócie: place-self).

Element siatki w CSS może wyglądać tak:

.item-a {
		grid-column-start: 1;
  		grid-column-end: span 4;
  		grid-row-start: 2;
  		grid-row-end: span 2;
align-self: center;}

Zakończenie wiersza siatki i zakończenie kolumny siatki można również zastosować przy pomocy "span +n". Tutaj oszczędzasz sobie żmudnego liczenia linii. "Span 2" mówi elementowi, że powinien rozciągać się na dwa pola siatki. Szczegółowe objaśnienia poszczególnych właściwości można znaleźć w przewodniku Sztuczki CSS.

Przykłady z sieci

Jeśli jesteś wzrokowcem jak ja, musisz zobaczyć kilka przykładów z życia wziętych, aby w pełni zrozumieć CSS Grid. Aby to zrobić, trochę poszperałem w internecie w poszukiwaniu stron, które albo zostały stworzone z użyciem CSS Grid, albo które mogłyby skorzystać z jego użycia.

Siatka CSS w praktyce
Siatka CSS do tworzenia portfolio

Levon Biss użył CSS Grid jako narzędzia implementacyjnego do stworzenia swojego portfolio. Jeśli przyjrzysz się bliżej jego stronie za pomocą narzędzia do badania, zauważysz, że strona została zbudowana z zagnieżdżonych systemów siatki. Po pierwsze, strona została podzielona na trzy części: Header, Main i Footer. Wysokość dla nagłówka i stopki została predefiniowana, natomiast część główna z wartością "auto" może elastycznie rosnąć wraz z treścią. Kolumny zostały ustawione z 1fr na całą dostępną szerokość.

.page-wrap {
   height: 100%;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 96px auto 72px;
}

Główna część jego strony została ponownie zapakowana w system siatki. Zauważ, że jednostki CSS px i fr zostały tutaj pomieszane. W ten sposób obramowanie ma stałą szerokość 144px każde, podczas gdy środkowa część pozostaje elastyczna.

.gallery-wrap{
   display: grid;
   grid-template-columns: 144px 1fr 144px;
   grid-template-rows: 1fr;
   height: 100%;
}

Na koniec galeria została jeszcze raz zagnieżdżona. Wcześniej nie podawano wartości dla przerw w siatce. Dla galerii zostały one teraz ustawione na 1em. Pozwala to zaoszczędzić dodawanie marginesów pomiędzy obrazami. Można więc ustawić odstępy raz w dokumencie. 

.grid {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   grid-gap: 1em;
}

Kolejną specjalną cechą CSS Grid jest funkcja repeat(). Jest to skrócona notacja powtarzających się wartości. 

Repeat() przyjmuje zestaw wartości do utworzenia jako pierwszą wartość oraz rozmiar jako drugą wartość. Na piśmie wyglądałoby to tak:

.grid {
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
Siatka CSS w praktyce
Przykładowa strona bez siatki CSS

W tym przykładzie nie została użyta siatka CSS. Tak jak w poprzednim przykładzie, mogliśmy zagnieździć siatkę lub dodać margines do kontenera siatki dla zewnętrznego odstępu.

Tak mógłby wyglądać podział na siatki: 

Układ siatki CSS
Przykładowa strona z siatką CSS

Możliwe podejście do CSS może wyglądać następująco:

.container {
  margin: 0.5em 3em;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px 80px auto;
	gap: .5rem;
}

.logo {
  grid-area: 1 / 1 / 2 / span 3;
  justify-self: start;
}
.nav {
  grid-area: 1 / 4 / 2 / span 3;
  justify-self: end;
}
.header {
  grid-area: 2 / 1 / 3 / span 6;
  justify-self: center;
}
.logo,
.nav,
.header {
  	align-self: center;
}
.img {
  grid-column: span 2;
  grid-row: span 2;
}
.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
Układ siatki CSS
Ta strona mogłaby również skorzystać z CSS Grid

Chociaż cała strona Larq mogłaby skorzystać z siatki CSS, wybrałem tylko mały obszar dla celów ilustracyjnych. To właśnie w tym miejscu przewaga dwuwymiarowej siatki staje się bardzo wyraźna.

Tak mogłoby wyglądać rozmieszczenie elementów siatki:

Siatka CSS Elementy siatki
Siatka CSS na przykładowej stronie

Możliwe podejście do CSS może wyglądać następująco:

.container {
  margin: 0.5em 5em;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 50px repeat(3, 1fr);
  grid-template-rows: 3rem 20px 100px 100px;
  gap: 1rem;
}

.heading {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 2;
  grid-row-end: 1;
  justify-self: center;
}
.img-a {
  grid-area: 3 / 1 / span 2 / span 1;
}
.img-b {
  grid-area: 3 / 2 / span 1 / span 1;
}
.img-c {
  grid-area: 4 / 2 / span 1 / span 1;
}
.textblock {
  grid-area: -3 / -4 / span 2 / span 2;
  align-self: center;
}

Jak można połączyć CSS Grid i WordPress ?

Dzięki nowemu edytorowi WordPress , zawartość może być teraz domyślnie wyświetlana w wierszach i kolumnach. Jednak układ przypomina mi bardziej Bootstrapa i co. i trochę brakuje mi dwuwymiarowości. Prawdopodobnie inni też tak myśleli i dlatego stworzyli Plugin Grids: Layout builder for WordPress . Plugin jest darmowy i robi dokładnie to, co obiecuje: pozwala na wizualne tworzenie siatek CSS bez dodatku page buildera.

CSS Grid Shopify
Plugin Grids: Layout builder dla WordPress w użyciu

Szczególną cechą CSS Grid jest możliwość nakładania na siebie elementów bez konieczności stosowania ujemnego marginesu lub pozycjonowania bezwzględnego. To właśnie jest możliwe dzięki Plugin . Za pomocą z-index, a także poprzez ułożenie w samej siatce (ostatni element jest na górze, pierwszy na dole) można wyświetlać hierarchie.

Powyższy przykład mógłby wyglądać tak, jak na stronie internetowej:

Jak używać siatki CSS
Siatka CSS jako praktyczny przykład

Siatka CSS i zapytanie @media

CSS Grid może być oczywiście używany swobodnie z Flexbox i Media Query. Jednakże, jest jeszcze jedna nowa funkcja, którą CSS Grid przynosi ze sobą: minmax()

Jak sama nazwa wskazuje, chodzi tu o wartości minimalne i maksymalne. Można to wykorzystać w połączeniu z kolumnami. W przeciwieństwie do Media Query, tutaj nie jest to rozmiar ekranu, który jest zapytany, ale rozmiar elementu. Jeśli pudełko skurczy się tak bardzo, że spadnie poniżej minimalnego rozmiaru, elementy powiększają się i przesuwają, aby ponownie się zmieścić.

Minmax() działa w połączeniu z autodopasowaniem i może wyglądać tak:

.grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

Tworzone są tu kolumny, które mają minimalny rozmiar 240px, a maksymalny 1fr. W tym przykładzie 1fr odpowiada całej szerokości siatki. Dzięki temu kilka elementów siatki może znajdować się obok siebie, jeśli jest na to miejsce, ale jeśli nie ma wystarczająco dużo miejsca, należy użyć całej szerokości.

Ale są też zalety związane z zapytaniem o media. Za pomocą współrzędnych można umieszczać i układać elementy siatki w różny sposób dla każdego urządzenia. Szczególnie na urządzeniach mobilnych, gdzie może panować inna hierarchia niż na desktopie, może to zapewnić przyjemne doświadczenie użytkownika.

Wszystkie funkcje specjalne w skrócie

  • FR (frakcja) jako nowa jednostka CSS
  • Obszarom i liniom siatki można nadawać nazwy
  • Siatka-kolumna-koniec, może być używana z "span n
  • Deklaruj te same kolumny lub wiersze za pomocą repeat()
  • Elementy siatki można rozmieszczać dowolnie (również na zakładkę) w siatce

Dalsze źródła informacji na ten temat

  • Kompletny przewodnik po CSS Grid by CSS Tricks
  • Przewodnik do nauki CSS Grid od Learn CSS Grid
  • Wszystko, czego potrzebujesz, aby nauczyć się siatki CSS od Siatka po przykładzie
  • Sprawdź swoje umiejętności: Układ siatki z MDN Web Docs
  • Naucz się wszystkich funkcji CSS Grid przez zabawę z Ogrodem CSS Grid.
Czy masz jeszcze jakieś pytania?

Jakie masz pytania dotyczące CSS Grid? Czekamy na Państwa komentarze. Interesujesz się projektowaniem, tworzeniem stron internetowych i innymi tematami związanymi z WordPress ? Następnie śledź RAIDBOXES na Twitterze, Facebooku, LinkedIn lub poprzez nasz newsletter.

Po ukończeniu studiów z zakresu projektowania gier i twórczego pisania w malowniczym Auckland (w Nowej Zelandii) Sonja Hoffman zadecydowała o tym, by dalej rozwijać się jako webdesigner oraz specjalista ds. tworzenia aplikacji i ich rozwoju. Zajmuje się grywalizacją (to wykorzystanie elementów gier i technik projektowania gier w kontekście niezwiązanym z grami) i badaniami nad motywacją i doświadczeniami użytkownika. Łączy swoją profesję z własnym zainteresowaniem nowościami technologicznymi.

Powiązane artykuły

Komentarze do tego artykułu

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Pola obowiązkowe oznaczone są *.