{"id":178795,"date":"2014-08-14T14:12:04","date_gmt":"2014-08-14T21:12:04","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=178795"},"modified":"2014-08-14T14:22:03","modified_gmt":"2014-08-14T21:22:03","slug":"column-width","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-width\/","title":{"rendered":"column-width"},"content":{"rendered":"

When you want to keep your columns at a specific width, use column-width<\/code>.<\/p>\n

section {\r\n-webkit-column-width: 200px;\r\n   -moz-column-width: 200px;\r\n        column-width: 200px;\r\n}<\/code><\/pre>\n
The browser will calculate how many columns of at least<\/em> that width can fit in the space. Think of column-width<\/code> as a minimum width suggestion for the browser.<\/p>\n
column-width<\/code> 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.<\/p>\n
This property is also used in the shorthand for columns<\/code><\/a> and can be used in tandem with column-count<\/code>. When both properties are declared column-count<\/code> is the maximum number of columns.<\/p>\n
Values<\/h3>\n
You can set column-width<\/code> to auto<\/code> or a length.<\/p>\n
Use auto<\/code> if you are also using column-count<\/code> or if you need to turn off the property. Think of it as a way of telling the browser to let column-count<\/code> take the lead.<\/p>\n
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.<\/p>\n