0

I wonder if it is possible to align content in grid items so they are of the same height. enter image description here

Is it possible to make all item titles and item texts take the same amount of space as the heightest one?

I tried to achieved this with flexbox but didn't manage to achieve it. Also I thought about making two separate grids: for item titles and item texts, but it turned out to be impossible to make responsive.

Thanks in advance.

Here is the sandbox: https://codesandbox.io/s/blissful-mcclintock-l469n?file=/style.css

Vlad.Storozhenko
  • 45
  • 5

1 Answers1

-1

You should be able to use an outer flex box with a row alignment and an inner flex box with a column alignment. I've created a snippet for you to demonstrate below.

* {
  margin: 0;
  padding: 0;
}

.grid{
  display: flex;
  justify-content: space-evenly;
}

.inner{
  flex-direction: column;
  width:33.3333333%;
  margin-left:15px;
  margin-right:15px;
}

.title {
  background-color:lightcoral
}

.body{
      background-color:lightseagreen;
}
<body>
  <div class="grid title">
    <div class="inner">
      <h1>Item title</h1>
    </div>
    <div class="inner">
      <h1>Item title Item title Item title Item title</h1>
    </div>

    <div class="inner">
      <h1>Item title</h1>
    </div>
  </div>
  <div class="grid body">
    <div class="inner">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, modi?
      </p>
    </div>
    <div class="inner">
      <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, modi?
          Lorem ipsum dolor sit amet consectetdfdaur adipisicing elit. Ipsa,
          modi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa,
          modi?
      </p>
    </div>

    <div class="inner">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, modi?
      </p>
    </div>
  </div>
</body>
Zeusolio
  • 1
  • 1