CSS-rastergenerator
Ontwerp CSS-rasterlay-outs visueel: stel kolommen, rijen en tussenruimte in en typ vervolgens gebiedsnamen in cellen om rastersjabloongebieden te bouwen - met een live voorbeeld en kopieerbare CSS en HTML.
Resultaat
Een grid-template-areas-declaratie is een van de meest leesbare CSS-stukken die er zijn, maar pas als het eenmaal bestaat. Om er met de hand te komen, moet je de tekenreeksen tussen aanhalingstekens en overeenkomende rijlengtes tellen, en één niet-overeenkomende cel breekt stilletjes de hele lay-out. Deze generator verandert dat in directe manipulatie: stel het aantal kolommen en rijen in, typ een naam in een willekeurige cel van het liveraster en overeenkomende namen worden automatisch samengevoegd in één benoemd gebied.
Onder de motorkap wordt elke cel die u leeg laat een punt in de gegenereerde reeks raster-sjabloongebieden, en elke cel die u een naam geeft, wordt onderdeel van de rechthoek van die naam. CSS staat alleen toe dat een benoemde regio één schoon rechthoekig blok beslaat, dus de tool controleert dat terwijl u typt en vertelt u precies wanneer een naam nog geen geldige rechthoek vormt - in plaats van stilletjes CSS te produceren, zal de browser dit weigeren.
Kolom-opening en rij-opening zijn standaard ingesteld op 8px en worden gecombineerd tot één enkele openinglijn wanneer ze overeenkomen, en het live preview-raster weerspiegelt altijd uw raster-sjabloon-kolommen en raster-sjabloon-rijen tracks, inclusief vaste pixelkolommen uit een voorinstelling zoals de 200px zijrails van de heilige graal. De kopieerbare uitvoer omvat beide kanten: een CSS-blok klaar voor uw stylesheet en een bijbehorend HTML-skelet met één grid-area-div per benoemde regio.
Grid en flexbox lossen verschillende lay-outproblemen op, en de css-flexbox-generator op deze site is het betere startpunt voor eendimensionale lay-outs: een enkele rij of kolom met flexibele items zoals een navigatiebalk of een stapel kaarten. Gebruik in plaats daarvan deze rastergenerator als u tweedimensionale controle, expliciete rijen en kolommen of benoemde regio's zoals koptekst/nav/hoofdtekst/voettekst nodig hebt; de twee tools komen vaak op dezelfde pagina terecht, het raster voor de paginashell en de flexbox in de stukken. Zoals elke tool op deze site draait deze volledig in uw browser: geen upload, geen account.