I need to get rid of gaps between elements in my column layout. I can use the latest css3 as the site is targeted at modern browsers/devices but I need to avoid a javascript solution such that the page as delivered from the server doesn't need to be re-rendered based on the width of the client.
Using flexbox, css columns, and other tricks I need to coax a pinterest-like layout. (Pinterest uses javascript and absolute positioning for their layout, it doesn't even render with js turned off.) The site has boxes with a known width but variable height. The number of columns needs to vary based on browser width. (I can do this via media queries if I know what css attribute to change.) Here's what this looks like: via
Also note that I can't just increase the height of the containers to fill the empty space. I want to bring the item below it UP, not make all the heights match. (So stretching items 1, 3, and 4 in the picture above is NOT what I want.)
Things I've tried:
CSS 3 columns. This looks great, but the items are in the wrong order, with the second item being under the first. If this can be changed to a different order such that they go left-to-right, great!
Flexbox various flexbox configurations, I've tried just about every setting that I was able to change.
Javascript. Yes, I know I can manually create columns and re-render them on resize. I'm looking to avoid an expensive re-render operation that requires a manual balancing of columns and display. I can resort to this for older browsers that don't support a css3 solution. I'm also wanting to avoid manually positioning all of the items. Gross.
I've put a comment link to JSFiddle because I can't put it in here as "links to jsfiddle require code".
To override this behavior, apply align-content: flex-start to the container. When you're working in a single-line flex container (i.e., flex-wrap: nowrap ), the properties to use to distribute space along the cross axis are align-items and align-self .
box-content to width:100%; will force that element to fill the space.
display. This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children. Note that CSS columns have no effect on a flex container.
check this demo. This is pure css3 masonry effect. http://w3bits.com/labs/css-masonry/
spinet from above link
body {
font: 1em/1.67 'Open Sans', Arial, Sans-serif;
margin: 0;
background: #e9e9e9;
}
.wrapper {
width: 95%;
margin: 3em auto;
}
.masonry {
margin: 1.5em 0;
padding: 0;
-moz-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
column-gap: 1.5em;
font-size: .85em;
}
.item {
display: inline-block;
background: #fff;
padding: 1em;
margin: 0 0 1.5em;
width: 100%;
height: 150px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-shadow: 2px 2px 4px 0 #ccc;
}
.item.black{
background-color: #000; height:200px;}
.item.blue{
background-color:blue; height:250px;}
.item.green{
background-color:green; height:300px;}
@media only screen and (min-width: 400px) {
.masonry {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (min-width: 700px) {
.masonry {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media only screen and (min-width: 900px) {
.masonry {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media only screen and (min-width: 1100px) {
.masonry {
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}
}
@media only screen and (min-width: 1280px) {
.wrapper {
width: 1260px;
}
}
<div class="masonry">
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="item black">...</div>
<div class="item blue">...</div>
<div class="item green">...</div>
<div class="item black">...</div>
<div class="item blue">...</div>
<div class="item green">...</div>
<div class="item black">...</div>
<div class="item blue">...</div>
<div class="item green">...</div>
</div>
Hope this is helpful to you.
You can achieve it by flexbox:
HTML:
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
CSS:
.container {
max-width: 900px;
height: 470px;
display: flex;
flex-flow: column wrap;
align-items: flex-start;
}
.item {
height: 150px;
}
http://codepen.io/asim-coder/pen/vXzKgg
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With