CSS Grid to potężny system układu stron, który każdy frontend developer musi znać. W tym poradniku dla początkujących poznasz podstawy, które zmienią sposób, w jaki tworzysz layouty.
Czym jest CSS Grid?
CSS Grid to dwuwymiarowy system layoutu, który pozwala definiować wiersze i kolumny. W przeciwieństwie do Flexbox (jednowymiarowy), Grid idealnie nadaje się do całych layoutów stron.
Podstawowe właściwości Grid
- display: grid – włączamy Grid
- grid-template-columns – definiujemy kolumny
- grid-template-rows – definiujemy wiersze
- gap – odstępy między elementami
- grid-column / grid-row – pozycjonowanie elementów
Przykład layoutu 3-kolumnowego
.container { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 20px; }
Proste? To dopiero początek! CSS Grid ma jeszcze więcej możliwości: auto-fit, minmax(), nazwane obszary i wiele więcej.
