Sidebjælke + Indhold CSS Grid Layout
Design CSS Grid-layouts visuelt: Indstil kolonner, rækker og mellemrum, og indtast derefter områdenavne i celler for at bygge grid-template-områder - med en live forhåndsvisning og kopierbar CSS og HTML.
Resultat
Denne side åbner gittergeneratoren med et layout med to kolonner, én række, der allerede er navngivet: en 200px sidebjælkekolonne ved siden af en fleksibel indholdskolonne, der optager den resterende plads. Begge områder er synlige i live-eksemplet med det samme, farvet og mærket, så opdelingen er tydelig med et øjeblik.
Dette er den mest almindelige navigation-plus-indhold-form på nettet - indstillingssider, dokumentationswebsteder og admin-dashboards læner sig alle op af en skinne med fast bredde ved siden af et flydende hovedområde. Fordi sidebjælken bruger en pixelværdi, og indholdskolonnen bruger 1fr, forbliver sidebjælken en konstant bredde, mens indholdskolonnen absorberer hver ekstra pixel i viewporten.
Omdøb begge områder, skift kolonnebredden, eller tilføj flere rækker til en overskrift over opdelingen - CSS- og HTML-outputtet nedenfor sporer hver redigering i realtid. Værktøjet er gratis og fortsætter med at fungere helt i din browser, uden upload og uden konto.