CSS 学习笔记 - 网格布局（栅格系统）

  • 开启网格模式
  • 基本概念
  • 属性说明
    • 容器属性
    • 内容属性
  • 效果展示
    • grid-template-rows、grid-template-columns 基本用法
    • grid-template 简写
    • gap(grid-gap) 简写
    • grid-auto-rows、grid-auto-columns 设置隐式行列轨道
    • grid-area 网格内容定位简写 + 定义线名称
    • span 跨度（使用偏移量定位）
    • auto-fit 、auto-fill 自动分配行列数
    • grid-template-areas 网格区域
    • grid-auto-flow 控制隐式网格的扩充方向
  • 对齐控制
  • 参考资料

网格布局（栅格系统）

  • 官方解释：CSS 网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是HTML生成了这些区域）。
    像表格一样，网格布局让我们能够按行或列来对齐元素。 然而在布局上，网格比表格更可能做到或更简单。 例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。
  • 个人理解：
    • 要说这个栅格系统玩过地图编辑器的同学就很好理解，因为栅格概念在地图编辑上早就普遍应用了。
    • 没玩过地图编辑器，总玩过游戏吧（帝国、魔兽、模拟人生、植物大战僵尸、皇帝、海岛奇兵。。。）但凡带点策略性质，需要建造或放置单位的对栅格概念都不会陌生。
    • 都没玩过也没关系，页面就相当于客厅的空白平面图，栅格就相当于地板砖。以后摆家具就参考地砖划定的边界来摆放。（茶几放在哪几块地砖上，沙发放在哪几块地砖上。）

开启网格模式

将容器设置为网格模式（默认块级）

display: grid;

将容器设置为行内网格模式 (多个网格容器可以在一行)

display: inline-grid;

开启网格模式后当前元素就变成了一个网格容器，它的所有直系子元素将成为网格元素。

基本概念

名词 解释
显示网格 属性 grid-template-rows 、 grid-template-columns、grid-template-areas 明确定义的轨道就在显式网格中。
隐式网格 当显示网格中放下不，或是内容项被故意定位到显示网格之外。系统就会隐藏创建网格来承纳这些内容。
属性 grid-auto-rows 和 grid-auto-columns 可定义隐式网格中轨道的大小。
嵌套网格 网格容器只影响直接子对象。如果下一级还想使用网格布局继续嵌套使用即可。
重叠顺序 多个元素覆盖到同一区域时即会产生重叠。基本原则后来居上，可以手动设置 z-index 控制
  1. 网格轨道 Grid_Tracks|两条网格线之间的空间。
  2. 网格行 Grid_Row |Grid布局中的水平轨道，即两个水平网格线之间的空间。它通过属性 grid-template-rows定义
  3. 网格列 Grid_Column|Grid布局中的垂直轨道，即两个垂直网格线之间的空间。它通过属性 grid-template-columns定义
  4. 网格线 Grid_Lines|用于划分网格单元格的线（从边框算起，到边框结束）
  5. 单元格 Grid_Cell|它是网格中的最小单元
  6. 网格区域 Grid_Areas|是网格中由一个或者多个网格单元格组成的一个矩形区域。
  7. 网格间距 Gutters|是网格轨道之间的间距。可以通过 grid-column-gap，grid-row-gap 或者 grid-gap 在Grid布局中创建。
    ———————————|

属性说明

容器属性

属性|简写形式|说明|示例
:–|–|:–|–|–
grid-template-rows||定义网格行：网格线的名称和网格轨道的尺寸大小。 （由此属性定义的叫显示网格。当内容超出显示定义时，系统还会隐式创建网格来放这些多出的内容元素） grid-template-columns||同上。定义网格列
grid-template|是| grid-template-rows、grid-template-columns 和 grid-template-areas 的简写形式 grid-auto-rows||用于指定隐式创建的行轨道大小。 grid-auto-columns||用于指定隐式创建的列轨道大小。 grid-auto-flow||控制（隐式网格）扩充行，还是扩充列。（默认 row）
row-gap|| 设置行间距大小。兼容旧版请用grid-row-gap
column-gap|| 设置列间距大小。兼容旧版请用grid-column-gap
gap|是|row-gap 和 column-gap的简写形式。兼容旧版请用grid-gap
grid|是|可以用来设置以下属性：
显式网格属性：grid-template-rows、grid-template-columns 和 grid-template-areas
隐式网格属性：grid-auto-rows、grid-auto-columns 和 grid-auto-flow
间距属性：row-gap（grid-row-gap）和 column-gap（grid-column-gap）。 grid-template-areas||在网格中定义各区域名称。网格项上的grid-area可以使用。
——————————|

