栅格系统

如何设置栅格容器
如何绘制栅格
- 固定绘制栅格结构
- 重复绘制栅格结构
- 自动填充与按比例划分栅格
如何在栅格中放置元素
- 根据栅格编号放置元素
- 栅格固定命名放置元素
- 重复栅格的命名技巧
- 根据偏移量部署元素
- 元素定位简写操作
- 使用区域定位的方式
栅格样式的处理
- 栅格排布方式
- 栅格整体对齐方式处理
- 栅格内元素的整体控制
- 栅格内元素的独立控制
设置栅格间距

如何设置栅格容器

把元素的display赋值 grid 或 inline-grid ，便能把元素变成容器。

<style>main {width: 200px;height: 200px;background-color: rosybrown;display: grid;grid-template-rows: 100px 100px;grid-template-columns: 100px 100px;}</style>

在这里，main 元素被设置成了栅格容器，如下图所示。图中虚线称为栅格线，栅格线围成的单元格称为栅格。

如何绘制栅格

固定绘制栅格结构

grid-template-rows 绘制栅格行
grid-template-columns 绘制栅格列

已知宽高为 200px*200px的栅格容器main。想在容器中绘制 4 个的栅格。

<style>main {width: 200px;height: 200px;background-color: rosybrown;display: grid;grid-template-columns: 50px 50px 50px 50px;}</style>

4 个50px*200px的栅格【只绘制了列栅格线】

<style>main {width: 200px;height: 200px;background-color: rosybrown;display: grid;grid-template-rows: 50px 50px;grid-template-columns: 50px 50px;}</style>

4个50px*50px的栅格【同时绘制了行栅格线和列栅格线】

Note:
1，grid-template-rows和grid-template-columns分别是绘制行栅格线和列栅格线的。参数的个数就代表绘制的行数和列数，参数值得大小就代表栅格的高和宽。
2，grid-template-rows和grid-template-columns的值除了可以写成像素值外还可以写成百分比。【写成百分比时的参照物是栅格容器，在这里的例子中也就是main元素】
例：对于4个50px*50px的栅格来说，代码还可以是grid-template-rows: 25% 25%; grid-template-columns: 25% 25%;

重复绘制栅格结构

grid-template-rows:repeat() 重复绘制行栅格线
grid-template-columns:repeat() 重复绘制列栅格线

repeat()函数的参数形式：
1，repeat(1,50px) 第一个参数是重复的次数即1次，第二个参数是绘制行（或列）的高度（或宽度）即50px。
2，repeat(2,50px 100px) 第一个参数是重复的次数即2次，第二个参数是绘制行（或列）的高度（或宽度）即一个为 50px 一个为100px。【第二个参数的个数可以是多个，参数的个数代表要绘制的行栅格线或列栅格线的个数，参数的值代表行栅格线的高度或列栅格线的宽度】
Note: 第二个参数值除了是像素还可以是百分比的形式。

<style>
main {width: 200px;height: 200px;background-color: rosybrown;display: grid;grid-template-rows: repeat(2,20px 50px);grid-template-columns: repeat(2,20px 50px);}
</style>

下图显示结果：表示行栅格线和列栅格线都绘制了两次，每一次都绘制了两行两列。

自动填充与按比例划分栅格

已知容器的宽高例：300px*300px

自动填充栅格

grid-template-rows:repeat(auto-fill,100px)
grid-template-columns:repeat(auto-fill,100px)

代码分析：自动填充栅格，每100px为一份

按比例划分栅格

grid-template-rows: 1fr 2fr 3fr;
grid-template-columns:1fr 2fr 3fr;

注意：1fr 类似于弹性盒模型中的 flex:1;

如何在栅格中放置元素

根据栅格编号放置元素

在这里我们需要知道，对于栅格线，浏览器在他们刚被绘制出来的时候对他们进行编号。如下所示：
对于行栅格线来说，从上到下进行的编号是正数，从下到上进行的编号是负数。
对于列栅格线来说，从左到右进行的编号是正数，从右到左进行的编号是负数。

grid-row-start 元素放置栅格的行起始编号
grid-row-end 元素放置栅格的行结束编号
grid-column-start 元素放置栅格的列起始编号
grid-column-end 元素放置栅格的列结束编号

例：把div放置在右下角的栅格中，可以写成：

