CSS Grid布局中，子元素如何设置为非自动缩放？

Answer 1

您可以使用

aspect-ratio

来做到这一点：

.text1, .text2 {
  aspect-ratio: 1;
}

/* extra styles to highlight boxes*/
.text1 {background-color: #f7f7f7;}
.text2 {background-color: #e7e7e7;}

* {
  margin: 0;
  padding: 0;
}

.demo1 {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  margin-bottom: 50px;
}

.demo1 .des {
  grid-area: 2/1/3/3;
  background-color: #d7d7d7;
}

<div class="demo1">
  <p class="text1">Text1</p>
  <p class="text2">Text2</p>
  <p class="des">Lorem ipsum dolor sit amet ...</p>
</div>

Answer 2

我相信您是在问如何设置

.text1

和

.text2

以使宽度和高度等于其内容。使用

width: fit-content

.demo1,
.demo2 {
  width: fit-content;
}

有关 fit-content
的信息 我可以使用

width: fit-content

吗？显示95%的全球支持。

* {
  margin: 0;
  padding: 0;
}

.demo1,
.demo2 {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  width: fit-content;
}

.demo1 {
  margin-bottom: 50px;
}

.demo1 .des {
  grid-area: 2/1/3/3;
}

.demo2 .des {
  grid-area: 1/1/3/2;
}

<div class="demo1">
  <p class="text1">Text1</p>
  <p class="text2">Text2</p>
  <p class="des">Lorem ipsum dolor sit amet ...</p>
</div>

<div class="demo2">
  <p class="text1">Text1</p>
  <p class="text2">Text2</p>
  <p class="des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum. minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum.</p>
</div>