Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
columns

4 Articles
{
,

}
Direct link to the article When Do You Use CSS Columns?
columns

When Do You Use CSS Columns?

That ain’t rhetorical: I’m really interested in finding great use cases for CSS multi-column layouts.

The answer seems straightforward. Use columns when you want to split any content into columns, right? Here is generally the sort of example you’ll find …

Avatar of Geoff Graham
Geoff Graham on Aug 18, 2022
Direct link to the article You want minmax(10px, 1fr) not 1fr
columns grid minmax

You want minmax(10px, 1fr) not 1fr

There are a lot of grids on the web like this:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

My message is that what they really should be is:

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(10px, 1fr));
}
…
Avatar of Chris Coyier
Chris Coyier on Jan 22, 2021
Direct link to the article The Trickery it Takes to Create eBook-Like Text Columns
columns scroll-snap

The Trickery it Takes to Create eBook-Like Text Columns

There’s some interesting CSS trickery in Jason Pamental’s latest Web Fonts & Typography News. Jason wanted to bring swipeable columns to his digital book experience on mobile. Which brings up an interesting question right away… how do you set …

Avatar of Chris Coyier
Chris Coyier on Jun 8, 2020
Direct link to the article break-inside
break-inside columns

break-inside

Columns do a great job of flowing and balancing content. Unfortunately, not all elements flow gracefully. Sometimes elements get stuck between columns.

Fortunately, you can tell the browser to keep specific elements together with break-inside.

li {
-webkit-column-break-inside: avoid;
          
…
Avatar of Katy DeCorah
Katy DeCorah on Aug 21, 2014 (Updated on Jun 13, 2022)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top