3 ens kolonner CSS-gitterlayout
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 gittergeneratorsættet til tre lige store kolonner i en enkelt række, med navngivne områder slået fra - layoutet er bare gentag (3, 1fr), den korteste måde at sige "tre kolonner, der altid deler den tilgængelige bredde jævnt."
Kolonner med lige bredde er arbejdshesten i kortgitter, pristabeller og billedgallerier: intet område behøver navngivning, fordi hver kolonne spiller den samme rolle, så almindelig sporstørrelse er tydeligere end en deklaration af gitter-skabelon-områder ville være. Tilføj en række, og de samme tre numre gentages nedenunder, stadig helt jævnt.
Hæv kolonneantallet for et tættere gitter, eller aktiver navngivne områder, hvis en senere kolonne skal skille sig ud fra resten - CSS og HTML nedenfor opdateres i det øjeblik, du gør det. Alt kører på klientsiden, så der er intet at uploade og intet at vente på.