Is it possible to achieve two conflicting goals using CSS Grid?
In my design, I want the content in each cell to be vertically centered using
align-items: center;At the same time, I need the entire area of the cell to be filled with color. However, applying
align-items: center;squeezes the content vertically and does not fill the whole area with color.
What could be causing this issue? How can I overcome this obstacle to attain the desired outcome? CODEPEN DEMO
.grid {
align-items: center;
/* Remove align-items property to observe how content fills the complete cell area */
Intended Outcome
The objective is to have the entire content area of each cell colored.
https://i.stack.imgur.com/C2f5t.png
Current Outcome
The contents are compressed along the vertical axis and do not fully occupy the cell with color.
https://i.stack.imgur.com/4L99T.png
Demonstration
View the demo on Codepen here.
Code
https://codepen.io/anon/pen/NaLoLZ?editors=1100
.HTML<div class="grid">
<div class="item1">item 1</div>
<div class="item2">item 2</div>
<div class="item3">item 3</div>
<div class="item4">item 4</div>
<div class="item5">item 5</div>
<div class="item6">item 6</div>
<div class="item7">item 7</div>
<div class="item8">item 8</div>
<div class="item9">item 9</div>
<div class="item10">item 10</div>
<div class="item11">item 11</div>
<div class="item12">item 12</div>
<div class="item13">item 13</div>
<div class="item14">item 14</div>
</div>
.grid {
align-items: center;
/* Removing align-items property demonstrates content filling entire cell area */
display: grid;
grid-gap: 10px;
grid-template-columns: 100px 100px [main-start] 1fr [main-end] 100px 100px;
grid-template-rows: 100px [main-start] 100px 100px [main-end] 100px;
color: white;
font-family: sans-serif;
}
[class^="item"] {
background-color: blue;
}
.item1 {
background-color: red;
grid-area: main;
}