Byg CSS Grid-layouts visuelt — vælg kolonner, rækker og mellemrum, og kopiér den færdige CSS. Gratis onlineværktøj uden login.
Hvordan bruger man CSS Grid-generator?
Indstil antallet af rækker og kolonner.
Træk celler for at sammenflette områder eller justere placering.
Kopiér den genererede CSS Grid-kode, og brug den i dit projekt.
Ofte stillede spørgsmål om CSS Grid-generator
Hvad er forskellen mellem CSS Grid og Flexbox?
CSS Grid er til 2D-layouts (rækker + kolonner), mens Flexbox er til 1D-layouts (række eller kolonne). Grid er bedre egnet til komplekse sidelayouts.
Hvad er fr-enheden?
fr (fraction) er en proportional enhed, der bruges i CSS Grid. For eksempel deler 1fr 2fr pladsen i forholdet 1:2. Den er meget nyttig til responsive layouts.
Kan jeg bygge et responsivt gitter uden medieforespørgsler?
Ja. Skriver du repeat(auto-fit, minmax(240px, 1fr)), fastlægger du kun kolonnens mindste bredde og lader browseren regne resten ud: kolonner kommer til, når vinduet vokser, og falder fra, når det skrumper — fra telefon til computer uden et eneste brydepunkt. Bemærk, at auto-fill efterlader tomme spor i den overskydende plads, mens auto-fit strækker de eksisterende for at fylde den, så de to giver forskelligt resultat ved få elementer.
Et langt ord strækker en gitterkolonne og ødelægger layoutet.
Gitterelementer har som standard minimumsstørrelsen auto og nægter derfor at krympe under deres indhold — én lang adresse eller et ubrydeligt ord presser hele kolonnen op. min-width: 0 på det element lader gitteret krympe det igen, og overflow-wrap: anywhere får den lange streng til at ombryde. At definere sporet som minmax(0, 1fr) i stedet for blot 1fr fjerner årsagen helt, og derfor er det så udbredt.
Tips til effektiv brug af CSS Grid-generator
repeat(auto-fit, minmax(240px, 1fr)) ombryder helt af sig selv – uden media queries.
Brug gap i stedet for margener, så den sidste kolonne ikke får overskydende luft.
Navngiv områderne med grid-template-areas i komplekse layouts, så koden forbliver læsbar.