{"id":1810,"date":"2016-03-04T12:56:07","date_gmt":"2016-03-04T18:56:07","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1810"},"modified":"2016-03-04T12:56:07","modified_gmt":"2016-03-04T18:56:07","slug":"create-columns-easily-with-css3s-column-count","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/create-columns-easily-with-css3s-column-count\/","title":{"rendered":"Create Columns Easily with CSS3’s Column-Count"},"content":{"rendered":"

CSS3’s column-count property makes it easy for you to turn your content into columns with only one line of CSS and no extra HTML markup.<\/p>\n

Let’s say you have a div made up of a few paragraphs, like this:<\/p>\n

\"columns1\"<\/p>\n

If you want to spread that content out across three adjacent columns, you can do it manually by creating three divs and styling them to float or display inline, OR you can use CSS3’s column-count property, like this:<\/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. -webkit-column-count:<\/span> 3<\/span>;<\/span><\/div><\/li>\n
  3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    \"columns2\"<\/p>\n

    The column-count property isn’t supported by many browsers, so it should be used with the appropriate prefixes. There are also other properties associated with column-count to help you customize your columns, including column-gap and column-rule. Column-gap will add space in between your columns:<\/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. -webkit-column-gap:<\/span> 50px<\/span>;<\/span><\/div><\/li>\n
    3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

      \"columns3\"
      \nColumn-rule adds a rule in between your columns to separate them:<\/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. -webkit-column-rule:<\/span> 2px<\/span> outset<\/span> #000<\/span>;<\/span><\/div><\/li>\n
      3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

        \"columns4\"<\/p>\n

        CSS3’s column-count property is easy to use and versatile, making it the best option for creating columns using CSS and HTML.<\/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 easy for you to turn your content into columns with only one line of CSS and no extra HTML markup.<\/p>\n

        Let’s say you have a div made up of a few paragraphs, like this:<\/p>\n<\/p>\n

        If you want […]<\/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":[174,1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1810"}],"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=1810"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1810\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1810"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1810"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}