<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css multi-colunmns can be used on elements not only text</title>
<style>
div{
width:75px;
height:75px;
border:1px solid;
}
.box-1{
background:gray;
opacity:0.4;
columns: 8 auto;
column-gap:0;
}
.box-2{
background:gray;
opacity:0.4;
height:70px;
columns: 8 auto;
column-gap:0px;
}
.box-3{
width:500px;
height:auto;
background:rgba(0,0,255,0.4);
columns:auto 241px;
border:1px solid;
}
.height-example{
width:auto;
height:auto;
overflow:auto;
}
.first{
background:yellow;
}
.second{
background:purple;
}
.third{
background:white;
}
.empty-boxes{
border-top:1px solid black;
background:rgba(0,90,180,0.3);
columns:3 auto;
}
.b{
width:250px;
height:140px;
border:4px dotted white;
border-radius:8px;
margin:20px auto;/*margin collapsing*/
display:table-caption;/*BFC property to end margin collapsing*/
}
</style>
</head>
<body>
<p>
<h2>multiple columns layout:</h2>multi-columns properties mostly are used with elements rendering text content in order to render the text in a way similar to newspapers..we all know this.i thought about making some use of these properties to produce a layout-mode since the concept suggests so for text content.the results was a bit interesting!.
<p>below is a multi-columns box that has block-level elements inside it.the box width and height is at it's default value:</p>
</p>
<section class="box-1">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="first"></div>
<div class="second"></div>
</section>
<p class="box-1-dsc">
above we have:
<ul>
<li><code>width</code> and <code>height</code> are at their defaults (unset).</li>
<li><code>columns:8 auto;</code></li>
<li><code>column-gap:0px;</code></li>
<li>rendered boxes <code>display</code> is at default which is block.(inline and inline-block do not work with this layout-mode)</li>
</ul>
in order to adjust the space between the colored boxes i ndeed to change the multiple-columns box width (changing the width property value or simply change the browser width) because <code>column-gap</code> has no effect here.
notice the flexibility of the small boxes when changing the multi-columns box width to smaller values.hence it is always good to have the containing multi-columns box <code>width</code> value set to it's max value so that the space between the boxes will not emerge again.
<p>notice that <code>column-count</code> value is the same as the number of the rendered elements inside the multi-columns box.this number should always be equal to the number of the rendered elements or it's division number withe zero remainder.otherwise the results will be very unexpected.for example:
<p>if we have 8 boxes rendered then i would use:<pre>
<code>column-count:8;</code>-boxes rendered in one row (8 / 8 = 1)
<code>column-count: 4;</code>-boxes rendered in two rows (8 / 4 = 2)
<code>column-coumt:2;</code>-boxes rendered in three rows (8 / 2 = 3)
<code>column-count:1</code>-boxes rendered in eight rows. (8 / 1 = 8)
</pre>
so the result is a division by zero remainder number.the same is with odd number of boxes
</p>
</p>
</p>
<h3>Specifying height for the multi-columns box:</h3>
<p><code>height</code> value should be high enough to contain the boxes.otherwise the results are unexpected:</p>
<div class="height-example">
<section class="box-2">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="first"></div>
<div class="second"></div>
</section>
</div>
<p><code>height</code> value for the multi-columns containing box above is 70px only</p>
<p><h3>using <code>column-width</code>:</h3> <p></p>using <code>column-width</code> is no different than <code>column-count</code> because <code>column-width</code> tells the browser: hi..give me one column every 200px for example.the same is happening with <code>column-count</code> "give me 2 columns in this multi-columns box.</p>
<section class="box-3">
<div class="first"></div>
<div class="second"></div>
</section>
<p><h3>Empty boxes example using multiple columns concept with block elements:</h3></p>
<section class="empty-boxes">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</section>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.