â ī¸ Warning â ī¸ Deprecated Code! This video tutorial contains outdated code.
đĄ If you wish to update it, any AI assistant will update the code for you in seconds.
đĄ If you wish to update it, any AI assistant will update the code for you in seconds.
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>