<style>main {width: 200px;height: 200px;background-color: rosybrown;margin: 100px auto;display: grid;grid-template-rows: repeat(2,20px 50px);grid-template-columns: repeat(2,20px 50px);}main div {background-color: royalblue;grid-row-start: 4;grid-column-start: 4;grid-row-end: 5;grid-column-end: 5;}</style><main><div></div></main>

结果：

还可以改写为：grid-row-start: -1; grid-column-start: -1; grid-row-end: -2; grid-column-end: -2;

栅格固定命名放置元素

grid-template-rows:[r1-s] 100px [r1-e r2-s] 100px [r2-e r3-s] 100px [r3-e];
grid-template-columns:[c1-s] 100px [c1-e c2-s] 100px [c2-e c3-s] 100px [c3-e];

格式说明：
第一条行栅格线的名字为 r1-s 第二条行栅格线的名字为r1-e/r2-s，以此类推。
第一条列栅格线的名字为 c1-s 第二条列栅格线的名字为c1-e/c2-s，以此类推。

效果演示：

<style>main {width: 300px;height: 300px;background-color: rosybrown;margin: 100px auto;display: grid;grid-template-rows: [r1-s] 100px [r1-e r2-s] 100px [r2-e r3-s] 100px [r3-e];grid-template-columns: [c1-s] 100px [c1-e c2-s] 100px [c2-e c3-s] 100px [c3-e];}main div {background-color: royalblue;grid-row-start: r2-s;grid-column-start: c2-s;grid-row-end: r2-e;grid-column-end: c2-e;}</style><main><div></div></main>

重复栅格的命名技巧

grid-template-rows:repeat(3,[r-s] 1fr [r-e])；
grid-template-columns:repeat(3，[c-s] 1fr [c-e])；

代码解释：
第一条行栅格线的名字是 r-s 1，第二条行栅格线的名字是 r-s 2/r-e 1 以此类推。
第一天列栅格线的名字是c-s 1，第二条列栅格线的名字是c-s 2/c-e 1 以此类推。
如下图所示：

根据偏移量部署元素

span 数值；表示偏移量。
代码展示：

<style>main {width: 300px;height: 300px;background-color: rosybrown;margin: 100px auto;display: grid;grid-template-rows: repeat(3,1fr);grid-template-columns: repeat(3,1fr);}main div:nth-child(1){background-color: royalblue;grid-row-end: span 1;grid-column-end: span 3;}main div:nth-child(2){background-color:salmon;grid-row-start:2;grid-column-start: 2;grid-row-end: span 1;grid-column-end:  span 2;}main div:nth-child(3){background-color:springgreen;grid-row-start: 3;grid-column-start: 2;grid-row-end: span 1;grid-column-end: span 1;}</style><main><div></div><div></div><div></div></main>

效果展示：

元素定位简写操作

grid-row: 元素开始的行栅格的开始编号/元素结束的行栅格的结束编号
grid-column: 元素开始的列栅格的开始编号/元素结束的列栅格的结束编号

例：
代码展示：

<style>main {width: 300px;height: 300px;background-color: rosybrown;margin: 100px auto;display: grid;grid-template-rows: repeat(3,1fr);grid-template-columns: repeat(3,1fr);}main div:nth-child(1){background-color: royalblue;grid-row:1/2;grid-column:1/4;}main div:nth-child(2){background-color:salmon;grid-row:2/3;grid-column:2/4;}main div:nth-child(3){background-color:springgreen;grid-row:3/4;grid-column:3/4;}</style><main><div></div><div></div><div></div></main>

效果展示：

使用区域定位的方式

grid-template-areas 给区域命名
grid-area:区域名

给栅格进行如下形式的命名：

grid-template-areas: "header header" "nav main" "footer footer";

对于命名后的栅格，浏览器会自动给其栅格线进行命名。如上述命名后，第一条行栅格线的名字是header-start,第二条行栅格线的名字是header-end；以此类推。

然后根据区域布局元素的结构：

<style>main {width: 300px;height: 400px;background-color: rosybrown;margin: 100px auto;display: grid;grid-template-rows: 60px 1fr 60px;grid-template-columns: 60px 1fr;grid-template-areas: "header header" "nav main" "footer footer";}main div:nth-child(1){background:springgreen;grid-area: header;}main div:nth-child(2){background:blueviolet;grid-area: nav;}main div:nth-child(3){background:pink;grid-area: main;}main div:nth-child(4){background:skyblue;grid-area: footer;}</style><main><div></div><div></div><div></div><div></div></main>

