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.

Een snel voorbeeld laat zien hoe deze CSS-uitgang van de rastergenerator eruit ziet Laat de kolomgrootte op 1fr staan, sleep Kolommen naar 4 en Rijen naar 1, en stel de kolomafstand in op 24px en de rijafstand op 16px. De preview toont vier gelijke cellen in één rij, en de Gegenereerde CSS-box leest weergave: raster; raster-sjabloon-kolommen: herhalen (4, 1fr); raster-sjabloonrijen: auto; opening: 16px 24px; De gap-waarden komen eerst uit de rij en vervolgens in de kolom, wat de volgorde is die de steno-indeling van een CSS-generator voor een containerindeling uitzet: regel.

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.