Height issue with 4 column grid alignment in css

Question

The problem is want to make even height for all columns, if i'm using various contents for each columns. I want to know how to fix the even height for 4 columns. I've tried to fix the height all columns with all the device models but some device would be aligned properly, rest of the devices not aligned. Can you please suggest me where I made mistake in my code?

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>NXT-255</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="row">
    <div class="header">
        <h1>This is test</h1>
        <p>description description description</p>
    </div>

    <div class="features">
        <div class="item">
            <h1>This is test</h1>
            <p>description description description</p>
        </div>
        <div class="item">
            <h1>This is test</h1>
            <p>description description description</p>
        </div>
        <div class="item">
            <h1>This is test</h1>
            <p>description description description</p>
        </div>
    </div>

</div>
</body1>
</html>

CSS:

div.header{
    float: left;
    min-height: 260px;
    background-color: gray;
    padding: 10px;
    width: 20%;
}
div.features{
    display: flex;
    min-height: 260px;
    padding: 10px;
    background-color: lightblue;
}

div.features .item{
    flex: 1;
    font-size: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 20%;
}
@media screen and (min-width: 920px) and (max-width: 1240px){
        div.header{
        float: left;
        min-height: 260px;
        background-color: yellow;
        padding: 10px;
        width: 33%;
            }
    div.features{
        display: flex;
        min-height: 260px;
        padding: 10px;
        background-color: lightblue;
            }

    div.features .item{
        flex: 1;
        font-size: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        width: 33%;
        }
    }

    @media screen and (min-width: 620px) and (max-width: 919px){
        div.header{
        float: left;
        min-height: 260px;
        background-color: gray;
        padding: 10px;
        width: 33%;
            }
    div.features{
        display: flex;
        min-height: 260px;
        padding: 10px;
        background-color: lightblue;
            }

    div.features .item{
        flex: 1;
        font-size: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        width: 33%;
        }
    }

@media screen and (min-width: 520px) and (max-width: 619px){
        div.header{
        float: left;
        min-height: 260px;
        background-color: green;
        padding: 10px;
        width: 33%;
            }
    div.features{
        display: flex;
        min-height: 260px;
        padding: 10px;
        background-color: lightblue;
            }

    div.features .item{
        flex: 1;
        font-size: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        width: 33%;
        }
    }

Possible duplicate of [CSS only solution to set MULTIPLE “same height” row sections on a responsive grid](https://stackoverflow.com/questions/44129135/css-only-solution-to-set-multiple-same-height-row-sections-on-a-responsive-gri) — Asons, Jun 18 '17 at 08:51
Another possible duplicate [Uniform auto items height in flexbox](https://stackoverflow.com/questions/44563785/uniform-auto-items-height-in-flexbox) — Asons, Jun 18 '17 at 08:54
Actually, the problem is how to wrap the content into block eventhough, the each block have various content. how to even the height for all blocks? — user8128789, Jun 21 '17 at 11:12
If i'm adding display:flex property, it will not work. I know how to wrap that based on break points but i don't want to align for each break points. — user8128789, Jun 21 '17 at 11:13
I hope that, if the blocks are wrap into one block, it will work. But I've two kind of blocks. I hope you already seen my code. For instance: "header" & "features" divs — user8128789, Jun 21 '17 at 11:18
Do you talk about the gray left should have same height as the 3 light blue? — Asons, Jun 21 '17 at 11:21
Setting `display: flex` on the `row` and remove `float` on the `header` does that, so is this want you want: https://jsfiddle.net/8xg9L698/ — Asons, Jun 21 '17 at 11:24
As comments can be deleted I posted that as an answer, and please accept it as well — Asons, Jun 21 '17 at 11:37

score 0 · Accepted Answer · answered Jun 21 '17 at 11:36

Setting display: flex on the row will solve that, and then you can remove float on the header as it doesn't do anything anymore.

div.row {
  display: flex;
}
div.header {
  min-height: 260px;
  background-color: gray;
  padding: 10px;
  width: 20%;
}

div.features {
  display: flex;
  min-height: 260px;
  padding: 10px;
  background-color: lightblue;
}

div.features .item {
  flex: 1;
  font-size: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 20%;
}

@media screen and (min-width: 920px) and (max-width: 1240px) {
  div.header {
    float: left;
    min-height: 260px;
    background-color: yellow;
    padding: 10px;
    width: 33%;
  }
  div.features {
    display: flex;
    min-height: 260px;
    padding: 10px;
    background-color: lightblue;
  }
  div.features .item {
    flex: 1;
    font-size: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 33%;
  }
}

@media screen and (min-width: 620px) and (max-width: 919px) {
  div.header {
    float: left;
    min-height: 260px;
    background-color: gray;
    padding: 10px;
    width: 33%;
  }
  div.features {
    display: flex;
    min-height: 260px;
    padding: 10px;
    background-color: lightblue;
  }
  div.features .item {
    flex: 1;
    font-size: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 33%;
  }
}

@media screen and (min-width: 520px) and (max-width: 619px) {
  div.header {
    float: left;
    min-height: 260px;
    background-color: green;
    padding: 10px;
    width: 33%;
  }
  div.features {
    display: flex;
    min-height: 260px;
    padding: 10px;
    background-color: lightblue;
  }
  div.features .item {
    flex: 1;
    font-size: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 33%;
  }
}

<div class="row">
  <div class="header">
    <h1>This is test</h1>
    <p>description description description</p>
  </div>

  <div class="features">
    <div class="item">
      <h1>This is test</h1>
      <p>description description description</p>
    </div>
    <div class="item">
      <h1>This is test</h1>
      <p>description description description</p>
    </div>
    <div class="item">
      <h1>This is test</h1>
      <p>description description description</p>
    </div>
  </div>

</div>

Height issue with 4 column grid alignment in css

1 Answers1