CODEWITHSUNDEEP
csslayoutgrid
randomKek
randomKek

Reputation: 1128

CSS html grid layout

I'm trying to create a grid like this:

Grid

What I have tried:

Thanks

Upvotes: 0

Views: 184

Answers (2)

Huginn
Huginn

Reputation: 230

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>

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122087

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>

Upvotes: 1

Related Questions