时间戳

首页 > 解决方案 > CSS Grid 模板区域未呈现应有的方式

html - CSS Grid 模板区域未呈现应有的方式

问题描述

我不明白，我只是想要这样的布局。每行 3 列

'EMPTY TOP     EMPTY'

'LEFT  MIDDLE  RIGHT'

'EMPTY BOTTOM  EMPTY'

输出为 2 行 5 列。

'TOP   LEFT    MIDDLE'
'RIGHT BOTTOM'

难道我做错了什么？

.grid-mobile {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 300px 300px 300px;
        grid-gap: 20px;
        grid-template-areas:
            '. top .'
            'left middle right'
            '. bottom .';
    }

    .mobile-top {
        grid-area: 'top';
        background-color: blue;
    }

    .mobile-left {
        grid-area: 'left';
        background-color: purple;
    }

    .mobile-right {
        grid-area: 'right';
        background-color: orange;
    }

    .mobile-middle {
        grid-area: 'middle';
        background-color: pink;
    }

    .mobile-bottom {
        grid-area: 'bottom';
        background-color: red;
    }
    <section class="grid-mobile">
        <div class="mobile-top">e</div>
        <div class="mobile-left">weqr</div>
        <div class="mobile-middle">e</div>
        <div class="mobile-right">e</div>
        <div class="mobile-bottom">wqer</div>
    </section>

标签： htmlcsscss-grid

解决方案

感谢上面的评论，可能这个片段将有助于在 stackoverflow 中获得解决方案。

.grid-mobile {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 300px 300px 300px;
  grid-gap: 20px;
  grid-template-areas:
    '. top .'
    'left middle right'
    '. bottom .';
}

.mobile-top {
  grid-area: top;
  background-color: blue;
}

.mobile-left {
  grid-area: left;
  background-color: purple;
}

.mobile-right {
  grid-area: right;
  background-color: orange;
}

.mobile-middle {
  grid-area: middle;
  background-color: pink;
}

.mobile-bottom {
  grid-area: bottom;
  background-color: red;
}
<section class="grid-mobile">
  <div class="mobile-top">e</div>
  <div class="mobile-left">weqr</div>
  <div class="mobile-middle">e</div>
  <div class="mobile-right">e</div>
  <div class="mobile-bottom">wqer</div>
</section>

推荐阅读