{"id":1805,"date":"2015-08-31T16:15:27","date_gmt":"2015-08-31T16:15:27","guid":{"rendered":"http:\/\/cssreset.com\/?p=1805"},"modified":"2015-08-31T16:15:27","modified_gmt":"2015-08-31T16:15:27","slug":"cssmultiplecolumns","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/cssmultiplecolumns\/","title":{"rendered":"How to display multiple columns using Divs and CSS3"},"content":{"rendered":"

CSS3 has a really neat feature called multiple columns. Multiple columns are really great for splitting up text for a responsive website. They are just one of those things good web developers should use to cut down on unnecessary scripting, because the alternative is to uniquely position and style multiple <div> tags and separate the text yourself.<\/p>\n

Using multiple columns also offers far superior flexibility when designing a website. They allow customization of the style of borders in-between the columns, the amount of columns, and nearly everything else a web designer could possibly want to change with very little scripting.<\/p>\n

Here is a demo that shows how to set up a multiple column <div> and how to customize it.<\/p>\n

To begin, create a <div> tag with an id of \u201ccolumnContainer\u201d and fill it with some placeholder text.<\/p>\n

HTML:<\/p>\n

\"\"<\/p>\n

\u00a0Next specify a column count for #columnContainer in your CSS file, then add the equivalent versions for webkit based browsers and firefox.<\/p>\n

CSS:<\/p>\n

\"\"<\/p>\n

Result:<\/p>\n

\"\"<\/p>\n

That was so easy. With barely any CSS that created responsive, column divided text! The best part is how easily it can be customized from there.<\/p>\n

Multiple columns provides the functionality to style dividers in between the text in a similar fashion to CSS borders. Specify the width, consistency, and color of the divider to get a finished result. We\u2019ll also add another column to better show the column-rule\u2019s effect.<\/p>\n

Here is the updated CSS:<\/p>\n

\"\"<\/p>\n

Result:<\/p>\n

\"\"<\/p>\n

\u00a0Finally, multiple columns is able to update the spacing in between each column with another simple feature. Just specify a column-gap for the text to easily change that spacing.<\/p>\n

CSS:<\/p>\n

\u00a0\"\"<\/p>\n

Result:<\/p>\n

\"\"<\/p>\n

See how easy it is to create something beautiful in just a few minutes? It is a really nice addition to CSS which every developer should use when possible.<\/p>\n

Here is a link to the code: https:\/\/jsfiddle.net\/MorganMeliment\/hg3reu36\/<\/p>\n

Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

CSS3 has a really neat feature called multiple columns. Multiple columns are really great for splitting up text for a responsive website. They are just one of those things good web developers should use to cut down on unnecessary […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[61,6,36,7,8,11,43,1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1805"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1805"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1805\/revisions"}],"predecessor-version":[{"id":1806,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1805\/revisions\/1806"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1805"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1805"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}