CSS-如何使网格元素的内容不影响其大小？

Question

基本上，我只是希望下面的代码片段中的四个框具有相同的大小，同时仍将文本居中放在第一个框中。现在，文本“ qwe”会影响第一个框的大小。它还必须使用display：grid，就像现在一样。

.asd {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  display: grid;
  grid-template-columns: repeat(4 1fr);
  grid-template-rows: repeat(4 1fr);
}

.asd > div {
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box1 {
  grid-column: 1/2;
  grid-row: 1/2;
}

.box4 {
    grid-column: 2/3;
  grid-row: 2/3;
}

<div class="asd">
  <div class="box1">qwe</div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</div>

Answer 1

将高度和宽度添加到每个div的50px，因为asd为100px

.asd {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  display: grid;
  grid-template-columns: repeat(4 1fr);
  grid-template-rows: repeat(4 1fr);
}

.asd > div {
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  width:50px;
  height:50px;

}

.box1 {
  grid-column: 1/2;
  grid-row: 1/2;
}

.box4 {
    grid-column: 2/3;
  grid-row: 2/3;
}

<div class="asd">
  <div class="box1">aqs</div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</div>

Answer 2

您的CSS是无效 grid-template-columns: repeat(4 1fr);grid-template-rows: repeat(4 1fr);

使用

grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;

.asd {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}

.asd > div {
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="asd">
  <div class="box1">qwe</div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</div>