Sidefelt + innhold CSS-rutenettoppsett
Design CSS-rutenettoppsett visuelt: angi kolonner, rader og gap, og skriv deretter områdenavn inn i celler for å bygge rutenett-mal-områder - med en direkte forhåndsvisning og kopierbar CSS og HTML.
Resultat
Denne siden åpner rutenettgeneratoren med en to-kolonne, én-rads layout som allerede er navngitt: en 200px sidefeltkolonne ved siden av en fleksibel innholdskolonne som tar den gjenværende plassen. Begge områdene er synlige i live-forhåndsvisningen umiddelbart, farget og merket slik at splittelsen er tydelig med et øyeblikk.
Dette er den vanligste navigasjons-pluss-innhold-formen på nettet – innstillingssider, dokumentasjonssider og admin-dashboards lener seg alle på en skinne med fast bredde ved siden av et flytende hovedområde. Siden sidefeltkolonnen bruker en pikselverdi og innholdskolonnen bruker 1fr, forblir sidefeltet konstant bredde mens innholdskolonnen absorberer hver ekstra piksel i visningsporten.
Gi nytt navn til et av områdene, endre kolonnebredden eller legg til flere rader for en overskrift over delingen - CSS- og HTML-utdataene under sporer hver redigering i sanntid. Verktøyet er gratis og fortsetter å fungere helt i nettleseren din, uten opplasting og uten konto.