{"id":1997,"date":"2016-07-27T20:29:12","date_gmt":"2016-07-27T20:29:12","guid":{"rendered":"http:\/\/cssreset.com\/?p=1997"},"modified":"2016-07-27T20:29:12","modified_gmt":"2016-07-27T20:29:12","slug":"easily-create-responsive-columns-with-column-count","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/easily-create-responsive-columns-with-column-count\/","title":{"rendered":"Easily Create Responsive Columns with Column-Count"},"content":{"rendered":"

CSS3’s column-count property makes it unbelievable easy to create completely responsive columns without adding any extra markup to your HTML. Check out the paragraph below and see how easy it is to turn one block of text into 2 separate columns.<\/p>\n

\"Screen<\/p>\n

Here’s how the code should look:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. div{<\/span><\/div><\/li>\n
  2. column-count:<\/span> 2<\/span>;<\/span><\/div><\/li>\n
  3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    \"Screen<\/p>\n

    There are also some other CSS column properties that you can use to style your column-count columns, including column-width and column-gap. Column-width, naturally, defines the width of the columns you’ve dynamically created, while column-gap defines the space between the columns (this spacing is uniform no matter how many columns you decide to create). These properties don’t absolutely have to be defined, however, because they both have default values that will probably work well in most situations (see image above — these columns have default width and gap values).<\/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’s column-count property makes it unbelievable easy to create completely responsive columns without adding any extra markup to your HTML. Check out the paragraph below and see how easy it is to turn one block of text into 2 separate […]<\/p>\n

    Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":1999,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1997"}],"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=1997"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1997\/revisions"}],"predecessor-version":[{"id":2000,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1997\/revisions\/2000"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/1999"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1997"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1997"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1997"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}