CSS Grid - wprowadzenie

Wprowadzenie do CSS Grid

1. Co to jest CSS Grid?

CSS Grid Layout to nowoczesny system tworzenia układów dwuwymiarowych na stronach internetowych.
W przeciwieństwie do Flexboxa (który działa w jednym wymiarze), Grid pozwala na układanie elementów zarówno w rzędach, jak i w kolumnach jednocześnie.

Umożliwia tworzenie nawet bardzo złożonych layoutów w sposób przejrzysty, czytelny i responsywny.

Dlaczego Grid?

• pozwala projektować układy 2D – rzędy + kolumny,

• umożliwia szybkie budowanie szablonów stron (nagłówek, sidebar, treść),

• eliminuje potrzebę stosowania floatów i hacków układu,

• pozwala precyzyjnie kontrolować rozmiary i odległości,

• jest bardzo czytelny — większość układu widać w samym kodzie,

• idealny do layoutów, sekcji, galerii, układów responsywnych.

Z czego składa się Grid?

Grid w CSS opiera się na dwóch elementach:

1. Grid container (kontener siatki)

Element, na którym ustawiamy display: grid.
To on definiuje liczbę kolumn, wierszy i ich rozmiary.

2. Grid items (elementy siatki)

Wszystkie elementy znajdujące się wewnątrz kontenera.
Można im nadawać pozycje, rozciągać je, łączyć komórki itd.

3. Najważniejsze właściwości CSS Grid

Właściwości kontenera (grid container):

➤ display: grid

Aktywuje tryb Grid.

➤ grid-template-columns

Definiuje liczbę i szerokość kolumn.

Przykłady:

grid-template-columns: 200px 200px 200px;
grid-template-columns: 1fr 2fr 1fr;
grid-template-columns: repeat(3, 1fr);

➤ grid-template-rows

Definiuje liczbę i wysokość wierszy.

grid-template-rows: 100px auto 50px;

➤ gap

Odstępy między wierszami i kolumnami.

gap: 20px;

➤ grid-auto-rows / grid-auto-columns

Określają rozmiar automatycznie tworzonych wierszy/kolumn.

➤ justify-items / align-items

Wyrównanie elementów w komórkach (poziomo / pionowo).

➤ justify-content / align-content

Wyrównanie całej siatki w kontenerze.

Właściwości elementów (grid items):

➤ grid-column / grid-row

Określanie, ile kolumn lub rzędów zajmuje element.

grid-column: 1 / 3; /* od kolumny 1 do 2 */
grid-row: 1 / span 2; /* zajmuje 2 rzędy */

Prosty przykład z dokładnym omówieniem

Załóżmy, że chcemy zrobić prostą siatkę 3 kolumn i 2 wierszy.

HTML:

<div class=”grid-container”>
<div class=”item”>1</div>
<div class=”item”>2</div>
<div class=”item”>3</div>
<div class=”item”>4</div>
<div class=”item”>5</div>
<div class=”item”>6</div>
</div>

CSS:
.grid-container {
display: grid;                                                  /* aktywacja grida */
grid-template-columns: repeat(3, 1fr);      /* 3 równe kolumny */
grid-template-rows: 150px 150px;             /* 2 rzędy po 150px */
gap: 20px;                                                      /* odstępy między elementami */
background: #eee;
padding: 20px;
}

.item {
background: #4da3ff;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}

Efekt końcowy:

Analiza przykładu — rozbijamy na elementy:

display: grid

Włącza tryb Grid. Teraz dzieci .grid-container stają się elementami siatki.

– grid-template-columns: repeat(3, 1fr);

Tworzymy 3 kolumny o równej szerokości:

– 1fr – jednostka elastyczna (fraction unit),

repeat(3, 1fr) = 1fr 1fr 1fr.

– grid-template-rows: 150px 150px;

Powstają dwa wiersze, każdy o wysokości 150px:

| 150px |
| 150px |

– gap: 20px;

Robi równe odstępy między elementami – działa jak margines, ale lepiej.

– Każdy .item

Wyświetlany jest jako kwadrat, wycentrowany dzięki Flexboxowi:

display: flex;
justify-content: center;
align-items: center;

5. Kiedy używać Grid, a kiedy Flexbox?

Proste porównanie:

Flexbox układa elementy „wzdłuż linii”.

Grid układa elementy „na planszy”.