CSS Grid 中 [line-name] 的使用

CSS Grid 中 [line-name] 的使用方法

在 CSS Grid 布局中，[line-name] 是为网格线命名的语法，可以让你更方便地引用特定的网格线。

基本用法

.container {
  display: grid;
  grid-template-rows: [first-line] 100px [second-line] 200px [third-line];
}

如何使用命名网格线

1. 定位网格项 ：

   .item {
     grid-row-start: first-line;
     grid-row-end: second-line;
     /* 或者简写为 */
     grid-row: first-line / second-line;
   }

指定多个名称：

grid-template-rows: [header-start first-line] 100px [header-end second-line] 200px;

递增命名

grid-template-rows: repeat(3, [row-line] 100px);
/* 这会创建 row-line 1, row-line 2, row-line 3 */

/* 使用方法 */
grid-row-start: row-line 1;
grid-row-end: row-line 3;

在 grid-template-areas 中使用命名网格线

1. 隐式网格线命名

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-rows: 80px 1fr 60px;
  grid-template-columns: 200px 1fr;
}

这样会自动创建以下网格线：

• 行网格线：header-start, header-end, sidebar-start/content-start, sidebar-end/content-end, footer-start, footer-end
• 列网格线：header-start/sidebar-start/footer-start,sidebar-end, header-end/content-end/footer-end

2. 在项目定位中使用这些隐式网格线

.header {
  /* 使用区域名称 */
  grid-area: header;
  
  /* 或者使用隐式网格线 */
  grid-row: header-start / header-end;
  grid-column: header-start / header-end;
}

3. 结合显式命名网格线

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-rows: [top] 80px [content-start] 1fr [bottom] 60px;
  grid-template-columns: [left] 200px [right] 1fr;
}

现在你可以混合使用：

.sidebar {
  grid-area: sidebar;
  /* 或者 */
  grid-row: content-start / bottom;
  grid-column: left;
}