Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Multi Column Content Layout Grid Tutorial

Published :
Author :
Adam Khoury
Learn to use the CSS Multi Column Layout properties to create column grid layouts with an automatic content spill over feature. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div#multi_column { width: 100%; margin: 0px auto; -webkit-column-count: 3; -webkit-column-rule: 2px solid #000; -moz-column-count: 3; -moz-column-rule: 2px solid #000; column-count: 3; column-rule: 2px solid #000; } div#multi_column > div { margin-bottom: 20px; padding:16px; border: #000 1px solid; } div#multi_column > div:nth-child(2n+0) { background: #CAE4FF; } div#multi_column > div:nth-child(2n+1) { background: #A4D1FF; } </style> <script> function sentence(num){ var result = "", mysentence = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. "; for(var i = 0; i < num; i++){ result += mysentence; } return result; } </script> </head> <body> <h1 style="text-align:center;">CSS3 Multi-Column Layout Web Design Tutorial</h1> <div id="multi_column"> <div>1. <script>document.write(sentence(3));</script></div> <div>2. <script>document.write(sentence(8));</script></div> <div>3. <script>document.write(sentence(12));</script></div> <div>4. <script>document.write(sentence(7));</script></div> <div>5. <script>document.write(sentence(14));</script></div> <div>6. <script>document.write(sentence(6));</script></div> <div>7. <script>document.write(sentence(5));</script></div> <div>8. <script>document.write(sentence(9));</script></div> <div>9. <script>document.write(sentence(2));</script></div> <div>10. <script>document.write(sentence(11));</script></div> <div>11. <script>document.write(sentence(12));</script></div> <div>12. <script>document.write(sentence(8));</script></div> </div> </body> </html>