3 列砂砾，中间有文本，向左列增长

Question

谁能帮我让标题在左边区域增长？但不应更换列。只有标题文本应与左栏重叠

#grid {
  display: grid;
  width: 100%;
  width-max: 1200px;
  height:436px;
  grid-template-columns: 25% 20% auto;
}

#areaA {
  background-image: url("https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_1280.jpg");
  align-self: center;
  height:436px;
}

#areaB {
  background-color: red;
  color: #fff;
  font-size: 40px;
}

#areaC {
  background-color: yellow;
  padding-top: 48px;
  padding-bottom: 48px;
}

<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">This is a Title which should grow over areaA, but it doesn't</div>
  <div id="areaC">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>

Link to a CodePen

Answer 1

如果我没理解错的话，您希望标题跨越前两列，对吗？您定义了三列。之后，你可以像这样用 grid-area 定位你的 child 元素：

#grid {
  display: grid;
  grid-template-columns: 25% 20% auto;
  width: 100%;
  height: 436px;
  max-width: 1200px; /* <- typo corrected here */
  margin: 0 auto;
  background: #ddd;
}


/* position and style title and areas */

.area {
  padding: 24px;
  color: #fff;
}

#areaA {
  background: url("https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_1280.jpg");
  grid-area: 1 / 1 / 2 / 2;
}

#areaB {
  background: red;
  grid-area: 1 / 2 / 2 / 3;
}

#areaC {
  background: yellow;
  color: black;
  grid-area: 1 / 3 / 2 / 4;
}

#title {
  color: #fff;
  font-size: 40px;
  margin: 0;
  padding: 24px;
  grid-area: 1 / 1 / 2 / 3;
  align-self: center;
}

<div id="grid">
  <div class="area" id="areaA">Area A</div>
  <div class="area" id="areaB">Area B</div>
  <div class="area" id="areaC">Area C<br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
  <h2 id="title">This is a Title which should grow over areaA, but it doesn't</h2>
</div>

3 列砂砾，中间有文本，向左列增长

3 column grit with Text in the middle which grows to left column

html

css

sass

less