CSS Grid-generator

Een grid-template-areas-declaratie is een van de best leesbare stukken CSS die er zijn, maar pas als hij er eenmaal staat — er met de hand komen betekent geneste aanhalingstekens tellen en rijlengtes op elkaar afstemmen, en één verkeerde cel breekt de hele layout in stilte. Deze generator maakt daar directe manipulatie van: stel het aantal kolommen en rijen in, typ een naam in een willekeurige cel van het live raster en cellen met dezelfde naam smelten automatisch samen tot één benoemd gebied.

Achter de schermen wordt elke cel die je leeg laat een punt in de gegenereerde grid-template-areas-string, en elke cel die je een naam geeft wordt onderdeel van de rechthoek van die naam. CSS staat een benoemd gebied alleen toe als één aaneengesloten rechthoekig blok, dus de tool controleert dat terwijl je typt en geeft precies aan wanneer een naam nog geen geldige rechthoek vormt — in plaats van stilletjes CSS te produceren die de browser zal weigeren.

Column-gap en row-gap staan standaard op 8px en worden samengevoegd tot één regel gap als ze gelijk zijn, en het live preview-raster spiegelt altijd je grid-template-columns- en grid-template-rows-sporen, inclusief vaste pixelkolommen uit een preset zoals de 200px zijrails van de holy grail. De kopieerbare uitvoer dekt beide kanten: een CSS-blok dat klaar is voor je stylesheet en een bijpassend HTML-skelet met één grid-area-div per benoemd gebied.

Grid en flexbox lossen verschillende layoutproblemen op, en de css-flexbox-generator op deze site is een beter startpunt voor eendimensionale layouts — een enkele rij of kolom met flexibele items zoals een navigatiebalk of een stapel kaarten. Gebruik deze grid-generator juist wanneer je tweedimensionale controle nodig hebt, expliciete rijen en kolommen, of benoemde gebieden zoals header/nav/main/footer; de twee tools staan vaak op dezelfde pagina, grid voor de paginastructuur en flexbox voor de onderdelen daarbinnen. Zoals elke tool op deze site draait hij volledig in je browser — geen upload, geen account.