CSS3 Multi-column Layout

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more

Thanks to this module, you can put text into multiple columns of a specified width, similar to newspaper typesetting.

The module consists of several properties:

column-width: _column_width_;
column-count: _column_count_;
column-gap: _gap_between_columns_;
column-rule: _property_of_vertical_line_between_columns_;

Apart from this “newspaper typesetting”, the module is also applicable to list items, image thumbnails and online store items.

Example

Let’s define a column width using the column-width: 15em declaration and define a gap between the columns using column-gap: 2em.

You can see a vertical line example, column-rule: 1px dotted #ddd, at the link below.

If you resize the browser window and there is not enough space for multiple columns, the browser itself will lose the multi-column layout.

You can try it at cdpn.io/e/ohLgJ.

Browser Support

IE10+. I recommend handling older browsers by using a hard fallback – in that case, the text will simply not form columns.




Content

Introduction

Introduction

On today’s frontend UI development

UI development transformations

Tools, technologies and workflows

Fallback strategies

CSS3 reference guide

Introduction

Text properties

Background properties

Border properties

Box properties

Media Queries

CSS transforms

CSS animations

CSS3 Layout

Another CSS3 Properties

Non-standard properties

End

End

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more