⭐ 0
🔍
Tekst Afbeelding PDF & Documenten Audio Muziek Elektronica Tijd Hulpprogramma's Validators Esoterie Spellen

Zijbalk + CSS-rasterindeling met inhoud

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.

Typ een naam in een willekeurige cel hieronder; cellen met dezelfde naam worden samengevoegd tot één rastersjabloongebiedengebied.

Verwerken... 0%

Resultaat

Op deze pagina wordt de rastergenerator geopend met een lay-out met twee kolommen en één rij die al is genoemd: een zijbalkkolom van 200 px naast een flexibele inhoudskolom die de resterende ruimte in beslag neemt. Beide gebieden zijn onmiddellijk zichtbaar in de live preview, gekleurd en gelabeld, zodat de splitsing in één oogopslag duidelijk is.

Dit is de meest voorkomende vorm van navigatie plus inhoud op internet: instellingenpagina's, documentatiesites en beheerdersdashboards leunen allemaal op een rail met vaste breedte naast een vloeiend hoofdgebied. Omdat de zijbalkkolom een ​​pixelwaarde gebruikt en de inhoudskolom 1fr, blijft de zijbalk een constante breedte terwijl de inhoudskolom elke extra pixel van de viewport absorbeert.

Hernoem een van beide gebieden, wijzig de kolombreedte of voeg meer rijen toe voor een koptekst boven de splitsing: de CSS- en HTML-uitvoer hieronder volgt elke bewerking in realtime. De tool is gratis en blijft volledig in uw browser werken, zonder upload en zonder account.

🛡️
Uitgevoerd in browser

Uw bestanden en invoer verlaten dit apparaat nooit. Verwerking verloopt volledig offline. 100% veilig.

Geaccepteerde formaten & regels

  • Nummerinvoer voor 1-6 kolommen en rijen, plus afzonderlijke besturingselementen voor kolom- en rij-afstand die worden gecombineerd tot één tussenruimte wanneer ze overeenkomen.
  • Een modus voor benoemde gebieden: typ een gebiedsnaam rechtstreeks in een cel van het liveraster; de tool bouwt een geldige reeks raster-sjabloongebieden op en waarschuwt wanneer namen geen schone rechthoeken vormen.
  • Kopieerbaar CSS-blok (weergave: raster, raster-sjabloon-kolommen/rijen, opening, raster-sjabloon-gebieden) plus een bijbehorend HTML-skelet met één rastergebied-div per benoemde regio.

Belangrijkste voordelen

✓ Typ een naam rechtstreeks in een willekeurige cel en de overeenkomende namen worden samengevoegd in één gebied met rastersjabloongebieden: geen selectie via slepen, geen handmatig raden van de syntaxis van de aanhalingstekens.
✓ Het live preview-raster wordt bij elke wijziging van grootte aangepast en van kleur veranderd, zodat u de exacte kolom- en rijtracks en elk benoemd gebied ziet voordat u een enkele regel CSS kopieert.
✓ Voorinstellingen zoals de klassieke lay-out van de heilige graal en een smalle zijbalk geven je een echte, werkende raster-sjabloon-gebiedendeclaratie om vanuit te starten in plaats van een leeg raster.

Toepassingen

  • • Bouw de klassieke heilige graal-paginashell – kop- en voettekst over de volledige breedte met een nav/hoofd/opzij middelste rij – door gebiedsnamen te typen in plaats van met de hand geschreven raster-sjabloongebieden.
  • • Plaats een instellingenpagina of beheerdersdashboard met een zijbalk met vaste breedte naast een flexibele inhoudskolom en kopieer de exacte CSS en HTML zodra de live preview er goed uitziet.
  • • Controleer vóór verzending of een reeks benoemde gebieden daadwerkelijk geldige rechthoeken vormt. De tool markeert de exacte namen die raster-sjabloongebieden in de browser zouden breken.