实现这种网格模板的最佳方法是什么

Question

我在用最简单的方法创建这种网格模板时遇到了问题。我试图找到与此类似的东西来帮助我，但我一无所获。下图显示了这些行为：

全屏尺寸
中等屏幕尺寸
小屏幕尺寸（移动）

图片呈现全视口。第一个元素应始终具有相同的大小 (300px x 300px) 并位于相同的位置，但同级元素的行为应如图像所示。同级元素应表现为 css grid-template-columns，auto-fit 和 minmax() 应为 200px（最小）和 300px（最大）。我做的第一件事是创建这样的东西：

<div class="wrapper">
  <div class="big-div"></div>
  <div class="grid">
      <div class="grid-element"></div>
      <div class="grid-element"></div>
      <div class="grid-element"></div>
      <div class="grid-element"></div>
  </div>
</div>

但这表现得像 2 列，因此网格中的元素不会环绕大 div。我的另一个选择是创建这样的东西：

<div class="wrapper">
  <div class="big-div"></div>
  <div class="sibling-wrapper">
      <div class="element"></div>
      <div class="element"></div>
  </div>
  <div class="sibling-wrapper">
      <div class="element"></div>
      <div class="element"></div>
  </div>
</div>

在这种情况下，我想将 display: flex 与 flex-wrap: wrap 选项一起使用，这样它的行为几乎就像我想要的那样，但是在第一个 sibling-wrapper 换行到另一行之后，我必须更改它的 flex方向是行而不是列。我想我可以用这个案例实现它，但也许有什么更清楚的？

Answer 1

您好，使用网格实现这种模板非常简单，请阅读任何网格教程，同时这里是您想要的示例，尽量简单，您也可以使用您的特定代码宽度和高度或颜色。

.grid-element1 {
  grid-area: head;
  /* ANY NAME CAN BE GIVEN TO IDENTIFY LIKE I USED HEAD 
                          BOTTOM MAIN ETC */
}

.grid-element2 {
  grid-area: main;
}

.grid-element3 {
  grid-area: bottom;
}

.grid-element4 {
  grid-area: side1;
}

.grid-element5 {
  grid-area: side2;
}

.grid {
  display: grid;
  grid-template-areas: "head head main main bottom bottom" "head head side1 side1 side2 side2";
  gap: 10px;
}

.grid>div {
  background-color: rgba(183, 39, 39, 0.8);
  padding: 20px;
}

@media screen and (max-width: 980px) {
  /* CODE FOR YOUR SECOND LAYOUT */
  .grid {
    grid-template-areas: "head head main main" "head head bottom bottom" "side1 side1 side2 side2";
  }
}

@media screen and (max-width: 600px) {
  /* CODE FOR YOUR THIRDLAYOUT */
  .grid {
    grid-template-areas: "head head" "head head" "main main" "bottom bottom" "side1 side1" "side2 side2";
  }
}

<div class="wrapper">
  <div class="big-div"></div>
  <div class="grid">
    <div class="grid-element1">head</div>
    <div class="grid-element2">main</div>
    <div class="grid-element3">bottom</div>
    <div class="grid-element4">side1</div>
    <div class="grid-element5">side2</div>
  </div>
</div>

希望这能解决您的问题

实现这种网格模板的最佳方法是什么

What's the best way to achieve this kind of grid template

html

css

flexbox

css-grid