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

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

Flexbox powinien być już znany wszystkim, a wielu programistom zapewnił już spokojną noc. A gdybyś mógł 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ść swobodnego zaprojektowania swojej strony w dwuwymiarowej siatce. Na przykład poprzez tworzenie bloków tekstu, które częściowo nakładają się na obrazy. Albo nawet bardziej złożone galerie obrazów bez ujemnych marginesów i pozycjonowania. Z pomocą CSS możesz też szybko zaprojektować szablony stron, które są również responsywne. Jest na to rozwiązanie: CSS Grid.

Czym jest siatka CSS?

Podobnie jak Flexbox, CSS Grid jest również zintegrowany za pomocą elementu kontenera i elementów CSS Grid - na przykład znajdziemy tu kilka właściwości do pozycjonowania Flexboxa: align-items, justify items, justify self i align-self. Dzięki nim możesz odpowiednio rozmieścić zawartość swojej 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 siatek możesz tworzyć 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 mądremu planowaniu możesz teraz także zaprogramować swoje układy w taki sposób, aby w miarę możliwości obejść się bez zapytań o media, ale oczywiście nie musisz tego robić. Później omówię bardziej szczegółowo różne możliwości.

CSS Grid zawiera także wiele innych nowych sztuczek CSS, które ułatwią ci życie w przyszłości. Jedną z nich jest nowa jednostka CSS: tak zwany ułamek (fr), który działa podobnie jak podział rozmiaru elementów flexbox. 

Ułamek (1fr) to część całego rzędu. Jeśli więc podzielisz swoją siatkę na 3×4, jak w poniższym przykładzie z CSS Tricks, to 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:

CSS-Grid-Empty-Space
Pusta zawartość w siatce CSS

W3Schools pokazuje inne możliwe układy, do których nadają się siatki CSS. W ten sposób możemy łatwo określić, że pewne elementy powinny być rozłożone w poziomie i w pionie na określonej liczbie 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 dlatego, że 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ż zostało zdefiniowane w CSS. Wtedy siatka zostanie automatycznie powiększona i dołączona do nowej zawartości.

Światy zakupów firmy Shopware są oparte na systemie CSS Grid - przynajmniej w widoku z tyłu strony. W 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ą przedrostka -ms-, aby móc wyświetlić siatkę CSS prawie w całości. Z kolei Microsoft Edge ma 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, używamy funkcji podstawowej w sposób podobny do flexbox. Najpierw określamy kontener, do którego przypiszemy funkcje siatki.

.container {
		display: grid;}

Istnieje wiele innych wartości, które możesz przypisać, aby zbudować siatkę zgodnie ze swoimi potrzebami:

grid-template-columns, grid-template-rows oraz grid-template-areas (wszystkie te elementy można również ustawić za pomocą grid-template). Te właściwości zawierają informacje o liczbie i wielkości wierszy i kolumn. Możesz również ustawić odległości między nimi za pomocą właściwości odstęp między kolumnami i odstęp między wierszami (lub w skrócie odstęp).

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).

Dzięki właściwości grid-auto-flow możesz również określić, w którym kierunku ma płynąć siatka, używając wartościrow, column lub dense. Podczas gdy wiersz i kolumna zajmują się odpowiednio wyrównaniem w poziomie i w pionie, zagęszczenie określa, czy siatka jest wypełniona ekonomicznie. Oznacza to, że przy tej wartości układ elementów w siatce może się zmieniać w pewnych okolicznościach, aby wypełnić puste miejsce. Jest to szczególnie interesująca funkcja dla galerii zdjęć. W ten sposób elementy w różnych rozmiarach ekranu przesuwają się w górę, jeśli jest to konieczne, 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;}

Po utworzeniu kontenera siatki nadszedł czas, aby wypełnić go elementami siatki. Szczególną cechą systemu siatki CSS jest to, że kolejność w HTML-u może być drugorzędna, ponieważ możesz nadać każdemu elementowi współrzędną początkową i końcową. Można to zrobić 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ę elementowi siatki, którego położenie można następnie samodzielnie określić w kontenerze siatki. Możesz jednak nadawać nazwy nie tylko elementom siatki. Można również nadać nazwy liniom siatki, aby za pomocą tych nazw przekazać elementom siatki ich współrzędne. Dzięki temu nie będziesz musiał liczyć 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.

