The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Layout Responsive Fluid Columns Using CSS

Layout Responsive Fluid Columns Using CSS

3:03
Learn how to use CSS columns to quickly lay out fluid columns that are responsive, degrade gracefully and don't require extra markup. ####Notes: - `column-width` operates like `min-width`, not `width`. The browser will render as many columns as it can with the width provided. If each column can take up more than the value provided, they will do so. - `column-span` enables a specific element to ignore `column-count` and `column-width`. It can be set to an integer to span a certain number of columns, or "all" to span them all. However, this property does not work in Firefox. A workaround could be to move the element (say, a heading) outside of the container with the `columns` applied to it. That way, it remains outside of the automatic column flow. - `column-fill` allows you to change the way content flows into columns. By default, it's set to "balance", where content is distributed as much as possible between columns. It can also be set to "auto", but in order to do so, it requires setting a fixed height. This breaks the idea of fluid, responsive layouts, so use it with caution. You'll also need some browser prefixes, so be sure to reference this [browser support chart](http://tympanus.net/codrops/css_reference/column-span/).
Watch this lesson now
Avatar
egghead.io

Learn how to use CSS columns to quickly lay out fluid columns that are responsive, degrade gracefully and don't require extra markup.

Notes:

  • column-width operates like min-width, not width. The browser will render as many columns as it can with the width provided. If each column can take up more than the value provided, they will do so.
  • column-span enables a specific element to ignore column-count and column-width. It can be set to an integer to span a certain number of columns, or "all" to span them all. However, this property does not work in Firefox. A workaround could be to move the element (say, a heading) outside of the container with the columns applied to it. That way, it remains outside of the automatic column flow.
  • column-fill allows you to change the way content flows into columns. By default, it's set to "balance", where content is distributed as much as possible between columns. It can also be set to "auto", but in order to do so, it requires setting a fixed height. This breaks the idea of fluid, responsive layouts, so use it with caution. You'll also need some browser prefixes, so be sure to reference this browser support chart.
Avatar
Hozefa

Neat. This is useful info. In most case like this, I would have used the bootstrap to get this working, but this is so simple and clean without any dependency on a framework.

In reply to egghead.io
Avatar
Michal

Also simple and clean is use flexbox.

In reply to Hozefa
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?