📖
CSS Grid — siatka dla układów
grid-template-columns, fr, gap i grid-area
📐
Grid — Excel dla CSS
Flexbox układa elementy w jednym kierunku (wiersz lub kolumna). Grid to układ dwuwymiarowy: definiujesz jednocześnie wiersze i kolumny, a następnie umieszczasz elementy w komórkach. Jak Excel, gdzie możesz rozciągać komórki na wiele pól naraz.
Podstawy Grid
css
.grid-container {
display: grid;
/* 3 kolumny: pierwsza 200px, druga elastyczna, trzecia 200px */
grid-template-columns: 200px 1fr 200px;
/* 3 równe kolumny */
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr); /* skrót */
/* Automatyczne kolumny minimum 250px */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
/* Wiersze */
grid-template-rows: 80px 1fr 60px;
/* Odstępy */
gap: 24px; /* wiersze i kolumny */
row-gap: 16px; /* tylko wiersze */
column-gap: 24px; /* tylko kolumny */
}fr (jednostka ułamkowa) — ułamek wolnej przestrzeni. 1fr 2fr — pierwsza zajmuje 1/3, druga 2/3.
Umieszczanie elementów
css
/* Rozciąganie na wiele komórek */
.item {
grid-column: 1 / 3; /* od linii 1 do linii 3 (2 kolumny) */
grid-column: span 2; /* rozciągnij na 2 kolumny (prościej) */
grid-row: span 2; /* rozciągnij na 2 wiersze */
}
/* Nazwane obszary — najbardziej czytelne podejście */
.layout {
display: grid;
grid-template-columns: 280px 1fr;
grid-template-rows: 80px 1fr 60px;
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }css
💬
repeat(auto-fill, minmax(280px, 1fr)) — jedna linia CSS zamiast trzech media queries. Magia Grid.
Flexbox czy Grid? Prosta zasada: jeśli układasz elementy W JEDNYM KIERUNKU (wiersz lub kolumna) — Flexbox. Jeśli potrzebujesz DWUWYMIAROWEJ siatki (wiersze I kolumny jednocześnie) — Grid.
Komentarze
Zaloguj się lub Zacznij aby zostawić komentarz.