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

Question

我正在尝试构建一个网格布局，其中仅左上 Angular 、右上 Angular 、左中 Angular 和右中 Angular 的容器构成一个完美的正方形，而其他所有内容都应占据左侧的空间。我看到了使用“填充技巧”和伪元素来解决这个问题的解决方案，但前提是所有元素都必须保持特定的纵横比。

.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

如果您使行自动高度，则可以使用填充技巧

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