CSS Grid genereren
Visuele editor voor CSS Grid-indelingen met codegeneratie
Lay-outinstellingen
Vooraf ingestelde lay-outs
Plaatsing per item
Selecteer een item in het voorbeeld of de lijst om de eigenschappen ervan te bewerken.
Snelle CSS Grid-referentie
Rastertracks
Gebruik fr-eenheden voor flexibele tracks, px/% voor vaste tracks en auto voor tracks die zich naar hun inhoud voegen.
De functie repeat()
repeat(3, 1fr) is een afkorting voor 1fr 1fr 1fr. Gebruik auto-fill of auto-fit voor responsieve rasters.
Items laten overspannen
Gebruik span N om N tracks te overspannen, of 1 / -1 om alle kolommen of rijen te overspannen.
Live voorbeeld
De lijnlabels tonen de eerste 200 tracks. Uw volledige CSS en lay-out blijven behouden.
Gegenereerde CSS
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 10px;
}Wijzig de instellingen of selecteer een item. Het voorbeeld en de CSS worden samen bijgewerkt.
Over CSS Grid genereren
CSS Grid genereren is een interactieve visuele tool om CSS Grid-lay-outs te ontwerpen en te genereren. CSS Grid Layout is het krachtigste tweedimensionale lay-outsysteem in CSS, waarmee u kolommen en rijen tegelijk definieert. Deze tool biedt een praktische manier om te leren, te experimenteren en productieklare CSS Grid-code te genereren.
Belangrijkste functies
- Volledige controle over grid-template-columns en grid-template-rows met vrije invoer
- Snelknoppen voor kolommen en rijen om snel te prototypen met gelijke tracks
- Onafhankelijke schuifregelaars voor row-gap en column-gap voor nauwkeurige afstandsregeling
- Uitlijningsopties voor justify-items en align-items
- Plaatsing met grid-column en grid-row per item, met snelknoppen voor waarden
- Eigen labels voor grid-items om semantische lay-outgebieden te visualiseren
- Genummerde items in pastelkleuren met aanduidingen van rasterlijnnummers
- Voorinstellingen voor lay-outs: Bloglay-out, Dashboard, Fotogalerij en Landingspagina
- Automatisch gegenereerde CSS-code met kopiëren met één klik
- Volledige ondersteuning voor donkere modus
CSS Grid begrijpen
CSS Grid werkt met een grid-container met expliciete of impliciete tracks (kolommen en rijen). Items in de container worden automatisch in cellen geplaatst, of u plaatst ze zelf met de eigenschappen grid-column en grid-row, zodat ze meerdere tracks beslaan. De eenheid fr staat voor een deel van de beschikbare ruimte, waardoor responsieve lay-outs eenvoudig worden. De functie repeat() vereenvoudigt herhalende trackdefinities, en functies als minmax() en auto-fill/auto-fit maken echt responsieve rasters mogelijk zonder media queries.
Veelgebruikte CSS Grid-lay-outpatronen
CSS Grid is ideaal voor lay-outs op paginaniveau, zoals blogontwerpen met header-, zijbalk-, inhouds- en footergebieden; dashboards met navigatie, hoofdinhoud en widgetgebieden; fotogalerijen met items die meerdere rijen en kolommen beslaan voor een metselwerkachtig effect; en landingspagina's met hero-secties over de volle breedte, rasters met kenmerken in meerdere kolommen en call-to-action-gebieden. Met de voorinstellingsknoppen verkent u deze patronen direct.
Grid versus Flexbox
Flexbox is bedoeld voor eendimensionale lay-outs (één rij of kolom), terwijl CSS Grid uitblinkt in tweedimensionale lay-outs waarbij u beide assen tegelijk wilt beheersen. Grid past het best bij paginalay-outs en complexe componentopstellingen, terwijl Flexbox ideaal is om ruimte over items op één regel te verdelen. Veel moderne ontwerpen combineren beide: Grid voor de algehele paginastructuur en Flexbox voor uitlijning op componentniveau.
Voor wie is deze tool?
- Webontwikkelaars die paginalay-outs bouwen met CSS Grid
- Frontend-engineers die responsieve gridsystemen prototypen
- UI/UX-ontwerpers die gridstructuren visualiseren vóór de implementatie
- Studenten die tweedimensionale CSS-lay-outtechnieken leren
- Docenten die CSS Grid-concepten uitleggen in workshops of lessen
- Iedereen die snel CSS Grid-code voor zijn of haar webprojecten wil genereren