Vertically align elements on the page while keeping equal heights

Question

I'm trying to make each element in the same row equal height. I don't want elements to be stretched though. They should also be vertically aligned within the page. I managed to get them vertically aligned on the page using align-items:center; However, the boxes in the same row aren't of equal heights. Any ideas what I'm doing wrong here? I don't want to use a fixed height to achieve this though. JS Bin

I'm looking to achieve this;

Many thanks.

body {
  background: lightblue;
  padding: 1rem;
}

.help-boxes {
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.box-wrap {
  height: 92vh;
}

.help-box-link {
  background: #fff;
  -webkit-box-shadow: 0 1rem 3rem rgba(22, 28, 45, 0.175);
  box-shadow: 0 1rem 3rem rgba(22, 28, 45, 0.175);
  border-radius: 3px;
  margin-bottom: 2%;
  padding: 1rem;
  flex: 0 0 31.33%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="box-wrap">
  <div class="help-boxes">
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor
        sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </div>
</div>

Thanks @Paulie_D - not sure I understood it though. In my example, .help-boxes isn't the parent you are looking for? — ConsoleLog, Oct 23 '19 at 15:15
I just want the boxes in one row to be of same height but the whole set (all six boxes) align vertically on the page, if that makes sense? — ConsoleLog, Oct 23 '19 at 15:17
Thanks but not quite as the boxes have now stretched even when content is not that tall. — ConsoleLog, Oct 23 '19 at 15:29
Well you can't have the "equal height" without stretching so I don't see what else you want. - https://jsbin.com/taganunoji/1/edit?html,css,output — Paulie_D, Oct 23 '19 at 15:31
I'm after this output - https://ibb.co/qCjBD17 Is this not achievable? — ConsoleLog, Oct 23 '19 at 15:33
Just updated the thread with an image showing my desired output. Not sure if that's achievable though. Thanks — ConsoleLog, Oct 23 '19 at 15:37
So this - https://jsbin.com/quqaguxezo/1/edit?html,css,output — Paulie_D, Oct 23 '19 at 15:38

score 1 · Accepted Answer · answered Oct 23 '19 at 17:00

By using grid.

body {
  background: lightblue;
  padding: 1rem;
}

.box-wrap{ 
  height: 94vh;
  align-items: center;
}

.help-boxes{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.help-box-link {
  display: block;
  background: #fff;
  box-shadow: 0 1rem 3rem rgba(22, 28, 45, 0.175);
  border-radius: 3px;
  margin-bottom: 2%;
  padding: 1rem;
  flex: 0 0 31.33%;
}

<div class="box-wrap">
  <div class="help-boxes">
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit,  Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </div>
</div>

Thanks @Trapti. By adding display: flex to the .box-wrap and with your grid approach it seems to be getting closer to what I wanted to achieve. Many thanks for your help! Never have used gird - guess it's time to look up some tuts :) — ConsoleLog, Oct 24 '19 at 09:24
@con: A grid is perfectly suited for this type of layout. Unlike the flex box, that allows you to control 1 dimension only, a grid is a 2D layout. You get to control columns *and* rows. [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) provides a good overview. — IInspectable, Dec 28 '19 at 08:26

James · Answer 2 · 2019-10-23T15:54:19.700

Use flex for the child too and remove the align-items in the parent, instead use it in your child.

body {
  background: lightblue;
  padding: 1rem;
}

.help-boxes {
  display: flex;
  justify-content: space-around;
  flex-flow: column wrap;
  height: 100%;
}

.box-wrap {
  height: 92vh;
}

.help-box-link {
    background: #fff;
    -webkit-box-shadow: 0 1rem 3rem rgba(22, 28, 45, 0.175);
    box-shadow: 0 1rem 3rem
    rgba(22, 28, 45, 0.175);
    border-radius: 3px;
    margin: 2% 1em;
    padding: 1rem;
    flex: 1 0 31.33%;
    display: flex;
    align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="box-wrap">
  <div class="help-boxes">
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor
        sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </div>
</div>

Thanks but not quite what I'm after as the boxes have now stretched.I'm after this - https://ibb.co/qCjBD17 — ConsoleLog, Oct 23 '19 at 15:28

score -1 · Answer 3 · answered Oct 23 '19 at 15:17

-1

In .help-boxes class make this alteration

align-items: stretch; // Alter this line of 'center' to 'stretch'

This way all the boxes will align based on the largest of them.

answered Oct 23 '19 at 15:17

Caio Domingos

11
1
2

Thanks @Caio but I don't want the boxes to be stretched. – ConsoleLog Oct 23 '19 at 15:30

Vertically align elements on the page while keeping equal heights

3 Answers3