Siatka

with Brak komentarzy

Dziś kolejny sposób na responsywność strony. Grid-CSS jest troszkę inny niż Flexbox, ale równie przyjemny w obsłudze. Oczywiście, jeśli znamy już podstawy.

Niektórzy uważają, że ten sposób zastąpi frameworki takie jak Bootstrap. Ja jednak jestem zdania, że warto znać kilka możliwych metod do osiągnięcia zamierzonego celu tj. responsywnej strony. Ktoś będzie używał Bootstrapa, a ktoś inny felxboxa, bo tak mu będzie wygodnie. Nie ma tu mowy o tym, że coś jest przestarzałe i nie używa się tego już.

Za flexboxem i gridem-css przemawia to, że nie piszemy zbędnego kodu. A to powinno nam przyświecać przede wszystkim.

GRID-CSS

Wes Bos w swoim kursie (darmowym) CSS Grid proponuje w pierwszym filmiku zainstalowanie Mozilla FireFox w wersji dla devoloperów. Dlaczego? Dzięki temu narzędziu mamy dokonały wgląd na ustawienie siatki i odstępów pomiędzy poszczególnymi komórkami. Poza tym prędzej idzie się zorientować w działaniu tego systemu. Mamy wszystko “rozrysowane”. 😉
Czyli w pierwszej kolejności ściągamy narzędzie developerskie z FireFoxa, link znajdziesz tu.

Aby zacząć w ogóle tworzyć GRID potrzebujemy “włączyć” go na kontenerze, w którym będziemy pozycjonować elementy. Czyli tworzymy “rodzica” i deklarujemy mu właściwość:

display:grid;

Takim kontenerem-rodzicem może być <body> lub dodatkowy <div> otaczający wszystkie elementy strony tj. <header>, <footer> itd. Możemy nadać mu konkretną klasę np. “wrapper” i stylować go. Aby poczytać coś więcej na temat Grid-u zapraszam na stronę MDN.

Tworzymy naszą siatkę, używając (ciągle w rodzicu) deklaracji:

grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;

Dzięki takiej deklaracji stworzymy siatkę składającą się z dwóch kolumn i dwóch rzędów. Ich wymiary, czyli szerokość kolumny i wysokość rzędu to 100px. To oczywiste. A co jeśli mamy więcej elementów w kodzie html niż zdeklarowanych kolumn/rzędów? Albo mamy deklarację tylko jednego: kolumny lub rzędu?

Wtedy zachodzi taka sytuacja, że tworzone są rzędy/kolumny w domyślnych rozmiarach. Takie domyślne ustawienia możemy zdefiniować.

grid-auto-columns: minmax (150px 1 fr);

Funkcja minmax () definiuje rozmiar kolumny. Istnieje jeszcze funkcja reapat (), która definiuje powtarzalność wymiarów kolumny lub rzędu.

grid-template-columns: reapat (auto-fit, minmax (150px, 1fr))

Warto zapoznać się też z takimi wartościami, jak: auto-fill, auto-fit oraz z funkcją: fit-content.

Tu pojawia się również deklaracja:

grid-auto-flow: row;

Właściwość ta kontroluje automatyczne rozmieszczenie. Określa dokładnie, w jaki sposób dodatkowe elementy zostaną wstawione do siatki. Ciekawą wartością tej deklaracji jest dense.

Ciekawą jednostką, jaką tu możemy zastosować, jest FRAKCJA. Jest to elastyczna jednostka
(1 fr), gdzie 1 frakcja odpowiada 1 części dostępnej przestrzeni.

Ważnym elementem jest również deklaracja:

grid-gap: 20px;

Mówi ona o przestrzeni pomiędzy poszczególnymi kolumnami i rzędami. To taki margin lub padding. Link do opisu na MDN jest tu.

AREAS

Pewnie się zastanawiasz, jak to wszystko poukładać w ‘siatce’. Do tego potrzebujemy deklaracji na kontenerze “rodzicu”:

grid-template-areas:
     "header header header" - nazwa przestrzeni
     "content1 content1 content2"
     "footer footer footer" 

A na “dzieciach”, elementach przypisujesz, gdzie się znajdą w określonym przez nas obszarze. Przypiszmy klasy naszym “dzieciom”. Mamy trzy elementy: header (item1), content (item2), footer (item3). To będzie wyglądało tak:

.item1 {
  grid-area: header;
}
.item2 {
  grid-area: content;
}
.item3 {
  grid-area: footer;
}

I mamy wszystko poukładane. Jest jeszcze parę właściwości, które warto poznać.

MIEJSCE I PORZĄDEK

Miejsce w siatce możemy określić za pomocą kilku deklaracji. Zaczniemy od prostego order. Podobnie jak w Flexboxie, przyjmuje wartość liczby dodatniej, ujemnej lub zero. Zasada działania jest identyczna.

Kolejnymi właściwościami, które trzeba poznać, są:

grid-row: span 2;
grid-column: span 2;

grid-column-start: 2;
grid-column-end: 5;
--------- skrócony zapis-----------
grid-column: 2/5;

Pierwsze deklaracje odnoszą się do specyficznych wymiarów kolumn (rzędów). Span 2 oznacza, że dana kolumna będzie miała rozmiar dwóch wielkości (kolumn), sama “przepchnie następną dalej. (Warto obejrzeć to na kursie Wesa Brosa, bo prościej jest to zrozumieć, patrząc, niż czytając o tym). Nie “łamie” linii, więc jeśli damy większą wartość (np.4) to przekroczy do następnego miejsca. Hmm… jakoś ciężko jest mi to wytłumaczyć. Wskakujcie do Wesa, tak będzie prościej 😜

Druga deklaracja odnosi się do miejsca w siatce. Określa pozycję początkową lub końcową elementu siatki w kolumnie, lub rzędzie siatki poprzez dodanie linii, span lub niczego (!) (automatycznie) do umiejscowienia w siatce. Ta pozycja początkowa, lub końcowa definiuje krawędź początkową lub końcową bloku obszaru siatki. Przyjmuje także wartości ujemne. Link do opisu grid-cloumn-start znajdziesz tu.


I na koniec jeszcze jedna sprawa. Zawsze trzeba pamiętać, aby nie pisać zbyt wiele niepotrzebnego kodu. Gdzie możesz, stosuj notację skrótową. Na przykład:

grid-template: [header-left] "head head" 30px [header-right]
               [main-left]   "nav  main" 1fr  [main-right]
               [footer-left] "nav  foot" 30px [footer-right]
               / 120px 1fr;

Grid-template to shorthand dla wartości kolumn, rzędów oraz przestrzeni, jaką mają zajmować.

Ok. To by było na tyle, jeśli chodzi o GRID-CSS. Najważniejsze rzeczy (według mnie) zawarłam tu w poście. Nic tylko działać i samemu po próbować. Powodzenia.

p.s. znalazłam jeszcze jeden fajny kurs GRID-CSS, tym razem po polsku. Link.

Dołącz do społeczności bloga

Signup now and receive an email once I publish new content.

Wyrażam zgodę na przekazywanie moich danych osobowych MailChimp ( more information )

Twój e-mail będzie chroniony. W każdym momencie będziesz mógł/mogła się wypisać.

Follow Danuta:

Blogująca mama dwóch chłopców. Ciągle ucząca się i poszukująca pomysłu na siebie. Obecnie pogłębiająca tajniki programowania.

Latest posts from

Zostaw komentarz