{"id":178799,"date":"2014-08-14T14:11:54","date_gmt":"2014-08-14T21:11:54","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=178799"},"modified":"2017-12-21T08:35:06","modified_gmt":"2017-12-21T15:35:06","slug":"column-span","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-span\/","title":{"rendered":"column-span"},"content":{"rendered":"<p>In a multi-column layout, you can make elements expand across the columns with <code>column-span<\/code>.<\/p>\n<pre rel=\"css\" class=\" language-css\"><code class=\" language-css\">h2 {\r\n -webkit-column-span: all;\r\n         column-span: all;\r\n}<\/code><\/pre>\n<p>Assign <code>column-span<\/code> to an element inside of the multi-column layout to make it a <em>spanning element<\/em>. The multi-column layout will resume with the next non-spanning element.<\/p>\n<p>The value of <code>column-span<\/code> can either be <code>all<\/code> or <code>none<\/code>.<\/p>\n<p>Set an element with <code>column-span: all<\/code> to make it span the columns.<\/p>\n<p>The value <code>none<\/code> for the property is the kill switch for a spanning element. You might use this when working with media queries to tell the spanning element to stop spanning.<\/p>\n<p data-height=\"504\" style=\"height: 504px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"NXRqNR\" data-default-tab=\"css,result\" data-user=\"css-tricks\" data-embed-version=\"2\" data-pen-title=\"column-span example\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/team\/css-tricks\/pen\/NXRqNR\/\" rel=\"noopener\">column-span example<\/a> by CSS-Tricks (<a href=\"https:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Related Properties<\/h3>\n<ul>\n<li><a href=\"\/almanac\/properties\/c\/columns\">columns<\/a><\/li>\n<li><a href=\"\/almanac\/properties\/c\/column-count\">column-count<\/a><\/li>\n<li><a href=\"\/almanac\/properties\/c\/column-fill\">column-fill<\/a><\/li>\n<li><a href=\"\/almanac\/properties\/c\/column-gap\">column-gap<\/a><\/li>\n<li><a href=\"\/almanac\/properties\/c\/column-rule\">column-rule<\/a><\/li>\n<li><a href=\"\/almanac\/properties\/c\/column-width\">column-width<\/a><\/li>\n<\/ul>\n<h3>Additional Resources<\/h3>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/column-span\" rel=\"noopener\">MDN Docs<\/a><\/li>\n<li><a href=\"http:\/\/www.w3.org\/TR\/css3-multicol\/#spanning-columns\" rel=\"noopener\">CSS3 Spec<\/a><\/li>\n<li><a href=\"http:\/\/caniuse.com\/#feat=multicolumn\" rel=\"noopener\">Can I Use<\/a><\/li>\n<\/ul>\n<h3>Browser Support<\/h3>\n<p><strong>Firefox<\/strong> does not support this <code>column-span<\/code>, but there are <a href=\"https:\/\/css-tricks.com\/forums\/topic\/any-ideas-for-firefox-column-span-solution\/\">interesting workarounds<\/a>.<\/p>\n<p>Here&#8217;s the support for Multi-column layout in general though:<\/p>\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=multicolumn\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"a yep-nope yep-nope-partial\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">127<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">128<\/span><\/td><td class=\"y yep\" title=\"IE - \"><span class=\"caniuse-agents-version version\">10<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">12<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">10<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"a yep-nope yep-nope-partial\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Android - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">10.0-10.2<\/span><\/td><\/tr><\/table><\/div><\/div>\n<p>Don&#8217;t forget your prefixes!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 column-span can either be all [&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":374225,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-column\/","url_meta":{"origin":178799,"position":0},"title":"grid-column","date":"October 17, 2022","format":false,"excerpt":"The grid-column CSS property is a shorthand that specifies the column grid lines where a grid item starts and ends in a grid layout in one declaration. .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); } .grid-item:nth-child(2) { grid-column: 3 \/ 5; \/* Starts on the third column line and ends\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":372551,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-column-start\/","url_meta":{"origin":178799,"position":1},"title":"grid-column-start","date":"August 25, 2022","format":false,"excerpt":"The grid-column-start CSS property is part of the CSS Grid Layout specification, used to indicate the column grid line where a grid item starts in a grid layout. This property \u2014 among other line-based placement grid properties \u2014 controls the size of a grid item and where it sits on\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":372680,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-column-end\/","url_meta":{"origin":178799,"position":2},"title":"grid-column-end","date":"August 25, 2022","format":false,"excerpt":"The grid-column-end CSS property is part of the CSS Grid Layout specification, used to indicate the column grid line where a grid item ends in a grid layout. This property \u2014 among other line-based placement grid properties \u2014 controls the size of a grid item and where it sits on\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":322545,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-rule-width\/","url_meta":{"origin":178799,"position":3},"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":178807,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-fill\/","url_meta":{"origin":178799,"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":178809,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/columns\/","url_meta":{"origin":178799,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/178799"}],"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=178799"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/178799\/revisions"}],"predecessor-version":[{"id":264173,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/178799\/revisions\/264173"}],"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=178799"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=178799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}