{"id":2474,"date":"2018-11-05T18:01:10","date_gmt":"2018-11-05T23:01:10","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=2474"},"modified":"2018-11-05T18:01:27","modified_gmt":"2018-11-05T23:01:27","slug":"html-css-how-to-use-column-count-to-automatically-divide-text-into-columns","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/11\/05\/html-css-how-to-use-column-count-to-automatically-divide-text-into-columns\/","title":{"rendered":"HTML & CSS: How to use column-count to automatically divide text into columns"},"content":{"rendered":"

Let’s say I have a project where I want to print all numbers from 1 to 100 in a web page. For this example, I am using the the ZeroCool problem where I print “Zero” for all multiples of 3, “Cool” for all multiples of 5, and “ZeroCool” for all numbers that are a multiple of 3 and 5. It is easy enough to print each number on its own row, but then I end up with 100 rows, which makes the content scroll. For example:<\/p>\n

\"\"<\/p>\n

Here is the CSS used to create the styling for this 100 row tall table. Notice the white table is already 600px wide:<\/p>\n

#output-container {\r\n  margin: 0px 50px 70px 50px;\r\n  width: 600px;\r\n  border: 1px solid #eee;\r\n  background-color: #fff;\r\n  padding: 40px 0px 40px 40px;\r\n}<\/pre>\n
The HTML for this container is a simple empty div. For example:<\/p>\n
<div id=\"output-container\"><\/div><\/pre>\n
Now if I don’t want to see my text content to be so tall (100 rows) I can use the CSS3 property called “column-count” which will automatically divide my text up into neat columns. For example, I just add this line to my #output-container CSS:<\/p>\n
column-count: 4;<\/p>\n
The output is now transformed:<\/p>\n
\"\"<\/p>\n
Along with column-count, we can also use a CSS property called “column-gap”:<\/p>\n
column-gap: 10px;<\/p>\n
Here is the updated CSS:<\/p>\n
#output-container {\r\n  margin: 0px 50px 70px 50px;\r\n  width: 600px;\r\n  column-count: 4;\r\n  column-gap: 10px;\r\n  border: 1px solid #eee;\r\n  background-color: #fff;\r\n  padding: 40px 0px 40px 40px;\r\n}<\/pre>\n
You can have as many or few columns as you want. The height of the box will expand or contract to accommodate automatically, but the width of the box will need to be set wide enough if you want to accommodate more columns as the width doesn’t expand automatically.\u00a0 For example, if you want 6 columns:<\/p>\n
\"\"<\/p>\n
In summary: the CSS property column-count<\/strong> works great for breaking up chunks of text into columns.<\/p>\n
div {\r\n   -webkit-column-count: 3; \/* Chrome, Safari, Opera *\/\r\n   -moz-column-count: 3; \/* Firefox *\/\r\n   column-count: 3;\r\n\t\r\n   -webkit-column-gap: 40px; \/* Chrome, Safari, Opera *\/ \r\n   -moz-column-gap: 40px; \/* Firefox *\/ \r\n   column-gap: 40px; \r\n}<\/pre>\n
For more information about the CSS3 column-count property, see:
\nhttps:\/\/www.w3schools.com\/cssref\/css3_pr_column-count.asp<\/a>
\nhttps:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/column-count<\/a>
\nhttps:\/\/css-tricks.com\/almanac\/properties\/c\/column-count\/<\/a><\/p>\n
The ZeroCool project can be seen on my Github page here:
\nhttps:\/\/github.com\/chris-relaxing\/zerocool<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Let’s say I have a project where I want to print all numbers from 1 to 100 in a web page. For this example, I am using the the ZeroCool problem where I print “Zero” for all multiples of 3, “Cool” for all multiples of 5, and “ZeroCool” for all numbers that are a multiple … Continue reading HTML & CSS: How to use column-count to automatically divide text into columns<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[104],"tags":[184,185,10,105],"class_list":["post-2474","post","type-post","status-publish","format-standard","hentry","category-html-css","tag-column-count","tag-column-gap","tag-css","tag-html"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=2474"}],"version-history":[{"count":9,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2474\/revisions"}],"predecessor-version":[{"id":2486,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2474\/revisions\/2486"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=2474"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=2474"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=2474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}