如何为特定的CSS网格项创建完美的正方形?

Question

我正在尝试构建一个网格布局，其中只有左上角，右上方，中左和中右的容器组成一个完美的正方形，而其他所有东西都应该占用左边的空间。我看到了使用"填充技巧"的解决方案;和伪元素来解决这个问题，但前提是所有元素必须保持特定的宽高比。

.grid-container {
display: grid;
height: 100vh;
width: 100%;
grid-template-columns: 0.5fr 0.5fr 1.5fr;
grid-template-rows: 7rem 0.5fr 0.5fr 2fr;
gap: 1rem;
}
.grid-container > * {
background-color: #454545;
}
.grid-header {
grid-area: 1 / 1 / 2 / 4;
}
.top-left {
grid-area: 2 / 1 / 3 / 2;
}
.top-right {
grid-area: 2 / 2 / 3 / 3;
}
.middle-left {
grid-area: 3 / 1 / 4 / 2;
}
.middle-right {
grid-area: 3 / 2 / 4 / 3;
}
.bottom-left {
grid-area: 4 / 1 / 5 / 3;
}
.bottom-right {
grid-area: 2 / 3 / 5 / 4;
}

<div class="grid-container">
<div class="grid-header"></div>
<div class="top-left"></div>
<div class="top-right"></div>
<div class="middle-left"></div>
<div class="middle-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
</div>

我怎样才能做到这一点，同时仍然能够使它响应?

Answer 1

如果你将行设为自动高度，你可以使用padding技巧

.grid-container {
display: grid;
height: 100vh;
width: 100%;
grid-template-columns: 0.5fr 0.5fr 1.5fr;
grid-template-rows: 7rem auto auto 2fr;
gap: 1rem;
}
.grid-container > * {
background-color: #454545;
}
.grid-header {
grid-column:1/-1;
}
.top-left::before,
.middle-left::before{
content:"";
display:inline-block;
padding-top:100%;
}

.bottom-left {
grid-area: 4 / 1 / 5 / 3;
}
.bottom-right {
grid-area: 2 / 3 / 5 / 4;
}
body {
margin:0;
}

<div class="grid-container">
<div class="grid-header"></div>
<div class="top-left"></div>
<div class="top-right"></div>
<div class="middle-left"></div>
<div class="middle-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
</div>

像下面这样确保没有溢出:

.grid-container {
display: grid;
height: 100vh;
width: 100%;
--d: calc((100vmin - 10rem)/2); /* take the smallest screen size and remove the gaps and header height */
grid-template-columns: var(--d) var(--d) 1fr;
grid-template-rows: 7rem var(--d) var(--d) 1fr;
gap: 1rem;
}
.grid-container > * {
background-color: #454545;
}
.grid-header {
grid-column:1/-1;
}

.bottom-left {
grid-area: 4 / 1 / 5 / 3;
}
.bottom-right {
grid-area: 2 / 3 / 5 / 4;
}
body {
margin:0;
}

<div class="grid-container">
<div class="grid-header"></div>
<div class="top-left"></div>
<div class="top-right"></div>
<div class="middle-left"></div>
<div class="middle-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
</div>