Have grid row vertically aligned in relation to itself

Question

I have a simple grid:

I'm trying to get all the items vertically aligned within the limit they have, but item Two to on the same vertical line of Three

h1, p {
  font-family: Lato;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.wrapper div {
  background-color: yellow;
  border: 1px solid red;
  height: 100%;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

If I change the .wrapper div to:

.wrapper div {
  background-color: yellow;
  border: 1px solid red;
  align-self: center;
}

.wrapper div {
  background-color: yellow;
  border: 1px solid red;
  align-self: center;
}

h1, p {
  font-family: Lato;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

I'll get that alignment, but item Two will be vertically centered within its container, not at the same line of item Three:

Is it possible to have item Two and Three at the vertical center of item Three with CSS grid?

Something like:

The idea is that item Two doesn't go between Three and Five, but at the exact vertical line of item Three

it would be much helpful if you could add expected output image :) — OMi Shah, Aug 06 '23 at 06:22
Is this just a simple example or is it what you need? ie does item 5 always have the same height as item 3 and item 2 have twice that height? And can you add to the HTML or is that not allowed? — A Haworth, Aug 06 '23 at 09:57

F. Müller · Accepted Answer · 2023-08-06T07:01:07.167

You can do like the following for the grid-layout:

h1,
p {
  font-family: Lato;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.wrapper div {
  display: flex;
  align-items: center;
  background-color: yellow;
  border: 1px solid red;
  height: 100%;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 4;
  /* changed to 4 from 5 */
}


/* assumed from output img */

.box5 {
  grid-column-start: 2;
}

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

For the alignment of the items inside the boxes you could use e.g. display: flex; and align-items: center;. There are other options if you don't like the flex option you can also do it with display: block i.e. with absolute positioning and transform - but I'd not recommend it.

I have written a longer answer a few years ago but it still holds true: How do I center content in a div using CSS?

Yes almost, but how would you vertically align all the items inside their boxes? — sir-haver, Aug 06 '23 at 06:39
@sir-haver You have multiple options. There is css-transform that you could use or display flex or display grid (sub-grid). I've added the flex option - which is probably the most common and useful one. It depends on your final goal. But all should work. In most cases, you have a grid for the rough layout and use flex for the layout within the items. — F. Müller, Aug 06 '23 at 06:58

score 0 · Answer 2 · answered Aug 06 '23 at 15:32

If you put the contents of box2 into its own element you could use the 'old-fashioned' way of placement - alter the top by 25% and then adjust upwards by half that element's own height to get it positioned correctly.

h1,
p {
  font-family: Lato;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.wrapper>div {
  background-color: yellow;
  border: 1px solid red;
  height: 100%;
  width: 100%;
}

.wrapper>div:not(.box2) {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper>div.box2>div {
  top: 25%;
  position: relative;
  transform: translateY(-50%);
  text-align: center;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">
    <div>Two</div>
  </div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

He wants the two on the same line. You got it wrong. I already solved it. Just read his comment. — F. Müller, Aug 06 '23 at 17:33

Have grid row vertically aligned in relation to itself

2 Answers2