CSS Grid-generator
Fout: Een resultaat buiten het beschreven bereik gebruiken.
Oplossing: Maak een CSS Grid met gelijke kolommen en pas de code aan.
Archief · Gratis
CSS Grid-generator
Maak een rastervoorbeeld en CSS met kolommen, rijen en tussenruimte.
Deze tool is gearchiveerd. Controleer de methode en gedateerde gegevens opnieuw vóór gebruik.
01Voer waarden in
Werkt in je browserWerkt offline in de browser. Nadat de pagina en benodigde bestanden geladen zijn, is geen internet nodig voor de verwerking.
02CSS Grid-generator
Werkt in je browser
Zo werkt het
Maak een rastervoorbeeld en CSS met kolommen, rijen en tussenruimte.
Werkt in je browser
Je gegevens blijven bij jou
Invoer wordt op deze pagina verwerkt en niet naar een server gestuurd.
Over deze tool
Tool gebruiken ↑Maak een rastervoorbeeld en CSS met kolommen, rijen en tussenruimte.
Maak een CSS Grid met gelijke kolommen en pas de code aan.
- Voer waarden in
- Kolommen
- Rijen
- Tussenruimte
- Berekeningsmethode
Maak een rastervoorbeeld en CSS met kolommen, rijen en tussenruimte.
- Voorbeeld · Resultaat
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;
Berekeningsmethode
- Maak een CSS Grid met gelijke kolommen en pas de code aan.
CSS Grid-generator
- Kolommen
- 3
- Rijen
- 2
- Tussenruimte
- 16 px
Resultaat
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;
Veelgestelde vragen
Hoe lees ik het resultaat?
Maak een CSS Grid met gelijke kolommen en pas de code aan.
Waar gaan mijn gegevens heen?
De berekeningen draaien op uw apparaat. Invoer wordt niet naar een server gestuurd.
Begrippen en definities
Voer waarden in
- Kolommen
Maak een CSS Grid met gelijke kolommen en pas de code aan.
Voer een geheel getal in, geen breuken.
Minimum: 1 · Maximum: 12
- Rijen
Voer een geheel getal in, geen breuken.
Minimum: 1 · Maximum: 12
- Tussenruimte
Voer de numerieke waarde van deze grootheid in. Gebruik de eenheid naast het veld. px
Minimum: 0 · Maximum: 100 px
Resultaat
- Resultaat
Maak een CSS Grid met gelijke kolommen en pas de code aan.
Berekend uit uw invoer met de onderstaande methode.
Veelgemaakte fouten en oplossingen
Grenzen en aannames
- Maak een CSS Grid met gelijke kolommen en pas de code aan.
- Weergegeven resultaten kunnen afgerond zijn; dit verhoogt de meetnauwkeurigheid niet.