Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Multi Column Content Layout Grid Tutorial

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>
thumb

CSS Videos

Responsive Dynamic Layouts

Media Queries Responsive Website Layout TutorialResponsive Web Design Made Simple CSS media Rule TutorialMobile Friendly Test Responsive Website Development Case StudyViewport Percentage Units CSS HTML Layout TutorialAuto Adjusting Stretch Fit Website Layout TutorialBackground Size Scale Stretch ImageMulti Column Content Layout Grid TutorialFlexbox Flexible Box Layouts Flex WebsiteGrid Layout CSS Tutorial and Documentation Reference