CSS Grid 中 [line-name] 的使用

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

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

基本用法

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

如何使用命名网格线

  1. 定位网格项

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

指定多个名称:

css 复制代码
grid-template-rows: [header-start first-line] 100px [header-end second-line] 200px;

递增命名

css 复制代码
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. 隐式网格线命名

css 复制代码
.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. 在项目定位中使用这些隐式网格线

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

3. 结合显式命名网格线

css 复制代码
.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;
}

现在你可以混合使用:

css 复制代码
.sidebar {
  grid-area: sidebar;
  /* 或者 */
  grid-row: content-start / bottom;
  grid-column: left;
}
相关推荐
泷羽Sec-静安5 小时前
Less-1 GET-Error based-Single quotes-String GET-基于错误-单引号-字符串
前端·css·网络·sql·安全·web安全·less
一只学java的小汉堡8 小时前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html
九皇叔叔15 小时前
HTML与CSS基础入门:从语法到页面结构全解析
css·html·1024程序员节
_殊途16 小时前
HTML-CSS项目练习
前端·css·html
β添砖java18 小时前
vivo响应式官网
前端·css·html·1024程序员节
jingling5551 天前
CSS进阶 | 不用一行JS!用纯CSS打造会动的现代化单页应用(3D翻转卡片)
前端·javascript·css
Gee Explorer1 天前
第一篇使用HTML写一个随机点名网页
css·html5·1024程序员节
前端橙一陈1 天前
彻底理解 Bootstrap 的响应式断点机制:从 CSS 到 SCSS 的实现原理
css·bootstrap·scss
神膘护体小月半1 天前
css 的 clip-path 属性,绘制气泡
css
代码改变世界100861 天前
像素塔防游戏:像素守卫者
css·游戏·css3·1024程序员节