内容属性

属性 简写形式 说明
grid-row-start 指定网格项的行 开始位置，可以用：网格线编号（负值从后往前数）、span（跨度）或留空用默认值。
grid-row-end 指定网格项的行 结束位置，可以用：网格线编号（负值从后往前数）、span（跨度）或留空用默认值。
grid-row 是 grid-row-start / grid-row-end 的简写形式。斜杠/是分割符
grid-column-start 同上设置列 开始位置
grid-column-end 同上设置列 结束位置
grid-column 是 grid-column-start / grid-column-end的简写形式。斜杠/是分割符
grid-area 是 对于 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的简写形式。可以直接使用网格名称
————————

效果展示

所有代码可以在线调试：https://codepen.io/jerryjin/pen/xxVvYgV

<article id="hrd"><div>曹操</div>  <div>关羽</div>  <div>张飞</div>  <div>赵云</div>  <div>马超</div><div>黄忠</div>  <div>卒</div>  <div>卒</div>  <div>卒</div> <div>卒</div>
</article>
<article id="a1"><div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>  <div>5</div><div>6</div>  <div>7</div>  <div>8</div>  <div>9</div>
</article>

* {  padding: 0;  margin: 0; }
/* article 基础样式 */
article {width: 150px; height: 150px; border: solid 5px silver; margin: 10px; /* 宽、高、边框、外边距 */display: inline-grid; /* 开始网格模式 */overflow:hidden;
}
article:nth-of-type(n+7){height: auto; /* 覆写高度，允许撑开 */ overflow: visible;  /* 覆写超出为显示 */
}
/* 所有 div 基础样式 */
div {background: lightgreen; /* 背景色 */background-clip: content-box; /* 背景色应用到内容区域。还可选：border-box, padding-box */padding: 5px; /* 内边距 */border: solid 1px #ddd; /* 边框 */text-align: center; line-height: 35px; /* 文字水平垂直居中 */
}
/* ---------------------------------------------------------------------------- */
#hrd {width: 400px; height: 500px;grid-template: repeat(5, 1fr) / repeat(4, 1fr);grid-template-areas: "赵云 曹操 曹操 黄忠""赵云 曹操 曹操 黄忠""张飞 关羽 关羽 马超""张飞  卒1 卒2  马超""卒3   .    .    卒4"
}
#hrd>div:nth-of-type(1){  grid-area: 曹操; line-height: 200px;}
#hrd>div:nth-of-type(2){  grid-area: 关羽; line-height: 100px;}
#hrd>div:nth-of-type(3){  grid-area: 张飞; line-height: 200px;}
#hrd>div:nth-of-type(4){  grid-area: 赵云; line-height: 200px;}
#hrd>div:nth-of-type(5){  grid-area: 马超; line-height: 200px;}
#hrd>div:nth-of-type(6){  grid-area: 黄忠; line-height: 200px;}
#hrd>div:nth-of-type(7){  grid-area: 卒1; line-height: 100px;}
#hrd>div:nth-of-type(8){  grid-area: 卒2; line-height: 100px;}
#hrd>div:nth-of-type(9){  grid-area: 卒3; line-height: 100px;}
#hrd>div:nth-of-type(10){  grid-area: 卒4; line-height: 100px;}
/* ---------------------------------------------------------------------------- */
#a1 {grid-template-rows: 50px 50px 50px;grid-template-columns: 50px 50px 50px;
}
#a2 {grid-template-rows: 33% 34% 33%;grid-template-columns: 33% 34% 33%;
}
#a3 {grid-template-rows: 1fr 1fr 1fr;grid-template-columns: 1fr 1fr 1fr;
}
#a4 {grid-template-rows: repeat(3, 1fr);grid-template-columns: repeat(3, 1fr);
}
#a5 {grid-template: 1fr 1fr 1fr/ 1fr 1fr 1fr;
}
#a6 {grid-template-rows: 1fr 1fr 1fr;grid-template-columns: 1fr 1fr 1fr;grid-gap: 5px; /* 同时设置行列边距 */
}
#a7 {grid-template-rows: 1fr; /* 定义1行 */grid-template-columns: 1fr 1fr; /* 定义2行 */grid-auto-rows: 80px; /* 设置隐式行轨道 */grid-auto-columns: 80px; /* 设置隐式列轨道 */
}
#a7>div:nth-of-type(7){background: red; /* 背景色红 */background-clip: content-box; /* 背景色应用于内容区域 */grid-row: 1 / 3; /* 定位行到网格线 开始1 => 结束3 */grid-column: 3 / 4; /* 定位列到网格线 开始3 => 结束4 */
}
#a8 {grid-template-rows: [r1s] 1fr [r1e r2s] 1fr [r2e r3s] 1fr [r3e]; /* 显示定义名称 */grid-template-columns: repeat(3, [cs] 1fr [ce]); /* 自动定义名称 */
}
#a8>div:nth-of-type(5){background: red; /* 背景色红 */background-clip: content-box; /* 背景色应用于内容区域 */grid-area: r3s / cs 3 / r3s / ce 3; /* 通过名称定位 */
}
#a8>div:nth-of-type(6){background: red; /* 背景色红 */background-clip: content-box; /* 背景色应用于内容区域 */grid-area: 4 / cs 3 / 5 ;
}
#a8>div:nth-of-type(7){background: red; /* 背景色红 */background-clip: content-box; /* 背景色应用于内容区域 */grid-area: 5 / cs 3 ;
}
#a8>div:nth-of-type(8){background: red; /* 背景色红 */background-clip: content-box; /* 背景色应用于内容区域 */grid-area: 6;
}
#a9 {grid-template: repeat(4, 1fr) / repeat(3, 1fr);
}
#a9>div:nth-of-type(1){background: red; /* 背景色红 */background-clip: content-box; /* 背景色应用于内容区域 */grid-area: span 3 / span 3;
}
#a10 {width: 150px; height: 150px;grid-template: repeat(auto-fill, minmax(20px, 1fr) ) / repeat(auto-fill, minmax(20px, 1fr));
}
#a10>div{padding: 0; /* 内边距 */line-height: 20px;
}
#a10>div:nth-of-type(1){  grid-area: 1 / 1 / 2 / 7; }
#a10>div:nth-of-type(2){  grid-area: 1 / 7 / 7 / 8; }
#a10>div:nth-of-type(3){  grid-area: 7 / 2 / 7 / 8; }
#a10>div:nth-of-type(4){  grid-area: 2 / 1 / 8 / 2; }
#a10>div:nth-of-type(5){  grid-area: 2 / 2 / 3 / 6; }
#a10>div:nth-of-type(6){  grid-area: 2 / 6 / 6 / 7; }
#a10>div:nth-of-type(7){  grid-area: 6 / 3 / 7 / 7; }
#a10>div:nth-of-type(8){  grid-area: 3 / 2 / 7 / 3; }
#a10>div:nth-of-type(9){  grid-area: 3 / 3 / 5 / 5; }#a11 {width: 500px; height: 150px;grid-template: repeat(auto-fit, minmax(20px, 1fr) ) / repeat(auto-fit, minmax(20px, 1fr));
}#a12 {grid-template: repeat(3, 1fr) / repeat(1, 1fr) ;grid-auto-flow: column;
}#a13{grid-template: repeat(1, 1fr) / repeat(3, 1fr) ;grid-auto-flow: row;
}#a14{width: 400px; height: 100px;grid-template: repeat(1, 30px) / repeat(9, 30px) ;place-content: space-evenly space-evenly;
}
#a14>div{width:20px; height: 20px; line-height: 20px;}#a15{width: 400px; height: 400px;grid-template: repeat(3, 1fr) / repeat(3, 1fr);place-items: center center;
}
#a15>div{width:40px; height: 40px;}
#a15>div:nth-of-type(5){ place-self: end end;
}

