CSS Grid-generator

Den genererade behållaren

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;

@media (max-width: 660px) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

• repeat(3, minmax(0, 1fr)): tre kolumner som delar den tillgängliga bredden lika. 1fr är en bråkdel av det återstående utrymmet; minmax(0, 1fr) låter kolumner krympa under sin innehållsstorlek.
• gap: mellanrummet mellan varje spår.
• Media queryn växlar till repeat(auto-fit, minmax(220px, 1fr)), som skapar så många kolumner som får plats, var och en minst 220px bred. Brytpunkten är antalet kolumner gånger minimibredden (med ett golv på 120px), så på små skärmar bryts rutnätet till fler rader i stället för att klämmas ihop.

Enheten fr

fr betyder “en bråkdel av det återstående utrymmet”: efter att spåren med fast storlek dragits av delas det återstående utrymmet med det totala antalet fr-enheter.

grid-template-columns: 200px 1fr 2fr;

På en behållare på 1000px tar första kolumnen 200px och de återstående 800px delas 1:2, det vill säga 267px och 533px.

auto-fill vs. auto-fit

• auto-fill: skapar tomma fyllnadsspår när det inte finns tillräckligt med element.
• auto-fit: fäller ihop tomma spår till noll, så att återstående element sträcker sig för att fylla raden.

Den responsiva fallbacken använder auto-fit, vilket är vad kortrutnät vill ha: raden ser alltid full ut.

Kolumner med olika bredd

Generatorn skapar lika kolumner. Ändra resultatet för att blanda storlekar: grid-template-columns: 200px 1fr 2fr; ger en fast sidokolumn och två flexibla kolumner i förhållandet 1:2. För namngivna områden (grid-template-areas) eller explicit placering (grid-column: 1 / 3) lägger du till dessa regler för hand ovanpå den genererade behållaren.

Grid vs. Flexbox

• Grid: explicit 2D-layout med spår. Bra när layouten har en rad- och kolumnstruktur (sidskelett, galleri, instrumentpanel).
• Flexbox: 1D-justering längs en enda axel. Bra när element flyter naturligt (navigeringsfält, rad med knappar).

Riktiga layouter kombinerar oftast båda: Grid för sidskelettet, Flexbox inuti komponenter.

Vanliga fallgropar

• Glömma min-width: 0 på barn: gridelement använder som standard sin innehålls minimibredd, vilket hindrar fr-kolumner från att krympa under det längsta ordet. Sätt min-width: 0 på barnen så att de kan krympa.
• Häckning utan display: grid: ett gridbarn är inte självt ett rutnät förrän du deklarerar det.