使用视口动态调整 3x3 正方形网格的大小

Question

感谢您抽出时间来看我的困境。

我想要做的是用 HTML/CSS 中其他正方形 div 的 3x3 网格填充一个完美的正方形 div。我希望容器居中，占据页面的整个高度（从不滚动）并动态调整大小，同时在调整视口大小时保持其纵横比。组成这个较大正方形的 9 个单元格中的每一个都应动态调整大小并保持其纵横比。

这是我在真正陷入只有 WIDTH 受到影响的事实之前所得到的。当我调整 window 大小时，高度需要动态改变。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="homestyle-test.css">
</head>

<body>
<div class="mainframe">
  <div class="grid">
    <div class="grid__item">
      <div class="content">
        <div class="content-inside">
          <p>Upper left</p>
        </div>
      </div>
    </div>
    <div class="grid__item">
      <div class="content">
        <div class="content-inside">
          <p>upper middle</p>
        </div>
      </div>
    </div>
    <div class="grid__item">
      <div class="content content-lr">
        <div class="content-inside">
          <p>upper Right</p>
        </div>
      </div>
    </div>
    <div class="grid__item">
    <div class="content">
      <div class="content-inside">
        <p>middle Left</p>
      </div>
    </div>
  </div>
    <div class="grid__item">
      <div class="content">
        <div class="content-inside">
          <p>middle</p>
        </div>
      </div>
    </div>
    <div class="grid__item">
      <div class="content content-lr">
        <div class="content-inside">
          <p>middle Right</p>
        </div>
      </div>
    </div>
    <div class="grid__item">
      <div class="content">
        <div class="content-inside">
          <p>Lower Left</p>
        </div>
      </div>
    </div>
    <div class="grid__item">
      <div class="content">
        <div class="content-inside">
          <p>Lower middle</p>
        </div>
      </div>
    </div>
    <div class="grid__item">
      <div class="content content-lr">
        <div class="content-inside">
          <p>Lower Right</p>
        </div>
      </div>
    </div>
  </div>
</div>


</body>


</html>

CSS

* {
  box-sizing: border-box;
}


html{
  background: url(home-assets/homebgtest.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}


.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  place-items: start;
}
.grid > * {
  background: orange;
  width: 100%;
}
.grid > [style^='--aspect-ratio']::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0;
  padding-bottom: calc(100% / (var(--aspect-ratio)));
}

Answer 1

请根据您对完美正方形的要求查看以下工作片段，希望对您有所帮助:)

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.wrap {
  max-width: 100vh;
  margin: 0 auto;
}
.grid {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr;
}

.grid>* {
  background: orange;
  padding: 20px;
  box-shadow: inset 0 0 0 1px #fff;
}

<div class="wrap">
  <div class="grid">
    <div class="grid__item">
      Upper left
    </div>
    <div class="grid__item">
      upper middle
    </div>
    <div class="grid__item">
      upper Right
    </div>
    <div class="grid__item">
      middle Left
    </div>
    <div class="grid__item">
      middle
    </div>
    <div class="grid__item">
      middle Right
    </div>
    <div class="grid__item">
      Lower Left
    </div>
    <div class="grid__item">
      Lower middle
    </div>
    <div class="grid__item">
      Lower Right
    </div>
  </div>
</div>

使用视口动态调整 3x3 正方形网格的大小

Dynamically resize a 3x3 grid of squares with the viewport

html

css

grid

aspect-ratio

responsive