{"id":1920,"date":"2015-09-26T23:48:51","date_gmt":"2015-09-26T21:48:51","guid":{"rendered":"http:\/\/codingexplained.com\/?p=1920"},"modified":"2017-06-11T19:21:53","modified_gmt":"2017-06-11T17:21:53","slug":"multi-column-lists-with-css3","status":"publish","type":"post","link":"https:\/\/codingexplained.com\/coding\/front-end\/css\/multi-column-lists-with-css3","title":{"rendered":"Multi-column Lists with CSS3"},"content":{"rendered":"

Before CSS3, it was quite a struggle to have an ordered or unordered list span multiple columns. In fact, people often resorted to either rendering the lists in columns from the server (if possible) or using CSS hacks. Luckily this is no longer necessary in CSS3, because you can easily accomplish this with a new column-count<\/span> CSS style. Consider the example below.<\/p>\n

<ul id=\"example-list\">\r\n    <li>1<\/li>\r\n    <li>2<\/li>\r\n    <li>3<\/li>\r\n    <li>4<\/li>\r\n    <li>5<\/li>\r\n    <li>6<\/li>\r\n    <li>7<\/li>\r\n    <li>8<\/li>\r\n    <li>9<\/li>\r\n<\/ul><\/code><\/pre>\n
Under normal circumstances, this list would display vertically with list items under one another. To display the above list in three columns, simple apply the following style.<\/p>\n
#example-list {\r\n    column-count: 3;\r\n}<\/code><\/pre>\n
With that simple CSS rule, you can easily define how many columns you want the list to contain. The result in this example is that the list items will be evenly divided into three columns. To add support for older browsers, we can add specific prefixes for browsers, like the following.<\/p>\n
#example-list {\r\n    -webkit-column-count: 3;\r\n    -moz-column-count: 3;\r\n    column-count: 3;\r\n}<\/code><\/pre>\n
That is all it takes to display a list in multiple columns in CSS3.<\/p>\n","protected":false},"excerpt":{"rendered":"
Before CSS3, it was quite a struggle to have an ordered or unordered list span multiple columns. In fact, people often resorted to either rendering the lists in columns from the server (if possible) or using CSS hacks. Luckily this is no longer necessary in CSS3, because you can easily accomplish this with a new… read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[123],"tags":[72],"series":[],"jetpack_publicize_connections":[],"yoast_head":"\nMulti-column Lists with CSS3<\/title>\n<meta name=\"description\" content=\"Displaying a list in multiple columns in CSS3 is trivial. Learn how to display any list in multiple columns with just a single CSS rule.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codingexplained.com\/coding\/front-end\/css\/multi-column-lists-with-css3\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Multi-column Lists with CSS3\" \/>\n<meta property=\"og:description\" content=\"Displaying a list in multiple columns in CSS3 is trivial. Learn how to display any list in multiple columns with just a single CSS rule.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codingexplained.com\/coding\/front-end\/css\/multi-column-lists-with-css3\" \/>\n<meta property=\"og:site_name\" content=\"Coding Explained\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codingexplained\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codingexplained\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-26T21:48:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-06-11T17:21:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codingexplained.com\/wp-content\/uploads\/2015\/11\/codingexplained-fb-promote.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"444\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Bo Andersen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codingexplained\" \/>\n<meta name=\"twitter:site\" content=\"@codingexplained\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bo Andersen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codingexplained.com\/coding\/front-end\/css\/multi-column-lists-with-css3\",\"url\":\"https:\/\/codingexplained.com\/coding\/front-end\/css\/multi-column-lists-with-css3\",\"name\":\"Multi-column Lists with CSS3\",\"isPartOf\":{\"@id\":\"https:\/\/codingexplained.com\/#website\"},\"datePublished\":\"2015-09-26T21:48:51+00:00\",\"dateModified\":\"2017-06-11T17:21:53+00:00\",\"author\":{\"@id\":\"https:\/\/codingexplained.com\/#\/schema\/person\/e19c92ec991f571605f047cefeaa950d\"},\"description\":\"Displaying a list in multiple columns in CSS3 is trivial. Learn how to display any list in multiple columns with just a single CSS rule.\",\"breadcrumb\":{\"@id\":\"https:\/\/codingexplained.com\/coding\/front-end\/css\/multi-column-lists-with-css3#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codingexplained.com\/coding\/front-end\/css\/multi-column-lists-with-css3\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codingexplained.com\/coding\/front-end\/css\/multi-column-lists-with-css3#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codingexplained.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Multi-column Lists with CSS3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codingexplained.com\/#website\",\"url\":\"https:\/\/codingexplained.com\/\",\"name\":\"Coding Explained\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codingexplained.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/codingexplained.com\/#\/schema\/person\/e19c92ec991f571605f047cefeaa950d\",\"name\":\"Bo Andersen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codingexplained.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/28f5826f9d5d544b0c5e1ec321dfdfb8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/28f5826f9d5d544b0c5e1ec321dfdfb8?s=96&d=mm&r=g\",\"caption\":\"Bo Andersen\"},\"description\":\"I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!\",\"sameAs\":[\"https:\/\/codingexplained.com\",\"https:\/\/www.facebook.com\/codingexplained\",\"https:\/\/www.linkedin.com\/in\/ba0708\",\"https:\/\/twitter.com\/codingexplained\",\"https:\/\/www.youtube.com\/c\/codingexplained\"],\"url\":\"https:\/\/codingexplained.com\/author\/andy\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Multi-column Lists with CSS3","description":"Displaying a list in multiple columns in CSS3 is trivial. Learn how to display any list in multiple columns with just a single CSS rule.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codingexplained.com\/coding\/front-end\/css\/multi-column-lists-with-css3","og_locale":"en_US","og_type":"article","og_title":"Multi-column Lists with CSS3","og_description":"Displaying a list in multiple columns in CSS3 is trivial. Learn how to display any list in multiple columns with just a single CSS rule.","og_url":"https:\/\/codingexplained.com\/coding\/front-end\/css\/multi-column-lists-with-css3","og_site_name":"Coding Explained","article_publisher":"https:\/\/www.facebook.com\/codingexplained","article_author":"https:\/\/www.facebook.com\/codingexplained","article_published_time":"2015-09-26T21:48:51+00:00","article_modified_time":"2017-06-11T17:21:53+00:00","og_image":[{"width":1200,"height":444,"url":"https:\/\/codingexplained.com\/wp-content\/uploads\/2015\/11\/codingexplained-fb-promote.png","type":"image\/png"}],"author":"Bo Andersen","twitter_card":"summary_large_image","twitter_creator":"@codingexplained","twitter_site":"@codingexplained","twitter_misc":{"Written by":"Bo Andersen","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/codingexplained.com\/coding\/front-end\/css\/multi-column-lists-with-css3","url":"https:\/\/codingexplained.com\/coding\/front-end\/css\/multi-column-lists-with-css3","name":"Multi-column Lists with CSS3","isPartOf":{"@id":"https:\/\/codingexplained.com\/#website"},"datePublished":"2015-09-26T21:48:51+00:00","dateModified":"2017-06-11T17:21:53+00:00","author":{"@id":"https:\/\/codingexplained.com\/#\/schema\/person\/e19c92ec991f571605f047cefeaa950d"},"description":"Displaying a list in multiple columns in CSS3 is trivial. Learn how to display any list in multiple columns with just a single CSS rule.","breadcrumb":{"@id":"https:\/\/codingexplained.com\/coding\/front-end\/css\/multi-column-lists-with-css3#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codingexplained.com\/coding\/front-end\/css\/multi-column-lists-with-css3"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/codingexplained.com\/coding\/front-end\/css\/multi-column-lists-with-css3#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codingexplained.com\/"},{"@type":"ListItem","position":2,"name":"Multi-column Lists with CSS3"}]},{"@type":"WebSite","@id":"https:\/\/codingexplained.com\/#website","url":"https:\/\/codingexplained.com\/","name":"Coding Explained","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codingexplained.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/codingexplained.com\/#\/schema\/person\/e19c92ec991f571605f047cefeaa950d","name":"Bo Andersen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingexplained.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/28f5826f9d5d544b0c5e1ec321dfdfb8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/28f5826f9d5d544b0c5e1ec321dfdfb8?s=96&d=mm&r=g","caption":"Bo Andersen"},"description":"I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!","sameAs":["https:\/\/codingexplained.com","https:\/\/www.facebook.com\/codingexplained","https:\/\/www.linkedin.com\/in\/ba0708","https:\/\/twitter.com\/codingexplained","https:\/\/www.youtube.com\/c\/codingexplained"],"url":"https:\/\/codingexplained.com\/author\/andy"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3mJkW-uY","_links":{"self":[{"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/posts\/1920"}],"collection":[{"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/comments?post=1920"}],"version-history":[{"count":5,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/posts\/1920\/revisions"}],"predecessor-version":[{"id":2921,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/posts\/1920\/revisions\/2921"}],"wp:attachment":[{"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/media?parent=1920"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/categories?post=1920"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/tags?post=1920"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/series?post=1920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}