CSS 无需重复的响应式布局 HTML

Question

我正在尝试使用 3 div 创建一个 HTML-CSS 布局，我正在思考什么是编写最小 HTML 的最佳方式这将帮助我实现这样的目标：

我可以使用 flexbox 实现此目的，但前提是我为 div 重复 HTML 否。 3 并更改 order 属性的 div 号。 2. 如果不重复任何 HTML 代码，即编写类似

的代码，最佳解决方案可能是什么

<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>

并且不重复任何 HTML 而是只编写最佳 CSS 以便它的行为方式与屏幕截图中的相同？

Answer 1

您可以使用 CSS Grid Template Areas

开个好头

请参阅下面的片段以匹配您的屏幕截图。

* {
  box-sizing: border-box;
}

.container>div {
  margin-bottom: 20px;
}

@media screen and (min-width: 992px) {
  .container {
    display: grid;
    grid-template-areas: "one one two two" "three three two two" ". . two two";
    gap: 20px;
    height: 100vh;
    grid-auto-rows: 1fr;
    grid-auto-columns: 1fr;
  }
  .container>div {
    margin-bottom: 0px;
  }
  .one {
    grid-area: one;
  }
  .two {
    grid-area: two;
  }
  .three {
    grid-area: three;
  }
}


/*For styling*/

.container>div {
  border: 5px solid black;
  border-radius: 20px;
  padding: 20px;
}

<div class="container">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
</div>

CSS 无需重复的响应式布局 HTML

CSS responsive layout without repeating HTML

html

css

media-queries

responsive-design