一、概念

1、grid-template-areas 属性

grid-template-areas 属性用于定义网格元素的区域位置。

每行由单引号内 ' ' 定义，以空格分隔。. 号表示没有名的网格项。

2、grid-area 属性

grid-area 属性用于指定网格元素的区域位置。

命名的网格元素可以通过容器的 grid-template-areas 属性来引用。我们可以通过重复网格元素的名称来实现元素的跨行跨列。

二、示例

<template>
  <div class="grid-container">
    <div class="item1">Header</div>
    <div class="item2">Menu</div>
    <div class="item3">Main</div>
    <div class="item4">Right</div>
    <div class="item5">Footer</div>
  </div>
</template>

<style scoped>
.grid-container {
  display: grid; /* 需要添加 display: grid 以启用网格布局 */
  grid-template-areas:
    "header header header header header header"
    "menu main main main right right"
    "menu footer footer footer footer footer";
  gap: 5px;
  background: #f0f0f0;
  height: 200px;
}
.item1 {
  grid-area: header;
}
.item2 {
  grid-area: menu;
}
.item3 {
  grid-area: main;
}
.item4 {
  grid-area: right;
}
.item5 {
  grid-area: footer;
}

div {
  background: lightblue;
  text-align: center;
}
</style>

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24