CSS Grid（或）Flex 两行 4 列和 3 列 [重复]答案

【问题标题】：CSS Grid (or) Flex for two rows with 4 and 3 columns [duplicate]CSS Grid（或）Flex 两行 4 列和 3 列 [重复]
【发布时间】：2021-03-02 03:59:03
【问题描述】：

请帮忙看看这个网格。我需要使用 css grid 或 flex 来做到这一点。现在我有

但我需要这个：

请帮忙，如何像上一个屏幕截图那样构建列？提前致谢！

.grid {
    display:grid;
}
.cols-4 {
    grid-template-columns: repeat(4,1fr);   
    grid-column-gap: 20px;
    grid-row-gap: 20px; 
}

<div class="grid cols-4">
    <div>
        Lorem ipsum dolor...
    </div>
    <div>
        Lorem ipsum dolor...
    </div>
    <div>
        Lorem ipsum dolor...
    </div>
    <div>
        Lorem ipsum dolor...
    </div>
    <div>
        Lorem ipsum dolor...
    </div>
    <div>
        Lorem ipsum dolor...
    </div>
    <div>
        Lorem ipsum dolor...
    </div>
</div>

【问题讨论】：

你能发布你目前拥有的代码吗？由此我只能说...尝试在第二行使用display: flex 和justify-content: center。
stackoverflow.com/q/55064488/3597276

标签： css flexbox css-grid

【解决方案1】：

我使用 Bootstrap 只是为了制作和你一样的布局......对你来说唯一重要的是名为 two 的类......我建议这样做：

  <div class="row">
    <div class="w-25 border p-3">
      Lorem Ipsum
    </div>
    <div class="w-25 border p-3">
      Lorem Ipsum
    </div>
    <div class="w-25 border p-3">
      Lorem Ipsum
    </div>
    <div class="w-25 border p-3">
      Lorem Ipsum
    </div>
  </div>
  <div class="row two m-3">
    <div class="w-25 border p-3">
      Lorem Ipsum
    </div>
    <div class="w-25 border p-3">
      Lorem Ipsum
    </div>
    <div class="w-25 border p-3">
      Lorem Ipsum
    </div>
  </div>

CSS：

.two{
  display: flex;
  justify-content: center;
}

您可以在两行上使用class="two"....这取决于您的需要。

编辑 1：

.flex-rows{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flex-rows div{
  margin: 0.5rem;
  padding: 1.5rem;
  width: 3rem;
  border: 2px solid black;
  box-shadow: 2px 2px 10px black;
}

<div>
    <div class="flex-rows">
      <div>
        Lorem ipsum dolor...
      </div>
      <div>
        Lorem ipsum dolor...
      </div>
      <div>
        Lorem ipsum dolor...
      </div>
      <div>
        Lorem ipsum dolor...
      </div>
    </div>
    <div class="flex-rows">
      <div>
        Lorem ipsum dolor...
      </div>
      <div>
        Lorem ipsum dolor...
      </div>
      <div>
        Lorem ipsum dolor...
      </div>
    </div>
  </div>

【讨论】：

不，我不在这个网站上使用引导程序。
你不需要使用Bootstrap...我用它只是为了模仿相同的网格......
哦...我明白了。谢谢。如果没有提供其他解决方案，我将使用它。
我编辑了答案...检查一下...