{"id":178790,"date":"2014-08-14T14:11:05","date_gmt":"2014-08-14T21:11:05","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=178790"},"modified":"2020-08-07T09:05:44","modified_gmt":"2020-08-07T16:05:44","slug":"column-count","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-count\/","title":{"rendered":"column-count"},"content":{"rendered":"\n<p>If you need an exact numbers of columns when designing a multi-column layout, use <code>column-count<\/code>.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.lead {\n  column-count: 3;\n }<\/code><\/pre>\n\n\n\n<p>Given the number of columns, the browser will evenly distribute the content in exactly that number of columns.<\/p>\n\n\n\n<p>This property can also be used in the shorthand for <a href=\"\/almanac\/properties\/c\/columns\"><code>columns<\/code><\/a> and can be used in tandem with <code>column-width<\/code>. When both properties are declared <code>column-count<\/code> is the maximum number of columns.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<p><code>column-count<\/code> can be <code>auto<\/code> or an integer.<\/p>\n\n\n\n<p>Use <code>auto<\/code> if you are also using <code>column-width<\/code>. Think of it as a way of telling the browser, to let <code>column-width<\/code> take the lead.<\/p>\n\n\n\n<p>The integer, also known as the number of columns, must be greater than or equal to 0.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OGYQON\" src=\"\/\/codepen.io\/anon\/embed\/OGYQON?height=450&amp;theme-id=1&amp;slug-hash=OGYQON&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OGYQON\" title=\"CodePen Embed OGYQON\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Unlike <code>column-width<\/code> this property will hold the number of columns regardless of the browser width. This means that if you pulled up a 5-columned layout on your mobile phone, you will have a very squished 5-columned layout to navigate. <code>column-count<\/code> works best alongside <code>column-width<\/code>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"related-properties\">Related Properties<\/h3>\n\n\n<ul><li><a href=\"\/almanac\/properties\/c\/columns\"><code>columns<\/code><\/a><\/li><li><a href=\"\/almanac\/properties\/c\/column-fill\"><code>column-fill<\/code><\/a><\/li><li><a href=\"\/almanac\/properties\/c\/column-gap\"><code>column-gap<\/code><\/a><\/li><li><a href=\"\/almanac\/properties\/c\/column-rule\"><code>column-rule<\/code><\/a><\/li><li><a href=\"\/almanac\/properties\/c\/column-span\"><code>column-span<\/code><\/a><\/li><li><a href=\"\/almanac\/properties\/c\/column-width\"><code>column-width<\/code><\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"additional-resources\">Additional Resources<\/h3>\n\n\n<ul><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/column-count\" rel=\"noopener\">MDN Docs<\/a><\/li><li><a href=\"http:\/\/www.w3.org\/TR\/css3-multicol\/#column-count\" rel=\"noopener\">CSS3 Spec<\/a><\/li><li><a href=\"http:\/\/caniuse.com\/#feat=multicolumn\" rel=\"noopener\">Can I Use<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser Support<\/h3>\n\n\n<p>Multi-column layout support:<\/p>\n\n\n\n<figure class=\"wp-block-table browser-support-table ticss-50e181e3\"><table><thead><tr><th>Chrome<\/th><th>Safari<\/th><th>Firefox<\/th><th>Opera<\/th><th>IE<\/th><th>Android<\/th><th>iOS<\/th><\/tr><\/thead><tbody><tr><td>Any<\/td><td>3+<\/td><td>1.5+<\/td><td>11.1+<\/td><td>10+<\/td><td>81<\/td><td>3.2+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Don&#8217;t forget your prefixes if you aren&#8217;t using a tool that helps with that already.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you need an exact numbers of columns when designing a multi-column layout, use column-count. 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 can be used in tandem with column-width. When both properties [&hellip;]<\/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":[1647,1648],"acf":[],"jetpack-related-posts":[{"id":178809,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/columns\/","url_meta":{"origin":178790,"position":0},"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":178795,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-width\/","url_meta":{"origin":178790,"position":1},"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":322529,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-rule-color\/","url_meta":{"origin":178790,"position":2},"title":"column-rule-color","date":"October 5, 2020","format":false,"excerpt":"The column-rule-color CSS property determines the color of a line between columns in a CSS multi-column layout. The property can't act alone! In order to see the color, we need to make the line \u2014 technically called a \"rule\" \u2014 between columns. That requires the column-rule-style property. .columns { column-count:\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":178799,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-span\/","url_meta":{"origin":178790,"position":3},"title":"column-span","date":"August 14, 2014","format":false,"excerpt":"In a multi-column layout, you can make elements expand across the columns with column-span. h2 { -webkit-column-span: all; column-span: all; } Assign column-span to an element inside of the multi-column layout to make it a spanning element. The multi-column layout will resume with the next non-spanning element. The value of\u2026","rel":"","context":"With 7 comments","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":178790,"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":178790,"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\/178790"}],"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=178790"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/178790\/revisions"}],"predecessor-version":[{"id":318885,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/178790\/revisions\/318885"}],"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=178790"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=178790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}