以下布局的最佳响应式网格解决方案是什么？答案

【问题标题】：What is the best responsive grid solution for the following layout?以下布局的最佳响应式网格解决方案是什么？
【发布时间】：2021-01-01 06:47:10
【问题描述】：

我正在尝试找出实现此网格布局的最佳方法。自然，它必须是响应式的，因此布局会发生变化并经历 3 种状态，从大屏幕到中屏幕到小屏幕。我附上了一张我想要得到的图片。我正在使用 Bootstrap，所以可以访问他们的网格功能，但我不确定这是否太复杂了

这样的布局会更适合 JS 插件（砌体或类似的）还是 flexbox 或 CSS 网格能够实现这样的效果？

【问题讨论】：

查看这个答案，它与您想要实现的目标相似。 stackoverflow.com/a/39175839/10831896
我不知道 Bootstrap，但这完全可以用 flexbox 结合媒体查询来完成......

标签： css layout responsive-design grid

【解决方案1】：

这是纯 CSS 网格的经典场景。下面你有一个超级简单的实现（注意：有更好的方法来做到这一点，更隐式和简写的版本甚至不需要一些断点，但这是理解 imo 发生了什么的更清晰的方法） .

我建议阅读这篇文章以了解 CSS 网格规范的完整描述： https://css-tricks.com/snippets/css/complete-guide-grid/

这是一个带有有效解决方案的 Codepen： https://codepen.io/sergiofruto/pen/zYqaLEL

HTML

<div class="grid">
    <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>

CSS

.grid {
  display: grid;
  grid-gap: 10px;
  width: 100%;
  /*no  explicit height, let the children determine it */
}

.grid-item {
  /*arbitrary height, could be less, more, or grow depending on the content */
  height: 200px;
  font-size: 32px;
  color: white;
  background-color: black;
  text-align: center;
  border: 2px solid white;
}

@media (min-width: 768px) {
  .grid {
    /* here we set the two column layout fr are special units for grids, it represents the available space */
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .grid {
    height: 400px;
    /* here we set the four column layout, fr are special units for grids, it represents the available space */
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* here we set the two row layout, fr are special units for grids, it represents the available space */
    grid-template-rows: 1fr 1fr;
  }

  .grid-item {
    height: auto;
  }

  .grid-item:first-child {
    /* here we set a special size for the first children of the grid */
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
}

【讨论】：