在css-grid中使用align-items时使单元格内容填充整个单元格区域[重复]

Posted 2023-03-05

【中文标题】在css-grid中使用align-items时使单元格内容填充整个单元格区域[重复]

【英文标题】：Making cell content fill entire cell area when using align-items in css-grid [duplicate]

【发布时间】：2018-03-26 09:11:02

【问题描述】：

我想用 CSS Grid 做两件看起来不兼容的事情：

align-items: center;我希望每个单元格的内容以每个单元格的垂直轴为中心。

用颜色填充单元格的整个可用区域。当我应用属性align-items: center; 时，内容沿垂直轴被挤压，并且没有用颜色填充整个区域。

我做错了什么？如何达到我想要的结果？ CODEPEN DEMO

.grid 
  align-items: center;
  /* remove align-items property to see content fill entire cell area */

期望的行为

我想用颜色填充每个单元格的全部内容。

实际行为

内容沿垂直轴被挤压，不给单元格填充颜色。

演示

Here is the demo in Codepen.

代码

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>

.CSS

.grid 
  align-items: center;
  /* remove align-items property to see content fill 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;

【参考方案1】：

不要将align-items:center 应用到父容器，而是应用到所有使用以下CSS 的子容器，因为您使用align-items，所以对所有子容器使用display:flex。

CSS 更改：

.grid 
  /* remove align-items property to see content fill 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;
  display:flex;
  align-items:center;

Codepen Demo