LAY

Flexbox i Grid w CSS

Responsywne i adaptacyjne układy · INF.03

Flexbox – szybkie układy 1D

Flexbox pozwala łatwo rozmieścić elementy w poziomie (flex-direction: row) lub pionie (flex-direction: column).
Użyj justify-content do ustawienia wyrównania (środek, koniec, początek, równo) oraz align-items dla osi poprzecznej.
Responsywność: flex-wrap: wrap umożliwia łamanie do nowego wiersza na małych ekranach.

.container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; } .item { flex: 1 1 200px; margin: 10px; background: #cce6ff; padding: 22px; }

Grid – siatka 2D dla układów stron

Grid pozwala zdefiniować układ w dwóch wymiarach (kolumny i wiersze).
Ustal szablon za pomocą grid-template-columns i grid-template-rows.
Dla pełnych layoutów — grid-template-areas opisuje rozmieszczenie sekcji.
Odstępy: gap ustala przestrzeń między elementami.
Responsywność: auto-fit i odede>minmax pozwalają automatycznie dostosowywać siatkę.

.grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: auto 1fr auto; gap: 14px; } .grid-item { background: #e6f0ff; padding: 18px; border-radius: 10px; }

Przykładowy layout strony przy użyciu Grid

.grid-page { display: grid; grid-template-areas: "header header header" "nav main aside" "footer footer footer"; grid-template-columns: 180px 1fr 220px; grid-template-rows: auto 1fr auto; min-height: 100vh; gap: 18px; } .header { grid-area: header; } .nav { grid-area: nav; } .main { grid-area: main; } .aside { grid-area: aside; } .footer { grid-area: footer; }

Ćwiczenie: Flexbox i Grid

Zadanie: Zbuduj układ głównej sekcji z trzema kartami w jednej linii za pomocą Flexbox.

.flex-box { display: flex; gap: 20px; } .card { flex: 1 1 30%; background: #dee6fc; padding: 16px; border-radius: 8px;}

Zadanie Grid: Zbuduj siatkę czterech bloczków w dwóch rzędach.

.grid-ex { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; } .block { background: #e6f7ee; padding: 20px; border-radius: 9px;}

Checklista Layout

Potrafię tworzyć układy w Flexbox horizont/pion Projektuję adaptacyjne layouty z grid-template-areas Używam gap, auto-fit, minmax do responsywności Optymalizuję układ dla różnych rozdzielczości