CSS grid generator
Zet een tekstlay-outschets om in een echte CSS grid met benoemde gebieden.
CSS grid generator
Plak een grove schets van een paginaindeling en dit hulpprogramma zet het om in werkende CSS grid code. Schrijf elke rij van de indeling op een eigen regel, en herhaal hetzelfde woord over cellen om een benoemd gebied te markeren — "header header" op één regel, "nav main" op de volgende, "footer footer" op de laatste beschrijft een klassieke lay-out met drie rijen met full-width kop- en voettekst. Het hulpprogramma leest de herhaalde namen als grid-gebieden en genereert de overeenkomstige grid-template-areas verklaring automatisch.
De opties bepalen de rest van de gegenereerde CSS. Stel de ruimte tussen cellen in pixels in, en geef eventueel expliciete kolombreedte of rijhoogte op met behulp van geldige CSS spoormaten — fr-eenheden, auto of minmax(); laat beide velden leeg en het hulpprogramma verdeelt de sporen gelijkmatig. Zet per-sectie-regels aan om een kant-en-klare grid-area verklaring voor elk benoemd gedeelte te krijgen, met behulp van een klassenaam-voorvoegsel dat u kiest, zodat "header" direct .grid-header wordt. Een responsieve schakelaar voegt een max-width mediaquery toe die de gehele indeling op een enkele kolom voor smalle schermen samenvouwt, en een HTML-schakelaar voegt een overeenkomstig opmaakskelet toe zodat u de structuur naast de CSS kunt zien.
Als twee cellen met dezelfde naam geen solide rechthoek vormen — een L-vorm of een naam die een cel overslaat — kan echte CSS grid dat gebied niet correct weergeven, dus het hulpprogramma geeft het direct in de uitvoer aan als een waarschuwingscommentaar in plaats van stille ongeldige regels te genereren. Regeleindes van elk besturingssysteem worden op dezelfde manier afgehandeld, en de live teller onder de uitvoer geeft aan hoeveel lay-outrijen, benoemde gebieden en tekens de gegenereerde CSS bevat.
Alles draait lokaal in uw browser; de indeling die u schetst en de CSS die u terugkrijgt worden nergens naartoe verzonden. Kopieer het resultaat, download het als een .txt bestand, of stuur de uitvoer rechtstreeks naar een ander hulpprogramma zoals de CSS-formatterter om de inspringingen verder op te schonen.