// geek.justjoin.it

CSS Grid – nowoczesne layouty w CSS

Streszczenie wpisu i odnośnik do pełnej treści u źródła.

CSS Grid – nowoczesne layouty w CSS

TL;DR

Dwuwymiarowa siatka CSS Grid zastąpiła tabele, floaty i sztuczki z position, a większość układu strony da się opisać kilkoma linijkami. Podstawą są display: grid, jednostka fr, gap i grid-template-areas, w których obszary strony rozpisujesz niemal jak tekst: nagłówek, menu, treść, panel boczny, stopka.

Kolejny poziom to repeat() z minmax() oraz auto-fit i auto-fill, dające responsywne karty bez media queries, a także subgrid do wyrównania zagnieżdżonych siatek. Wśród przykładów jest galeria z grid-auto-flow: dense i karty produktów, w których przyciski zawsze lądują na dole. Autorka przypomina też o dostępności: HTML ma mieć sens bez CSS, a Grid tylko zmienia wygląd.

Przez lata układaliśmy strony na tabelach, float i hackach z position. Dziś mamy CSS Grid, czyli natywny system siatki, który robi to samo w kilku linijkach kodu. Ten artykuł pokaz...

Czytaj cały wpis u źródła

// powiązane wpisy