CSS Grid Generator

De CSS Grid Generator is een visuele builder voor CSS Grid Layout U kiest hoeveel kolommen en rijen u wilt, kiest een trackgrootte voor elke as, stelt de gaten en de uitlijning in, en een voorbeeldraster herschikt in realtime De exacte CSS die produceert wat u ziet, bevindt zich in een kopieerklaar vak eronder, zodat u nooit met de hand raster-sjabloon-kolommen hoeft te schrijven of fractie-eenheden in uw hoofd hoeft te tellen.

CSS Grid is een tweedimensionaal lay-outmodel In tegenstelling tot flexbox, dat items langs een enkele as legt, bestuurt het raster rijen en kolommen tegelijkertijd De container houdt de structuur vast via een kleine reeks eigenschappen: rastersjabloonkolommen en rastersjabloonrijen definiëren de sporen, de opening voegt er afstand tussen toe en rechtvaardigt items, lijnitems, rechtvaardigt de inhoud en lijn de inhoud van de items en de tracks. Dit hulpmiddel legt deze eigenschappen bloot in één paneel en toont het resultaat onmiddellijk.

De generator gebruikt de repeat () functie voor elke as met meer dan één spoor, dus raster-sjabloon-kolommen: repeat (3, 1fr) is wat je krijgt voor een rooster met drie kolommen van gelijke kolommen in plaats van een repetitieve lijst De fr-eenheid vertegenwoordigt een fractie van de vrije ruimte in de container, wat rasterindelingen vloeiend maakt: drie kolommen van 1fr nemen elk een derde van de breedte en reflow als de container opnieuw wordt groot. Je kunt ook auto-, min-inhoud-, max-inhoud- en vaste pixelsporen uit het track-size menu mixen.

Alles draait volledig in uw browser Er is geen aanmelding, er wordt niets geüpload en de tool blijft offline werken zodra de pagina is geladen. Het is zowel nuttig als leermiddel, omdat u kunt zien hoe elke eigenschap de lay-out verandert, als als een snelle manier om productieklare raster-CSS te produceren voor een galerij, een dashboard, een kaartindeling of een volledige paginaschelp. De gegenereerde regel richt zich op een .grid-container-klasse en vermeldt alleen de eigenschappen die een zichtbaar effect hebben, zodat de uitvoer schoon blijft.