Generator CSS Grid

CSS Grid służy do układów dwuwymiarowych (wiersze + kolumny), natomiast Flexbox do układów jednowymiarowych (wiersz lub kolumna). Grid lepiej nadaje się do złożonych układów stron.

fr (fraction) to jednostka proporcjonalna używana w CSS Grid. Na przykład 1fr 2fr dzieli przestrzeń w stosunku 1:2. Jest bardzo przydatna w układach responsywnych.

Tak. Zapis repeat(auto-fit, minmax(240px, 1fr)) ustala jedynie minimalną szerokość kolumny, a resztę wylicza przeglądarka: kolumny przybywają, gdy okno się poszerza, i znikają, gdy się zwęża, obejmując telefon i komputer bez ani jednego punktu granicznego. Zwróć uwagę, że auto-fill zostawia puste tory w resztce miejsca, a auto-fit rozciąga istniejące, by je wypełnić — dlatego przy niewielu elementach dają różny efekt.

Elementy siatki mają domyślnie minimalny rozmiar auto, więc odmawiają skurczenia się poniżej swojej zawartości — długi adres albo niełamliwe słowo rozpycha całą kolumnę. Nadanie temu elementowi min-width: 0 pozwala siatce znów go zmniejszyć, a dodanie overflow-wrap: anywhere sprawia, że długi ciąg przechodzi do następnego wiersza. Zdefiniowanie toru jako minmax(0, 1fr) zamiast zwykłego 1fr usuwa przyczynę u źródła i dlatego jest tak popularne.