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

Heilige Graal CSS-rasterindeling - Klaar voor code

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 die vooraf is geladen met de heilige graal-indeling: drie kolommen en drie rijen, met kop- en voettekst over de volledige breedte en een nav/hoofd/opzij-rij ertussen. De koprij gebruikt automatische hoogte, de middelste rij vult de resterende ruimte en de twee zijkolommen zijn vast ingesteld op 200 px, terwijl de hoofdkolom de rest neemt.

De heilige graal-lay-out kreeg zijn naam omdat het echt moeilijk was om betrouwbaar te bouwen vóór CSS Grid - jaren van float-hacks, tabel-lay-outs en absolute positionering probeerden deze exacte vorm te vervalsen. Met grid-template-gebieden wordt het samengevouwen tot vijf benoemde regio's en een handvol spoorgroottes, en daarom blijft het het standaard eerste voorbeeld voor het aanleren van CSS Grid.

Elk nummer en elke opening op deze pagina is nog steeds live: verklein de zijkolommen, voeg een vierde rij toe of hernoem een gebied en het voorbeeld en de kopieerbare CSS-update onmiddellijk. Kopieer de CSS- en HTML-blokken rechtstreeks naar uw project: alles draait lokaal in uw browser, er wordt niets geüpload.

🛡️
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.