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

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