"*" wyświetla wymagane pola

Zgoda*
To pole służy do weryfikacji i nie powinno być zmieniane.

Przykłady z sieci

Jeśli jesteś wzrokowcem jak ja, musisz zobaczyć kilka przykładów z życia wziętych, żeby w pełni zrozumieć siatkę CSS. Aby to zrobić, trochę poszperałam w internecie, żeby znaleźć strony, które zostały stworzone z użyciem CSS Grid lub które mogłyby skorzystać z tego rozwiązania.

CSS-Grid-In-Practice
Siatka CSS do tworzenia portfolio

Levon Biss użył siatki CSS 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 siatek. Po pierwsze, strona została podzielona na trzy części: Nagłówek, Główna i Stopka. Wysokość nagłówka i stopki została zdefiniowana, natomiast część główna z wartością "auto" może elastycznie rosnąć wraz z zawartością. Kolumny zostały ustawione z dokładnością do 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 znów była upakowana w systemie siatkowym. Zauważ, że jednostki CSS px i fr zostały tutaj pomieszane. W ten sposób obramowanie ma stałą szerokość 144px, a ś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. W galerii ustawiono je na 1em. Dzięki temu nie trzeba dodawać marginesu między obrazkami. Możesz 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;
}
CSS-Grid-In-Practice
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: 

CSS-Grid-Layout
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;
}
CSS-Grid-Layout
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:

CSS Grid Grid Items
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;
}

Połącz siatkę CSS i WordPress

Dzięki nowemu edytorowi WordPressa zawartość może być teraz domyślnie wyświetlana w rzędach i kolumnach. Jednak układ przypomina mi bardziej Bootstrapa i innych i brakuje mi trochę dwuwymiarowości. Prawdopodobnie tak właśnie myśleli inni i dlatego stworzyli wtyczkę Grids: Layout builder for WordPress. Wtyczka jest bezpłatna i robi dokładnie to, co obiecuje: pozwala na wizualne tworzenie siatek CSS bez użycia kreatora stron.

CSS Grid Shopify
Wtyczka Grids: Layout builder for 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żesz tego użyć w połączeniu z kolumnami. W przeciwieństwie do Media Query, w tym przypadku nie pyta się o rozmiar ekranu, ale o rozmiar elementu. Jeśli pudełko skurczy się tak bardzo, że spadnie poniżej minimalnego rozmiaru, elementy powiększają się i przesuwają tak, aby znów się zmieściło.

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 o minimalnym rozmiarze 240px, a maksymalnym 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 miejsce, a jeśli go nie ma, można użyć całej szerokości.

Ale są też zalety związane z zapytaniem o media. Dzięki współrzędnym możesz umieszczać i układać elementy siatki w różny sposób dla każdego urządzenia. Zwłaszcza w urządzeniach mobilnych, gdzie może panować inna hierarchia niż na komputerze stacjonarnym, może to zapewnić przyjemne doświadczenie użytkownika.

"*" wyświetla wymagane pola

Zgoda*
To pole służy do weryfikacji i nie powinno być zmieniane.

Wszystkie funkcje specjalne w skrócie

  • FR (frakcja) jako nowa jednostka CSS
  • Obszarom i liniom siatki można nadawać nazwy
  • Grid-column-end może być używane 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 z programu 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? Zachęcamy do korzystania z funkcji komentarzy. Chcesz być informowany o nowych artykułach dotyczących WordPressa i projektowania stron internetowych? Obserwuj nas na TwitterzeFacebookuLinkedIn lub poprzez nasz Newsletter.

Spodobał Ci się ten artykuł?

Zostawiając opinię pomożesz nam udoskonalać publikowane przez nas treści.

Napisz komentarz

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