grid 布局案例之grid-template-areas和grid-column的使用

grid 布局案例

概述

分别使用grid-template-areas和grid-column两种方法进行布局。

效果图

使用grid-template-areas进行布局

完整代码（vue+scss版）

<template>
  <div class="content">
    <header class="item header">header</header>
    <aside class="item left">left</aside>
    <section class="item main">main</section>
    <section class="item right">right</section>
    <footer class="item footer">footer</footer>
  </div>
</template>

<script>
export default {
  // layout:'front',
};
</script>

<style lang="scss" scoped>
.content {
  display: grid;
  height: 100vh;
  grid-template-columns: 100px auto 200px;
  grid-template-rows: 100px auto 100px;
  gap: 10px;
  grid-template-areas:
    "header header header"
    "left main right"
    "footer footer footer";
  .item {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .header {
    background-color: beige;
    grid-area: header;
  }
  .left {
    background-color: antiquewhite;
  }
  .main {
    background-color: rgb(209, 163, 103);
    grid-area: main;
  }
  .right {
    background-color: rgb(230, 210, 184);
    grid-area: right;
  }
  .footer {
    background-color: rgb(223, 204, 179);
    grid-area: footer;
  }
}
</style>

使用合并单元格grid-column进行布局

完整代码（vue+scss版）

<template>
  <div class="content">
    <header class="item header">header</header>
    <aside class="item left">left</aside>
    <section class="item main">main</section>
    <section class="item right">right</section>
    <footer class="item footer">footer</footer>
  </div>
</template>

<script>
export default {
  // layout:'front',
};
</script>

<style lang="scss" scoped>
.content {
  display: grid;
  height: 100vh;
  grid-template-columns: 100px auto 200px;
  grid-template-rows: 100px auto 100px;
  gap: 10px;
  .item {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .header {
    background-color: beige;
    grid-column: span 3;
  }
  .left {
    background-color: antiquewhite;
  }
  .main {
    background-color: rgb(209, 163, 103);
  }
  .right {
    background-color: rgb(230, 210, 184);
  }
  .footer {
    background-color: rgb(223, 204, 179);
    grid-column: span 3;
  }
}
</style>