let ele = document.querySelector("#a1"); // 选择 article // 克隆 article 凑齐 15 个
for(let i = 2; i <= 15; i++){let temp = ele.cloneNode(true);temp.id = "a" + i;ele.parentNode.appendChild(temp);
}

grid-template-rows、grid-template-columns 基本用法

给所有容器设置默认行列轨道大小
grid-template-rows、grid-template-columns 取值规则：

值 例子
像素 px grid-template-rows: 50px 50px 50px;
百分比 % grid-template-rows: 33% 34% 33%;
n等分 nfr grid-template-rows: 1fr 1fr 1fr;
重复 repeat grid-template-rows: repeat(2, 50%); // 等同于上一行效果
minmax(min, max) minmax(10px, 2fr) // 最小时10px，最大时2fr
前四个，分别使用四种单位设置。其他默认行列轨道大小

grid-template 简写

同时设置：grid-template-rows、grid-template-columns 实现和前面相同的行列轨道效果。

#a5 {grid-template: 1fr 1fr 1fr/ 1fr 1fr 1fr;
}

gap(grid-gap) 简写

设置行、列边距

grid-auto-rows、grid-auto-columns 设置隐式行列轨道

  • 只显式的定义了 1行2列，超出的部分都是隐式网格。
  • grid-row、grid-column 通过简写的方式定义了第7个div。（列的开始网格线为3,超出了显示定义的列所以系统自动创建了隐式网格）

