CODEWITHSUNDEEP
htmlcss
Jack
Jack

Reputation: 53

Flexbox Equal Height Column

Current Look like this

.col-container {
  display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
}
.col {
 padding: 4rem;

    margin: 1rem 1rem 0rem 1rem;
    flex-basis: 25rem;
    flex-grow: 1;
    background-color: #191d2b;
}
<div class="col-container">
  <div class="col" style="background:orange">
    <h2>Column 1</h2>
    <p>Hello World</p>
  </div>

  <div class="col" style="background:yellow">
    <h2>Column 2</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>

  <div class="col" style="background:orange">
    <h2>Column 3</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
  </div>
</div>

Happy Monday,

I have a question, how to make an equal height column? when I have a lot of content it messed up the design. Could someone please suggest to me how to create an equal height column? Basically based on the content all the other column adjust their height dynamically but I want to let the width stay the same and on mobile, the width becomes 100%. To add more information, I am trying to create a responsive grid using the same height-width column using flexbox.

Upvotes: 5

Views: 3272

Answers (2)

Temani Afif
Temani Afif

Reputation: 272589

Use CSS grid for this:

.col-container {
  display: grid;
  grid-auto-rows:1fr; /* this will make sure the height is the same even after wrapping*/
  grid-template-columns:repeat(auto-fit,minmax(25rem,1fr));
}

.col {
  padding: 4rem;
  margin: 1rem 1rem 0rem 1rem;
  background-color: #191d2b;
}
<div class="col-container">
  <div class="col" style="background:orange">
    <h2>Column 1</h2>
    <p>Hello World</p>
  </div>

  <div class="col" style="background:yellow">
    <h2>Column 2</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>

  <div class="col" style="background:orange">
    <h2>Column 3</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
  </div>
</div>

Upvotes: 0

Joe DiBenedetto
Joe DiBenedetto

Reputation: 86

You would add align-items: stretch to .col-container. This will stretch all columns to fill the height of the parent.

This is a good reference for flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 5

Related Questions