{"id":178807,"date":"2014-08-14T14:11:28","date_gmt":"2014-08-14T21:11:28","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=178807"},"modified":"2015-08-07T10:32:56","modified_gmt":"2015-08-07T17:32:56","slug":"column-fill","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-fill\/","title":{"rendered":"column-fill"},"content":{"rendered":"
When you add height to a multi-column element, you can control how the content fills the columns. The content can be balanced or filled sequentially.<\/p>\n
ul {\r\n height: 300px;\r\n -webkit-columns: 3;\r\n -moz-columns: 3;\r\n columns: 3;\r\n -moz-column-fill: balance;\r\n column-fill: balance;\r\n}<\/code><\/pre>\nThis property is only available in Firefox. Firefox will automatically balance content in a height-constrained multi-column layout. The other browsers will always fill columns sequentially when given a height constraint.<\/p>\n
To make Firefox behave like the other browsers, that is to fill columns sequentially, you can set column-fill: auto<\/code>.<\/p>\nValues<\/h3>\n
column-fill<\/code> accepts the keyword values balance<\/code> and auto<\/code>.<\/p>\nbalance<\/code> will fill each column with about the same amount of content, but will not allow the columns to grow taller than the height<\/code>. You might find that the columns will come up shorter than the height<\/code> as the browser distributes the content evenly horizontally.<\/p>\nauto<\/code> will fill each column until it reaches the height<\/code> and do this until it runs out of content. Given the content, this value will not necessarily fill all the columns nor fill them evenly.<\/p>\nIt\u2019s kind of like pouring juice into glasses. You can pour an equal amount of juice into each glass and find that you don’t fill each glass to the top (balance<\/code>). Alternatively, you can fill a glass to the top until it’s full and repeat this until no juice is left. As a result, the remaining glasses may have less or no juice (auto<\/code>).<\/p>\nSee the Pen column-fill example [CSS-Tricks]<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\nRelated Properties<\/h3>\n\n- columns<\/a><\/li>\n
- column-count<\/a><\/li>\n
- column-gap<\/a><\/li>\n
- column-rule<\/a><\/li>\n
- column-span<\/a><\/li>\n
- column-width<\/a><\/li>\n<\/ul>\n
Additional Resources<\/h3>\n\n- MDN Docs<\/a><\/li>\n
- CSS3 Spec<\/a><\/li>\n
- Can I Use<\/a><\/li>\n<\/ul>\n
Browser Support<\/h3>\n
The column-fill<\/code> keyword values specifically work in Firefox. They didn’t work in August 2014 when this Almanac entry was originally written, but does when tested again in August 2015 (Chrome 44). During that testing, it seems that changing the value dynamically wouldn’t take, you had to force a relayout<\/a>.<\/p>\nBrowser support for multi-column layout in general:<\/p>\n
\n\n\nChrome<\/th>\n Safari<\/th>\n Firefox<\/th>\n Opera<\/th>\n IE<\/th>\n Android<\/th>\n iOS<\/th>\n<\/tr>\n<\/thead>\n \n\nAny<\/td>\n 3+<\/td>\n 1.5+<\/td>\n 11.1+<\/td>\n 10+<\/td>\n 2.3+<\/td>\n 6.1+<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nDon’t forget your prefixes!<\/p>\n","protected":false},"excerpt":{"rendered":"
When you add height to a multi-column element, you can control how the content fills the columns. The content can be balanced or filled sequentially. ul { height: 300px; -webkit-columns: 3; -moz-columns: 3; columns: 3; -moz-column-fill: balance; column-fill: balance; } This property is only available in Firefox. Firefox will automatically balance content in a height-constrained […]<\/p>\n","protected":false},"author":200919,"featured_media":0,"parent":13915,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":178795,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-width\/","url_meta":{"origin":178807,"position":0},"title":"column-width","date":"August 14, 2014","format":false,"excerpt":"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.\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":178801,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-rule\/","url_meta":{"origin":178807,"position":1},"title":"column-rule","date":"August 14, 2014","format":false,"excerpt":"To make columns distinct, you can add a vertical line between each column. The line sits in the center of the column gap. If you\u2019ve ever styled border, then you are ready to style column-rule. .container { -webkit-columns: 2 400px; -moz-columns: 2 400px; columns: 2 400px; -webkit-column-rule: 1px solid black;\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":178809,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/columns\/","url_meta":{"origin":178807,"position":2},"title":"columns","date":"August 14, 2014","format":false,"excerpt":"With just a few CSS rules, you can create a print-inspired layout that has the flexibility of the web. It\u2019s like taking a newspaper, but as the paper gets smaller, the columns will adjust and balance automatically allowing the content to flow naturally. .intro { columns: 300px 2; } The\u2026","rel":"","context":"With 21 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":178790,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-count\/","url_meta":{"origin":178807,"position":3},"title":"column-count","date":"August 14, 2014","format":false,"excerpt":"If you need an exact numbers of columns when designing a multi-column layout, use column-count. .lead { column-count: 3; } Given the number of columns, the browser will evenly distribute the content in exactly that number of columns. This property can also be used in the shorthand for columns and\u2026","rel":"","context":"In \"column-count\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":322545,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-rule-width\/","url_meta":{"origin":178807,"position":4},"title":"column-rule-width","date":"October 5, 2020","format":false,"excerpt":"The column-rule-width CSS property sets the thickness of the line that is drawn between columns by column-rule-style in a CSS multi-column layout. .columns { columns: 2 600px; column-rule-style: dotted; column-rule-width: 3px; } Another way to go about it is to use the column-rule shorthand property, which combines column-rule-width, column-rule-style and\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":322541,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-rule-style\/","url_meta":{"origin":178807,"position":5},"title":"column-rule-style","date":"October 5, 2020","format":false,"excerpt":"The column-rule-style CSS property specifies type of line that's drawn between columns in a CSS multi-column layout. The property is sort of limited on its own. When we declare it, it will draw a line between CSS columns that's one pixel wide and black. .columns { columns: 2 600px; column-rule-style:\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/178807"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/200919"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=178807"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/178807\/revisions"}],"predecessor-version":[{"id":206249,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/178807\/revisions\/206249"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13915"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=178807"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=178807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}