CODEWITHSUNDEEP
htmlcsscss-grid
Brad
Brad

Reputation: 479

CSS Grid - Design not equal heights on certain divs

I have a CSS grid but I am struggling to make the layout fit.

As you can see below, all is correct, however, I want 'Item 1" and "Item 6" to be the same height so it all runs fluidly.

 .grid > div {background:red;border:2px solid blue;}
 .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 10px;
  }
  .span-col-4{grid-column: span 4 / auto;}
  .span-row-2{grid-row: span 2 / auto;}
  .span-row-4{grid-row: span 4 / auto;}
<div class="grid">
  <div class="span-row-2">Item 1</div>
  <div class="span-row-4">Item 2</div>
  <div>Item 3</div>
  <div class="span-row-4">Item 4</div>
  <div>Item 5</div>
  <div class="span-row-2">Item 6</div>
  <div class="span-row-2">Item 7</div>
  <div class="span-col-4">Item 8</div>
</div>

Upvotes: 2

Views: 2135

Answers (2)

Temani Afif
Temani Afif

Reputation: 272866

Consider more rows and define a the height of rows to make sure they stay equal:

.grid>div {
  background: red;
  border: 2px solid blue;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows:1fr;
  grid-gap: 10px;
}

.span-col-4 {
  grid-column: span 4;
}

.span-row-2 { grid-row: span 2;}
.span-row-3 { grid-row: span 3;}
.span-row-4 { grid-row: span 4;}
.span-row-5 { grid-row: span 5;}
.span-row-6 { grid-row: span 6;}
<div class="grid">
  <div class="span-row-3">Item 1</div>
  <div class="span-row-6">Item 2</div>
  <div class="span-row-2">Item 3</div>
  <div class="span-row-6">Item 4</div>
  <div class="span-row-2">Item 5</div>
  <div class="span-row-3">Item 6</div>
  <div class="span-row-2">Item 7</div>
  <div class="span-col-4 span-row-2">Item 8</div>
</div>

Upvotes: 2

Shashank Shah
Shashank Shah

Reputation: 2167

You can apply min-height css 

.span-row-2 {
    grid-row: span 2 / auto;
    min-height: 46px;
}

'Item 1" and "Item 6" height will be the same but make sure wherever you apply span-row-2 the height will be applied. Better use different class name.

Upvotes: 2

Related Questions