我可以使用 css-grid 来显示这个布局吗？

Posted 2023-03-17

【中文标题】我可以使用 css-grid 来显示这个布局吗？

【英文标题】：Can I use css-grid to display this layout?

【发布时间】：2021-11-23 08:21:03

【问题描述】：

（如图所示）

1 项是未知 编号

2 个分布在 四 列的项目。

谢谢-_-

【问题讨论】：

你可以同时使用grid和flex。

Flexbox 需要固定高度和 Css-grid 定义的行数。

【参考方案1】：

您可以使用以下三个属性中的任何一个来获得所需的结果：grid flex column。

我已经展示了最后两个属性 flex column 的演示，您可以使用 grid 实现相同的效果

这里使用了 column-count 属性作为您想要的 4 列，因此输入了值 4 。 column-gap 是柱间间隙的属性。

Read here to know more about multiple columns

.container 
  column-count: 4;
  column-gap: 40px;


.container>div 
  background-color: #f1f1f1;
  text-align: center;
  padding: 5%;
  margin: 1%;
  font-size: 30px;

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

使用display: flex，如下面的sn-p：

link to know more about display: flex

针对不同的屏幕尺寸使用媒体查询

.flex-container 
  display: flex;
  flex-flow: row wrap/*whether row should wrap or not*/;
  justify-content: center;/*to center align all the containers*/


.flex-container>div 
  background-color: #f1f1f1;
  width: 22%;
  margin: 1%;
  text-align: center;
  line-height: 75px;/*specifies the height of a line*/
  font-size: 30px;

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

【讨论】：

不，这不行，只要你添加更多的 div，事情就会变得混乱

@AdarshDubey 如果您需要更多信息或在上面的代码中让您感到困惑，请随时评论任何查询

当我添加另一个 div 时，它会被添加到中心，而我们想将它添加到第一列

那是因为 justify-content 的值是 center 。如果需要，您可以删除它

@AdarshDubey 添加了另一个答案，如果对您有帮助，请参见

【参考方案2】：

是的，给你。

你可以肯定用grid做到这一点，唯一的问题是，你必须添加grid-item的高度，你会有一个漂亮的布局。

如下：

* 
  margin: 0;
  box-sizing: border-box;


.grid-wrapper 
  display: grid;
  grid-template-columns: repeat(4, 100px);
  gap: 5px;


.grid-item 
  height: 100px;
  background: #000000;
  color: #fff;

<div class="grid-wrapper">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
</div>

添加任意数量的grid-items，它就可以正常工作了。

我唯一不确定的是您如何在图像中对 div 进行编号。这样做是不可能的（至少对于这段代码）。