关于适合 div 的文本的 CSS GRID 问题 [关闭]

【问题标题】：CCS GRID question about text fitting into the div [closed]关于适合 div 的文本的 CSS GRID 问题 [关闭]
【发布时间】：2021-01-23 13:52:41
【问题描述】：

我想创造这样的东西.....

但是，当我将文本放在其中一个网格项目中时.. div 会像这样延伸

【问题讨论】：

如果没有看到相关的 CSS 和 HTML，很难提供帮助。

标签： css css-grid

【解决方案1】：

你只需要像这样在你的css中添加grid-template-columns：-

<style>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
  background-color: #000;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>


<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
</div>

【讨论】：