CSS Grid 是垂直的答案

【问题标题】：CSS Grid is being verticalCSS Grid 是垂直的
【发布时间】：2022-10-19 09:28:22
【问题描述】：

我是 CSS Grid 的新手，我想创建一个 div 网格。我希望网格水平填充——填充粉红色的 div，但它们像下面的 sn-p 一样垂直。我已经尝试了一切，我该如何解决它

.mygrid
{
  background-color: pink;
  display: grid;
  gap: 2px;
  grid-template-columns: 30px 40px;
}

.item
{
 
  background-color: blue;
}

<div class="mygrid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>

【问题讨论】：

您已将网格限制为两列。你究竟想要什么？

标签： css css-grid

【解决方案1】：

您应该使用“fr”单位将列定义为一半和一半。

.mygrid
{
  background-color: pink;
  display: grid;
  gap: 2px;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.item
{
 
  background-color: blue;
}

<div class="mygrid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>

【讨论】：

【解决方案2】：

您的问题来自grid-template-columns 属性。您可以使用auto 参数获得相同大小的列。关注此文档以获取更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

.mygrid
{
  background-color: pink;
  display: grid;
  gap: 2px;
  grid-template-columns: auto auto auto;
}

.item
{
 
  background-color: blue;
}

<div class="mygrid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>

【讨论】：

【解决方案3】：

利用网格模板列：自动自动；填满整个粉红色的盒子，

.mygrid
{
  background-color: pink;
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 2px;
}

查看 codepen 了解更多详情：link

【讨论】：