Column-width - CSS-Tricks

Trang chủ » Html Css Column Width » Column-width - CSS-Tricks

Có thể bạn quan tâm

When you want to keep your columns at a specific width, use column-width.

section { -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; }

The browser will calculate how many columns of at least that width can fit in the space. Think of column-width as a minimum width suggestion for the browser.

column-width is a flexible property. Once the browser cannot fit at least 2 columns at your specified width then the columns will stop and drop into a single column.

This property is also used in the shorthand for columns and can be used in tandem with column-count. When both properties are declared column-count is the maximum number of columns.

Values

You can set column-width to auto or a length.

Use auto if you are also using column-count or if you need to turn off the property. Think of it as a way of telling the browser to let column-count take the lead.

To specify the width of the columns, use a length greater than (or equal to) 0. You can use any CSS unit except for percentage.

Related Properties

  • columns
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-span

Additional Resources

  • MDN Docs
  • CSS3 Spec
  • Can I Use

Browser Support

Multi-column layout support:

Chrome Safari Firefox Opera IE Android iOS
Any 3+ 1.5+ 11.1+ 10+ 2.3+ 6.1+

Don’t forget your prefixes!

Từ khóa » Html Css Column Width