grid-area 网格内容定位简写 + 定义线名称

grid-area: 行-start;
grid-area: 行-start / 列-start
grid-area: 行-start / 列-start / 行-end;
grid-area: 行-start / 列-start / 行-end / 列-end;

自定义网格线名称和使用：

  • 显示定义名称：在轨道的左右用[]写上网格线名称即可
  • 自动定义名称：repeat(3, [开始标识] 1fr [结束标识])。使用： 开始标识 + 空格 + 行或列号

span 跨度（使用偏移量定位）


注意： 这里行的单位使用了像素50px。经过测试如果使用1fr，span 跨越行数必须小于 定义行数。否则跨度失效，只会占用一行。

将定义行数设置到合理。比如：(显示设置 4 行)可以解决。

#a9 {grid-template: repeat(4, 1fr) / repeat(3, 1fr);
}
#a9>div:nth-of-type(1){background: red; /* 背景色红 */background-clip: content-box; /* 背景色应用于内容区域 */grid-area: span 3 / span 3;
}

auto-fit 、auto-fill 自动分配行列数

网格项大小固定，系统在容器中自动判断应该分配多少行/列。
auto-fit：网格项不足以填满一行时。各项平分剩余空间
auto-fill：网格项不足以填满一行时。保留剩余空间

虽然可以直接写固定值，但范围值 minmax(20px, 1fr) 更适用。

grid-template-areas 网格区域

符号点.用于跳过单元格

grid-auto-flow 控制隐式网格的扩充方向

  • row：扩充 行
  • column：扩充列
  • dense：有小元素时候，是否填补到之前的空白中去？（会导致顺序乱掉）

对齐控制

对齐属相相对独立并不是网格系统的专属，所以分开演示

序号 属性 对象 简写 说明
1 align-content 容器 控制如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间
2 justify-content 容器 控制如何分配顺着弹性容器主轴(或网格行轴) 的元素之间及其周围的空间。
3 place-content 容器 是 语法 <'align-content'> <'justify-content'>?
4 align-items 容器 控制元素在垂直方向的对齐方式。（开头、末尾、拉伸）
5 justify-items 容器 控制元素在水平方向的对齐方式。（开头、末尾、拉伸）
6 place-items 容器 是 语法 <'align-items'> <'justify-items'>?
7 align-self 元素 控制当前元素在垂直方向的对齐方式。（开头、末尾、拉伸）
8 justify-self 元素 控制当前元素在水平方向的对齐方式。（开头、末尾、拉伸）
9 place-self 元素 是 语法 <'align-self'> <'justify-self'>?
</font ——————— —— ——

