Grid layout align-items doesn't respect grid row dimensions

Question

Look at this codepen:

https://codepen.io/rachelandrew/pen/WQNqKy

body {
  margin: 40px;
  font: 80% Arial, Helvetica, sans-serif;
}

.wrapper {
  display: grid;
  align-items: center;
  background: no-repeat url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/grid.png);
  grid-gap: 10px;
  grid-template-columns: repeat(6, 150px);
  grid-template-rows: repeat( 4, 150px);
  background-color: #fff;
  color: #444;
}

.box {
  border: 1px solid #444;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.b {
  grid-column: 3 / 5;
  grid-row: 1 / 3;
}

.c {
  grid-column: 1 / 3;
  grid-row: 3 / 6;
}

.d {
  grid-column: 3 / 5;
  grid-row: 3 / 6;
}

.e {
  grid-column: 5 / 7;
  grid-row: 1 / 6;
  align-self: stretch;
}

<div class="wrapper">
  <div class="box a">
    <p>This is box A. </p>

  </div>
  <div class="box b">
    <p>This is box B.</p>

  </div>
  <div class="box c">
    <p>This is box C.</p>


  </div>
  <div class="box d">
    <p>This is box D.</p>

  </div>
  <div class="box e">
    <p>Each of the boxes on the left has a grid area of 3 columns and 3 rows (we're counting the gutter col/row). </p>
    <p>The align-items property is used to align the content inside each grid-area.</p>
    <p>Other values of align-items are:</p>
    <ul>
      <li>stretch</li>
      <li>start</li>
      <li>end</li>
      <li>center</li>
    </ul>
  </div>
</div>

from

https://gridbyexample.com/examples/example24/

Element a has these rules:

.a {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

without align-items: center;

it takes the first two square (x,y)

as the rule states, but if I apply the rule

align-items: center to the parent

the size becomes smaller.

Can anyone explain why, please ?

Answer 1

The HTML structure of a grid container consists of three levels:

• the container
• the item
• the content

Each of these levels represents a separate element.

When you apply align-items: center to the container, it applies to the grid item. That is exactly what is happening in your code sample.

If you want the content of the grid item centered, then you don't target it from the primary container (2 levels up). You target it from the grid item (the parent).

You can center the text using a nested grid or even flex container.

.wrapper {
  display: grid;
  /* align-items: center; */
  grid-gap: 10px;
  grid-template-columns:  repeat(6, 150px);
  grid-template-rows: repeat( 4, 150px);
}

.box {
  display: flex;           /* new */
  align-items: center;     /* new; vertical alignment */
  justify-content: center; /* new (and optional); horizontal alignment */
}

revised codepen

body {
  margin: 40px;
  font: 80% Arial, Helvetica, sans-serif;
}

.wrapper {
  display: grid;
  /* align-items: center; */
  background: no-repeat url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/grid.png);
  grid-gap: 10px;
  grid-template-columns: repeat(6, 150px);
  grid-template-rows: repeat( 4, 150px);
  background-color: #fff;
  color: #444;
}

.box {
  border: 1px solid #444;
  padding: 20px;
  font-size: 150%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* optional */
}

.a {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.b {
  grid-column: 3 / 5;
  grid-row: 1 / 3;
}

.c {
  grid-column: 1 / 3;
  grid-row: 3 / 6;
}

.d {
  grid-column: 3 / 5;
  grid-row: 3 / 6;
}

.e {
  grid-column: 5 / 7;
  grid-row: 1 / 6;
  align-self: stretch;
}

<div class="wrapper">
  <div class="box a">
    <p>This is box A. </p>

  </div>
  <div class="box b">
    <p>This is box B.</p>

  </div>
  <div class="box c">
    <p>This is box C.</p>


  </div>
  <div class="box d">
    <p>This is box D.</p>

  </div>
</div>

More details here: Centering in CSS Grid