CSS Grid: auto height including 1 column with multiple content blocks?

user_10559581 0
Viewed 269

I've checked out https://gridbyexample.com/example and have been trying myself to make this work, but can't get it to fit right. Check out the attached image for what I'm trying to do. Is there an easy CSS-Grid way to do this? enter image description here

What I have so far for CSS:

.main-container {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
}

.box {
  height: min-content;
  
}

/* Targeting the 2nd content block in column 3 */
.box.d {
  grid-column: 3/6;
}

What I have so far for HTML:

<div class="main-container">
  <div class=-"box a">Content Here</div>
  <div class=-"box b">Content Here</div>
  <div class=-"box c">Content Here</div>
  <div class=-"box d">Content Here</div>
  <div class=-"box e">Content Here</div>
  <div class=-"box f">Content Here</div>
<div>
css-grid css html
1 Answers

I think this is what you're looking for:

codepen

.main-container {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  grid-template-rows: 2fr 2fr 1fr;
  background: #ccc;
  padding: 20px;
  width: 1200px;
}

.box {
  background: #fff;
  padding: 20px;
}

.box.d {
    grid-area: 2 / 3 / 4 / 3;
}
.box.b {
    grid-area: 1 / 2 / 3 / 3;
}
<div class="main-container">
  <div class="box a">Content Here</div>
  <div class="box b">Content Here</div>
  <div class="box c">Content Here</div>
  <div class="box d">Content Here</div>
  <div class="box e">Content Here</div>
  <div class="box f">Content Here</div>
<div>

But it sometimes depends on the content of the columns.

user_18896070
Related