CSS Grid-generator

En grid-template-areas-deklaration är en av de mest läsbara CSS-bitarna som finns, men bara när den väl existerar – att ta sig dit manuellt innebär att räkna strängar med citationstecken och matcha radlängder, och en enda felmatchad cell tystar hela layouten. Denna generator gör om det till direkt manipulation: ställ in antalet kolumner och rader, skriv ett namn i valfri cell i live-rutnätet, så slås matchande namn ihop till en namngiven region automatiskt.

Under huven blir varje cell du lämnar tom en punkt i den genererade grid-template-areas-strängen, och varje cell du namnger blir en del av det namnets rektangel. CSS tillåter endast att en namngiven region upptar ett rent rektangulärt block, så verktyget kontrollerar det medan du skriver och talar om exakt när ett namn ännu inte bildar en giltig rektangel – istället för att tyst producera CSS som webbläsaren kommer att avvisa.

Kolumnavstånd och radavstånd förinställs på 8px och slås ihop till en enda gap-rad när de matchar, och live-förhandsvisningsrutnätet speglar alltid dina grid-template-columns- och grid-template-rows-spår, inklusive fasta pixelkolumner från en förinställning som den heliga graalens 200px-sidospalter. Den kopieringsbara utdatan täcker båda sidorna: ett CSS-block redo för din stilmall och ett matchande HTML-skelett med en grid-area-div per namngiven region.

Grid och flexbox löser olika layoutproblem, och css-flexbox-generatorn på denna webbplats är den bättre startpunkten för endimensionella layouter – en enda rad eller kolumn med flexibla objekt som en navigeringslist eller en kortstapel. Välj denna grid-generator istället när du behöver tvådimensionell kontroll, explicita rader och kolumner, eller namngivna regioner som sidhuvud/navigering/huvudinnehåll/sidfot; de två verktygen hamnar ofta på samma sida, grid för sidans skal och flexbox inuti dess delar. Precis som alla verktyg på denna webbplats körs det helt i din webbläsare – ingen uppladdning, inget konto.