注意：对齐效果，要在有多余空间，时才看的出效果。不然元素填满了网格，怎么排看上去效果都一样。

参考资料

MDN 网格布局
后盾人：栅格系统
阮一峰的网络日志》CSS Grid 网格布局教程

CSS 学习笔记 - 网格布局（栅格系统）相关推荐

  1. CSS学习笔记-11-Flex布局

    文章目录 11.flex 11.1.弹性盒 11.2.弹性容器的样式 11.3.弹性元素的样式 11.flex 11.1.弹性盒 flex(弹性盒,伸缩盒) 是css中的又一种布局手段,它主要用来代替 ...

  2. css里面的网格布局

    那么首先来说说一下CSS 中 Grid 网格布局与 Grid 栅格系统的关系 CSS跟Grid布局没有半毛钱关系,Grid只不过是人们在遵循CSS规范的框架内摸索出来的一个最佳实践,你完全可以不鸟栅格 ...

  3. CSS 学习笔记 - 盒模型

    CSS学习笔记 - 盒模型 外边距margin 内边距padding 背景background 背景图background-image 边框border 样式 宽度 颜色 圆角 边框图片border- ...

  4. HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】

    w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...

  5. HTML/CSS学习笔记01【概念介绍、基本标签】

    w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...

  6. CSS学习笔记 display属性

    CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...

  7. css响应式网格布局生成器_如何使用网格布局模块使用纯CSS创建响应表

    css响应式网格布局生成器 TL; DR (TL;DR) The most popular way to display a collection of similar data is to use ...

  8. CSS学习笔记（详细，不定期更新）

    CSS 学习笔记 CSS书写规范 顺序 布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...

  9. CSS学习笔记（狂神-完整版）

    CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...

最新文章

  1. SpringMVC的文件上传和拦截器
  2. python npy文件_python实现npy格式文件转换为txt文件操作
  3. 【译】Android中的安全数据— Android中的加密（第2部分）
  4. echarts tooltip的formatter回调参数设置，两组参数情况
  5. json转python_将“true”(JSON)转换为Python等效的“True”
  6. Kickstart无人职守安装RHEL6.4
  7. windows效率工具，翻译软件QTranslate
  8. 最新前端四天精通node.js视频教程
  9. camera - 滤镜格式 （原生RGGB、RCCB、RCCC、RGB-IR和Monochrome(单色传感器)）
  10. 专访 Livid：程序员值得花时间一看！
  11. 扩展卡尔曼滤波EKF—目标跟踪中的应用(算法部分)
  12. 一封高三班主任写给大学生的信
  13. s5p4418 PWM亮度调节修改
  14. linux ramdisk swap,ramdisk和initramfs比较
  15. 网易2017校园招聘笔试题 跳石板
  16. 【小技巧】酒店Wifi不弹出登陆方案(Mac)
  17. HDU-5197-beautiful number（数位DP）
  18. 这可能是我学习计算机以来的全部收获和总结
  19. oracle代言人,好莱坞巨星布鲁斯南与欧琳正式签约成为代言人
  20. 记账理财，就选我爱管账

热门文章

  1. WIN7使用过360系统急救箱后出现的任务计划程序文件夹删除的办法
  2. 《朗读者有感》——勇气
  3. php开发之cms开发体验
  4. python笔记本电脑推荐2020_2020 年有什么好的笔记本电脑推荐？
  5. 我爱log4j.properties
  6. php 获得ip地址区域及运营商 抓取百度的数据
  7. 《Dolby Vision White Paper》，译名：杜比视界白皮书
  8. python从txt读取数据并画图_python读取txt天气数据并使用matplotlib模块绘图
  9. 输入字母输出姓c语言,输出英文(C语言程序?输入数字输出英文)
  10. Bebras挑战样题之七——一种模拟植物生长的语言