CSS html grid layout

Question

I'm trying to create a grid like this:

All items can vary in height
The item with the most height defines the height of the row
I don't want to wrap each row in a column div, if possible, to make my code cleaner.

What I have tried:

Using floats, but this won't be possible because I would still have to clearfix each row

Thanks

the only way I can think of solving this is by using Bulma.io, supports behaviour by using flexbox. Bootstrap also solves this problem, I'll try to dig deeper in their code and find a solution in native CSS — Seif Sayed
– Seif Sayed, Commented Apr 9, 2017 at 11:09
@SeifSayed Oke, cool I have never heard of Bulma.io it looks promising. Thanks for trying to help me out — randomKek
– randomKek, Commented Apr 10, 2017 at 12:08

Nenad Vracar · Accepted Answer · 2017-04-28 08:31:26Z

1

You can create this layout using Flexbox. You just need to set flex-wrap: wrap on flex-container so flex-items break to new row and tallest item will set height of that row.

.content {
  display: flex;
  flex-wrap: wrap;
}
.content > div {
  background: red;
  flex: 0 0 calc(33.33% - 20px);
  margin: 10px;
}

<div class="content">
  <div style="height: 100px">Div</div>
  <div style="height: 150px">Div</div>
  <div style="height: 90px">Div</div>
  <div style="height: 80px">Div</div>
  <div style="height: 70px">Div</div>
  <div style="height: 120px">Div</div>
  <div style="height: 100px">Div</div>
</div>

answered Apr 28, 2017 at 8:31

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Huginn · Accepted Answer · 2017-04-29 06:41:53Z

I believe you can achieve what you're looking for using CSS columns-count, column-fill:auto; and the variations of break-inside. See my code below for example:

#row {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -moz-column-fill: auto; /* Firefox */
    column-fill: auto;
    
    margin-bottom: 2em;
}

#row p { 
    margin: 0; 
    padding: 0 0 10px 0;
    page-break-inside: avoid; /* For Firefox. */
    -webkit-column-break-inside: avoid; /* For Chrome & friends. */
    break-inside: avoid; /* For standard browsers like IE. :-) */
}

<div id="row">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lacus lobortis, ornare tellus eu, placerat diam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lacus lobortis, ornare tellus eu, placerat diam. Vestibulum ultricies ante lacus, non vehicula nulla pharetra sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="row">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lacus lobortis, ornare tellus eu, placerat diam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lacus lobortis, ornare tellus eu, placerat diam. Vestibulum ultricies ante lacus, non vehicula nulla pharetra sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Collectives™ on Stack Overflow

CSS html grid layout

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related