CSS Grid Generator
Gratis visuele CSS Grid-generator met live preview. Ontwerp interactief responsieve grid-lay-outs en exporteer direct productieklare CSS-code.
Wat is CSS Grid?
CSS Grid is een tweedimensionaal lay-outsysteem in CSS waarmee u complexe web-lay-outs kunt maken met rijen en kolommen. Het is krachtiger dan Flexbox voor volledige pagina-lay-outs omdat het in beide dimensies tegelijk werkt.
Hoe werkt deze CSS Grid-generator?
Stel het aantal kolommen en rijen in, definieer hun grootte met eenheden zoals px, fr of procenten, pas de tussenruimte aan en zie uw lay-out in realtime bijwerken. Kopieer vervolgens de gegenereerde CSS-code direct naar uw project.
Wat is het verschil tussen px, fr en %?
px stelt een vaste grootte in, fr (fractie) verdeelt de beschikbare ruimte proportioneel, en % stelt een grootte in ten opzichte van het container. Voor responsieve ontwerpen wordt fr aanbevolen omdat het automatisch aanpast aan de beschikbare ruimte.
Wat doet de gap-eigenschap?
De gap-eigenschap definieert de afstand tussen grid-items. U kunt row-gap en column-gap onafhankelijk instellen. Het verving de oudere grid-gap-eigenschap en is nu de standaardmanier om afstand toe te voegen in CSS Grid.
Kan ik responsieve lay-outs maken met deze tool?
Ja. Gebruik fr-eenheden voor flexibele kolommen en combineer met CSS media queries in uw project. De gegenereerde code werkt perfect met responsieve design-technieken.
Is CSS Grid beter dan Flexbox?
Ze dienen verschillende doelen. CSS Grid is ideaal voor tweedimensionale lay-outs (rijen en kolommen samen), terwijl Flexbox uitblinkt in eendimensionale lay-outs (rij of kolom). Veel moderne lay-outs combineren beide.
Welke browsers ondersteunen CSS Grid?
CSS Grid wordt ondersteund door alle moderne browsers inclusief Chrome, Firefox, Safari en Edge. Volgens Can I Use bedraagt de wereldwijde browserondersteuning meer dan 97%.
Kan ik grids binnen andere grids nesten?
Ja, CSS Grid ondersteunt nesting. U kunt een grid-container binnen een grid-item plaatsen om complexere lay-outs te maken.
Wat is grid-template-areas?
grid-template-areas stelt u in staat om gebieden van uw grid te benoemen en items op naam toe te wijzen. Het maakt complexe lay-outs leesbaarder.
Hoe centreer ik items in CSS Grid?
Gebruik justify-items en align-items om te centreren binnen cellen, of justify-content en align-content om het hele grid te centreren.
Is de gegenereerde CSS-code productieklare?
Ja. De gegenereerde CSS volgt moderne standaarden en best practices. U kunt het direct in uw project kopiëren zonder aanpassingen.
Kan ik auto-fit en auto-fill gebruiken met deze generator?
De huidige versie richt zich op vaste kolom- en rijdefinities. Voor auto-fit en auto-fill met minmax() kunt u deze waarden handmatig toevoegen aan de gegenereerde CSS voor echt vloeiende responsieve grids.
Hoe CSS Grid Generator te gebruiken
Ontwerp CSS Grid-layouts interactief en exporteer direct bruikbare code. De voorbeeldweergave wordt lokaal in je browser berekend en er worden geen gegevens geüpload.
- Stel column-gap en row-gap in om de tussenruimte tussen de tracks te regelen.
- Kies waarden voor justify-items en align-items zoals stretch, start, end of center om items binnen hun cellen te positioneren.
- Verdeel het hele raster met justify-content en align-content, bijvoorbeeld space-between, space-around of space-evenly.
- Zie de live voorbeeldweergave meebewegen met elke aanpassing en kopieer daarna de gegenereerde CSS.
align-content heeft pas een zichtbaar effect als het raster kleiner is dan zijn container; geef de container een vaste hoogte om de verdeling te zien.
Gerelateerde tools
- CSS Flexbox Generator Visuele CSS Flexbox-generator met live preview. Pas flex-eigenschappen aan en krijg direct bruikbare CSS-code.
- CSS-gradiëntgenerator Maak visueel verbluffende CSS-gradiënten. Genereer lineaire, radiale en conische gradiënten met meerdere kleurstops, hoeken en posities. Kopieer direct productierijpe CSS-code.
- CSS Box Shadow Generator Gratis online CSS box-shadow generator. Maak visueel prachtige schaduwen met instelbare offset, blur, spread, kleur en inset. Live voorbeeld en directe code kopiëren.
- CSS Border Radius Generator Visuele CSS border-radius generator. Pas elke hoek onafhankelijk aan met realtime voorbeeld en kopieer de CSS-code direct.
- Border Radius Generator Gratis online border-radius generator. Sleep 8 handvatten of kies een blob-voorinstelling om organische CSS-vormen te maken en de code direct te kopiëren.
- Kleurconverteerder Gratis online kleurconverteerder. Converteer HEX, RGB, HSL, HSV formaten direct met visuele kiezer. 100% privé, werkt in uw browser.
- CSS Easing Generator Gratis online CSS easing generator. Sleep de cubic-bezier-controlepunten op een interactieve curve, kies uit 18 presets, bekijk een herhalende bal-animatie en kopieer de timingfunctie direct.
- CSS Text-shadow Generator Gratis online text-shadow generator. Stapel meerdere schaduwlagen met offset, vervaging, kleur en dekking, probeer presets als Neon, 3D of Retro en kopieer de CSS direct.