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

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

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

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

解决方法

这是纯CSS网格的经典场景。 在下面，您可以超级简单地实现此操作（注意：有更好的方法可以执行此操作，更隐式和简化的版本甚至不需要某些断点，但这是了解imo发生情况的更清晰的方法）

我建议阅读本文以获取CSS Grids规范的完整说明： 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,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;
  }
}