css - CSS网格模板全宽行

Question

我的目标是这种网格布局：

    +-----------------+-----------------+
    |    column A1    |    column A2    |
    +-----------------+-----------------+
    |              column B             |
    +-----------------------------------+

其中column A1和column A2有 50% 的水平页面宽度并且column B是全宽。

我相信我误解了内容领域，相信 . 表示项目和多个 eventAreas = 双宽度？

.grid-container {
  display: grid;
  grid-template: 500px 500px / auto auto;
  grid-template-areas: '. .  eventArena eventArena';
}

.item3 {
  grid-area: eventArena;
}

<div class="grid-container">
  <div class="item1">
    <p class="titleBlock">Over 400 events</p>
    <p class="descriptionBlock">Proin ac lobortis arcu, a vestibulum augue. Vivamus ipsum neque, facilisis vel mollis vitae, mollis nec ante. Quisque ali- quam dictum condim.</p>
  </div>
  <div class="item2">
    <p class="titleBlockRight">Join a society</p>
    <p class="descriptionBlockRight">Proin ac lobortis arcu, a vestibulum augue. Vivamus ipsum neque, facilisis vel mollis vitae, mollis nec ante. Quisque ali- quam dictum condim.</p>
  </div>
  <div class="item3">
    <p class="titleBlock">Book a space</p>
    <p class="descriptionBlock"> Proin ac lobortis arcu, a vestibulum augue. Vivamus ipsum neque, facilisis vel mollis vitae, mollis nec ante. Quisque ali- quam dictum condim.</p>
  </div>
</div>

标签： csscss-grid

Answer 1

像这样。

每个模板区域“行”必须用引号分隔。

.grid-container {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-areas: "... ..." 
                       "eventArena eventArena";
}

.item3 {
  grid-area: eventArena;
}

<div class="grid-container">
  <div class="item1">
    <p class="titleBlock">Over 400 events</p>
    <p class="descriptionBlock">Proin ac lobortis arcu, a vestibulum augue. Vivamus ipsum neque, facilisis vel mollis vitae, mollis nec ante. Quisque ali- quam dictum condim.</p>
  </div>
  <div class="item2">
    <p class="titleBlockRight">Join a society</p>
    <p class="descriptionBlockRight">Proin ac lobortis arcu, a vestibulum augue. Vivamus ipsum neque, facilisis vel mollis vitae, mollis nec ante. Quisque ali- quam dictum condim.</p>
  </div>
  <div class="item3">
    <p class="titleBlock">Book a space</p>
    <p class="descriptionBlock"> Proin ac lobortis arcu, a vestibulum augue. Vivamus ipsum neque, facilisis vel mollis vitae, mollis nec ante. Quisque ali- quam dictum condim.</p>
  </div>
</div>