Html Question posted in
Some basic documentation can be found here.

Html – How do I have a child element's height even across cards with CSS only?

EDIT: Updating to clarify that this doesn’t need to use flex and looks like grid/subgrid is the direction to go. My example uses flex because that’s what I was familiar with.

How do I, with CSS only, get the title (blue) box to match the height of the biggest title box in the row. The red box should then fill the rest of the space and the stat cards will evenly fill the red box.

Current Layout
Current Layout

Desired Layout
Desired Layout

I’ve seen solutions that use JavaScript, but would like to avoid that if possible. The "Desired Layout" screenshot is using a fixed height on the title box to demonstrate.

body {
  background-color: #454545;
  color: #fafafa;
}

.cards {
  display: flex;
  gap: 2rem;
}

.card {
  display: flex;
  flex-direction: column;
  width: 300px;
  background-color: green;
  padding: 1em;
  &__title {
    background-color: blue;
    //height: 100px;
    padding: 0 1em;
  }
  &__content {
    height: 100%;
    background-color: red;
    padding: 1em;
  }
}

.stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: grey;
  padding: 0 1em;
  min-width: 145px;
  height: 100%;
}
<div class="cards">
  <div class="card">
    <div class="card__title">
      <h3>Title</h3>
    </div>
    <div class="card__content">
      <div class="stats">
        <div class="stat">
          <div class="stat__title">
            <h4>Stat 1</h4>
          </div>
          <div class="stat__content">
            <p>Content</p>
          </div>
        </div>
        <div class="stat">
          <div class="stat__title">
            <h4>Stat 2</h4>
          </div>
          <div class="stat__content">
            <p>Content</p>
          </div>
        </div>
        <div class="stat">
          <div class="stat__title">
            <h4>Stat 3</h4>
          </div>
          <div class="stat__content">
            <p>Content</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card__title">
      <h3>TItle lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
    </div>
    <div class="card__content">
      <div class="stats">
        <div class="stat">
          <div class="stat__title">
            <h4>Stat 1</h4>
          </div>
          <div class="stat__content">
            <p>They're just warming up!</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card__title">
      <h3>Title</h3>
    </div>
    <div class="card__content">
      <div class="stats">
        <div class="stat">
          <div class="stat__title">
            <h4>Stat 1</h4>
          </div>
          <div class="stat__content">
            <p>Content</p>
          </div>
        </div>
        <div class="stat">
          <div class="stat__title">
            <h4>Stat 2</h4>
          </div>
          <div class="stat__content">
            <p>Content</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Code Pen: https://codepen.io/Maynards/pen/NWJYvzq

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    As a few have pointed out, using grid is the way to go. I was able to achieve the desired result using subgrid 👍. Browser support seems to be pretty good now for subgrid, so I'll be using that.

    * {
  box-sizing: border-box;
}

body {
  background-color: #454545;
  color: #fafafa;
}

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  max-width: 1080px;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: auto / span 2;
  gap: 0;
  background-color: green;
  padding: 1em;
}

.card__title {
  background-color: blue;
  padding: 0 1em;
}

.card__content {
  background-color: red;
  padding: 1em;
}

.stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: grey;
  padding: 0 1em;
  min-width: 145px;
  height: 100%;
}
    <div class="cards">
  <div class="card">
    <div class="card__title">
      <h3>Title</h3>
    </div>
    <div class="card__content">
      <div class="stats">
        <div class="stat">
          <div class="stat__title">
            <h4>Stat 1</h4>
          </div>
          <div class="stat__content">
            <p>Content</p>
          </div>
        </div>
        <div class="stat">
          <div class="stat__title">
            <h4>Stat 2</h4>
          </div>
          <div class="stat__content">
            <p>Content</p>
          </div>
        </div>
        <div class="stat">
          <div class="stat__title">
            <h4>Stat 3</h4>
          </div>
          <div class="stat__content">
            <p>Content</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card__title">
      <h3>Title long lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
    </div>
    <div class="card__content">
      <div class="stats">
        <div class="stat">
          <div class="stat__title">
            <h4>Stat 1</h4>
          </div>
          <div class="stat__content">
            <p>They're just warming up!</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card__title">
      <h3>Title</h3>
    </div>
    <div class="card__content">
      <div class="stats">
        <div class="stat">
          <div class="stat__title">
            <h4>Stat 1</h4>
          </div>
          <div class="stat__content">
            <p>Content</p>
          </div>
        </div>
        <div class="stat">
          <div class="stat__title">
            <h4>Stat 2</h4>
          </div>
          <div class="stat__content">
            <p>Content</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card__title">
      <h3>Title lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
    </div>
    <div class="card__content">
      <div class="stats">
        <div class="stat">
          <div class="stat__title">
            <h4>Stat 1</h4>
          </div>
          <div class="stat__content">
            <p>They're just warming up!</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

    Thank you everyone!


  2. 0

    What type of layout design do you want ?

    Login or Signup to reply.
  3. 0

    You can either give it a fixed height or use css grid.

    Login or Signup to reply.
  4. 0

    something like that ?

    * { box-sizing: border-box;  }
.contener_1 {
  display         : flex;
  flex-direction  : row;
  gap             : .6rem;
  }
.contener_2 {
  display         : flex;
  flex-direction  : column;
  justify-content : flex-end;
  width           : 30em;
  gap             : 0;
  }
.contener_2 > div {
  border       : 10px lightcoral solid;
  padding      : .7rem;
  }
.contener_2 > div:first-of-type {
  flex-grow    : 1;
  border-color : lightblue;
  }
.contener_2 > div:not(:first-of-type) {
  height       : 10em;
  }
    <div class="contener_1">
  <div class="contener_2">
    <div><h4>Stat 1</h4><p>Content</p></div>
    <div><h4>Stat 2</h4><p>Content</p></div>
    <div><h4>Stat 3</h4><p>Content</p></div>
  </div>
  <div class="contener_2">
    <div><h3>TItle lorem ipsum dolor sit amet, consectetur adipiscing elit</h3></div>
    <div><h4>Stat 1</h4><p>They're just warming up!</p></div>
  </div>
  <div class="contener_2">
    <div><h4>Title</h4></div>
    <div><h4>Stat 1</h4><p>Content</p></div>
    <div><h4>Stat 2</h4><p>Content</p></div>      
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search