{"id":178809,"date":"2014-08-14T14:09:53","date_gmt":"2014-08-14T21:09:53","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=178809"},"modified":"2022-06-13T08:33:10","modified_gmt":"2022-06-13T15:33:10","slug":"columns","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/c\/columns\/","title":{"rendered":"columns"},"content":{"rendered":"\n<p>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.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.intro {\n  columns: 300px 2;\n}<\/code><\/pre>\n\n\n\n<p>The <code>columns<\/code> property will accept <a href=\"\/almanac\/properties\/c\/column-count\"><code>column-count<\/code><\/a>, <a href=\"\/almanac\/properties\/c\/column-width\"><code>column-width<\/code><\/a>, or both properties.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">columns:  || ;<\/code><\/pre>\n\n\n\n<p>Using both <code>column-count<\/code> and <code>column-width<\/code> is recommended to create a flexible multi-column layout. The <code>column-count<\/code> will act as the maximum number of columns, while the <code>column-width<\/code> will dictate the minimum width for each column. By pulling these properties together, the multi-column layout will automatically break down into a single column at narrow browser widths without the need of media queries or other rules.<\/p>\n\n\n\n<figure><iframe loading=\"lazy\" id=\"cp_embed_7db740bc9ff28a1f7fdd70bcce257860\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\" src=\"\/\/codepen.io\/anon\/embed\/7db740bc9ff28a1f7fdd70bcce257860?height=300&amp;theme-id=1&amp;slug-hash=7db740bc9ff28a1f7fdd70bcce257860&amp;default-tab=result\" width=\"300\" height=\"300\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/figure>\n\n\n\n<p>A multi-column layout works great on block elements including lists to make a flexible navigation.<\/p>\n\n\n\n<figure><iframe loading=\"lazy\" id=\"cp_embed_59265dd206624b5def837be15200a58d\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\" src=\"\/\/codepen.io\/anon\/embed\/59265dd206624b5def837be15200a58d?height=268&amp;theme-id=1&amp;slug-hash=59265dd206624b5def837be15200a58d&amp;default-tab=result\" width=\"300\" height=\"268\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/figure>\n\n\n\n<p>To further fine tune your multi-column layout, use <a href=\"\/almanac\/properties\/b\/break-inside\/\"><code>break-inside<\/code><\/a> on specific elements to keep them from getting stuck between columns.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-related-properties\">Related properties<\/h3>\n\n\n<ul><li><a href=\"\/almanac\/properties\/c\/column-count\"><code>column-count<\/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><li><a href=\"\/almanac\/properties\/b\/break-inside\/\"><code>break-inside<\/code><\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-information\">More information<\/h3>\n\n\n<ul><li><a href=\"http:\/\/www.w3.org\/TR\/css3-multicol\/#columns\" rel=\"noopener\">CSS Multi-column Layout Module Level 1<\/a> (Working Draft)<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/columns\" rel=\"noopener\">MDN Documention<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support\">Browser support<\/h3>\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">10+<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">9+<\/td><td class=\"has-text-align-center\" data-align=\"center\">50+<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">11.5+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-1679a4e0\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">Android Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">iOS Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mobile<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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. The columns property will accept column-count, column-width, or both properties. Using both [&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":[],"acf":[],"jetpack-related-posts":[{"id":366713,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-auto-columns\/","url_meta":{"origin":178809,"position":0},"title":"grid-auto-columns","date":"July 15, 2022","format":false,"excerpt":"The grid-auto-columns CSS property is part of the CSS Grid Layout specification, specifying the size of the grid columns that were created without having an explicit size. In other words, this property sets the size of implicit columns and any other columns that have not been explicitly sized in the\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":178790,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-count\/","url_meta":{"origin":178809,"position":1},"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":178795,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-width\/","url_meta":{"origin":178809,"position":2},"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":322541,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-rule-style\/","url_meta":{"origin":178809,"position":3},"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":[]},{"id":178807,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-fill\/","url_meta":{"origin":178809,"position":4},"title":"column-fill","date":"August 14, 2014","format":false,"excerpt":"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\u2026","rel":"","context":"With 4 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":178809,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/178809"}],"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=178809"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/178809\/revisions"}],"predecessor-version":[{"id":323405,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/178809\/revisions\/323405"}],"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=178809"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=178809"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}