columns | css column
WithjustafewCSSrules,youcancreateaprint-inspiredlayoutthathastheflexibilityoftheweb.It’sliketakinganewspaper,butasthepapergetssmaller,thecolumnswilladjustandbalanceautomaticallyallowingthecontenttoflownaturally..intro{columns:300px2;}Thecolumnspropertywillacceptcolumn-count[1],column-width[2],orbothproperties.columns:||;Usingbothcolumn-countandcolumn-widthisrecommendedtocreateaflexiblemulti-columnlayout.Thecolumn-countwillactasthemaximumnumberofcolumns,whilethecolumn-widthwilldictatetheminim...
With just a few CSS rules, you can create a print-inspired layout that has the flexibility of the web. It’s like taking a newspaper, but as the paper gets smaller, the columns will adjust and balance automatically allowing the content to flow naturally.
.intro { columns: 300px 2; }The columns property will accept column-count[1], column-width[2], or both properties.
columns: || ;Using both column-count and column-width is recommended to create a flexible multi-column layout. The column-count will act as the maximum number of columns, while the column-width will dictate the minimum width for each column. By pulling these properties together, the multi-column layout will automatically break down into a single column at narrow browser widths without the need of media queries or other rules.
A multi-column layout works great on block elements including lists to make a flexible navigation.
To further fine tune your multi-column layout, use break-inside[3...