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>

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>

CSS网格模板全宽行

1 个答案: