html - CSS 将文本放置在网格 block 中

Question

我制作了一个基本的 CSS 网格，现在我想将文本放置在某个位置的图 block 内，但我不知道该怎么做。这张图片应该能表达我的意思:

蓝色框是我想要放置文本的位置。

.tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 2fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  height: 1150px;
  cursor: pointer;
}

.box1 {
  background: #3030c9;
  grid-area: 1 / 1 / 2 / 3;
}

<div class="tiles">
  <div class="box box1">
    <h1 id="text">Test</h1>
  </div>
  <div class="box box2">Test</div>
  <div class="box box3">Test</div>
  <div class="box box4">Test</div>
</div>

Answer 1

您可以使 box1 类成为垂直居中的 flex 列，然后只需在标题左侧添加一些边距即可。

.tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 2fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  height: 1150px;
  cursor: pointer;
}

.box2 {
  background: #7d30c9;
}
.box3 {
  background: #c93030;
}
.box4 {
  background: #30c9c9;
}

.box1 {
  background: #3030c9;
  grid-area: 1 / 1 / 2 / 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box1 h1 {
  margin-left: 1em;
}

<div class="tiles">
  <div class="box box1">
    <h1 id="text">Test</h1>
  </div>
  <div class="box box2">Test</div>
  <div class="box box3">Test</div>
  <div class="box box4">Test</div>
</div>