效果展示：

使用区域占位符优化布局代码

当多个栅格独立存在时可以使用占位符(“.”),对于要变成一体的需要命名且名字一样

针对于上述根据区域布局元素的结构可以优化成:

<style>main {width: 300px;height: 400px;background-color: rosybrown;margin: 100px auto;display: grid;grid-template-rows: 60px 1fr 60px;grid-template-columns: 60px 1fr;grid-template-areas: "header header" ". ." "footer footer";}main div:nth-child(1){background:springgreen;grid-area: header;}main div:nth-child(2){background:blueviolet;}main div:nth-child(3){background:pink;}main div:nth-child(4){background:skyblue;grid-area: footer;}</style><main><div></div><div></div><div></div><div></div></main>

结果展示:

使用栅格区域部署元素

grid-area:行栅格线开始编号/列栅格线开始编号/行栅格线结束编号/列栅格线结束编号

栅格样式的处理

栅格排布方式

grid-auto-flow 可选值 row 和column。默认是row

默认情况下，栅格的排布：

grid-auto-flow:column的效果

栅格整体对齐方式处理

已知容器的空间大于栅格空间且栅格的排列方式是默认值

控制栅格水平方向上的排列方式 justify-content
控制栅格垂直方向上的排列方式 align-items

justify-content和 align-items的可选值和作用效果和Flex弹性盒模型的使用方法一样。可以参考Flex弹性盒模型知识点

简写组合方式： place-content: align-items justify-content;

栅格内元素的整体控制

水平方向上 justify-items 【可选值：start，end，center，stretch（默认值）】
垂直方向上 align-items【可选值：start，end，center，stretch（默认值）】

简写组合方式： place-items: align-items justify-items;

栅格内元素的独立控制

水平方向上 justify-self 【可选值：start，end，center，stretch（默认值）】
垂直方向上 align-self【可选值：start，end，center，stretch（默认值）】

简写组合方式： place-self: align-self justify-self;

Note:
     1，栅格只是布局页面的区间，元素的样式仍需要根据之前学的知识点进行设置
     2，栅格内是放置元素的，当不给元素设置宽高时，元素自动充满栅格。
     3，一个页面不仅仅只使用一个栅格，所以给栅格命名的时候不能重复。

设置栅格间距

row-gap 栅格的行间距
columns 栅格的列间距

简写组合方式： gap:row-gap column-gap;

知识补充：
使用minmax函数控制栅格尺寸的波动
grid-template-rows:repeat(2,minmax(50px,100px)) 代码解析：当容器height发生变化时，栅格的height也会跟着变化，最小取值为50px，最大取值为100px。

CSS基础知识——栅格系统相关推荐

HTML+CSS基础知识3
HTML+CSS基础知识3 15.css选择器 16.css的继承 17.css优先级 18.css盒子模型 19.css标签分类 20.显示框类型 21.标签的嵌套规范 22.溢出隐藏 23.透明度 ...
CSS基础知识（高级技术）
CSS基础知识元素的显示与隐藏 display 显示 visibility 可见性 overflow 溢出 CSS用户界面样式鼠标样式cursor 轮廓线 outline 防止拖拽文本域resiz ...
css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
HTML/CSS基础知识（四）
WEB标准和W3C的理解与认识 Web标准是一系列标准的集合. 网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior). 对应的标准也分三方面:结 ...
html css基础知识
1 这是自己学习html时候做的一些记录,供大家参考 <!-- 2 块和内联3 块元素:独占一行的元素4 div p h ul5 div没有任何语义,就是一个纯粹的快元素6 就是为了方便布局7 ...
HTML+CSS基础知识简单版
HTML+CSS基础知识简单版一.HTML概述 HTML:超文本标记语言,其实就是用来开发网页的一门语言: CSS:层叠样式表,可以用于渲染网页.美化网页.做网页. 1.HTML介绍 HTML:超文 ...
CSS基础知识（一）：选择器
文章目录前言一.CSS基础知识二.选择器 1.选择器 2.基础选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.4 通配符选择器 2.5 基础选择器总结 3.复合选择器 3. ...
CSS基础知识---三种选择器
CSS基础知识---三种选择器选择器标签选择器 id选择器 class选择器全部代码选择器标签选择器 id选择器 class选择器标签选择器选择器优先级:id>class>标 ...

CSS基础知识——栅格系统