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

3 gelijke kolommen CSS-rasterindeling

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

Deze pagina opent de rastergenerator die is ingesteld op drie kolommen van gelijke breedte in een enkele rij, waarbij benoemde gebieden zijn uitgeschakeld. De lay-out is gewoon repeat(3, 1fr), de kortste manier om te zeggen: 'drie kolommen die de beschikbare breedte altijd gelijkmatig verdelen'.

Kolommen van gelijke breedte zijn het werkpaard van kaartrasters, prijstabellen en afbeeldingsgalerijen: er hoeft geen gebied te worden benoemd omdat elke kolom dezelfde rol speelt, dus een eenvoudige spoorgrootte is duidelijker dan een declaratie van raster-sjabloongebieden. Voeg een rij toe en dezelfde drie nummers worden eronder herhaald, nog steeds perfect gelijkmatig.

Verhoog het aantal kolommen voor een dichter raster, of schakel benoemde gebieden in als een latere kolom zich moet onderscheiden van de rest. De onderstaande CSS en HTML worden bijgewerkt zodra u dat doet. Alles draait aan de clientzijde, dus u hoeft niets te uploaden en niets om op te wachten.

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