實作這種網格模板的最佳方法是什么-有解無憂

我在以最簡單的方式創建這種網格模板時遇到了問題。我試圖找到類似的東西來幫助我，但我什么也沒找到。下圖展示了這些行為：

全屏尺寸
中等螢屏尺寸
小螢屏尺寸（移動）

影像呈現完整的視口。第一個元素應始終具有相同的大小（300 像素 x 300 像素）并位于相同的位置，但同級元素的行為應如圖所示。兄弟元素應該表現得像 cssgrid-template-columns并且應該是 200px（最小）和 300px（最大）auto-fit。minmax()我做的第一件事是創建這樣的東西：

<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: flexwithflex-wrap: wrap選項，因此它的行為幾乎與我想要的一樣，但是在第一個兄弟包裝器換行到另一行之后，我必須將其 flex 方向更改為行而不是列。我想我可以使用這種情況來實作它，但也許有什么更清楚的？

實作這種網格模板的最佳方法是什么

uj5u.com熱心網友回復：

嗨，用網格實作這種模板非常容易，請通過任何網格教程同時這里是您想要的示例，嘗試盡可能簡單，您也可以使用特定寬度和高度或顏色的代碼.

.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>

希望這能解決您的疑問

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/474343.html

標籤：html css 弹性盒 CSS网格

上一篇：如何在JavaScript中將最終陣列更改為最前面？

下一篇：我如何在這個影片blob中移動與“blob”的“互動”？