用户投稿Gird 是一种 CSS 的网格系统，他出来也有一阵子了，直到最近突然想到我还没认真看过XD，所以想说该来还债拉，这篇就跟大一起来学习一下如何使用 Gird，那么开始吧～
开始使用
Gird 与 Flex 一样有内外容器的概念，首先是 html
<body> <div class="container"> <div>header</div> <div>menu</div> <div>content1</div> <div>content2</div> </div></body>接着只需在外层设定 display: grid 即可开始使用
.container { display: grid;}新方法介绍
开始排版之前我们先介绍几个 Grid 中常用的好东西
fr：等分的概念，类似 Flex 中的 flex-grow，例：1frrepeat()：可重複某值，传入两个参数，次数与值，例：repeat(2, 1fr)minmax()：可将值限定在某区间，传入两个参数，最小值与最大值，例：minmax(20px, auto)排版方法
再来介绍排版方法，基本上可由以下几种去变换自己想要的版型
方法1 - 明确设定行列的宽高
使用以下属性可以直接于外部容器设定自己行列的宽高
.container { display: grid; grid-template-rows: 100px 300px; grid-template-columns: 20% 80%;}
方法2 - 设定行列的宽高预设值
设定预设值后所以内容都会依照预设宽高，此方法可以应用在格线系统
.container { display: grid; grid-auto-rows: 100px 200px; grid-auto-columns: 1fr;}
方法3 - 自定义区块
自定义区块须先在外部容器定义区块分布，再于内部容器设定其区块名称，但要注意以下
定义外部区块时同名称的区块不能隔开. 可用于将区块留空<body> <div class="container"> <div class="header">header</div> <div class="menu">menu</div> <div class="content1">content1</div> <div class="content2">content2</div> </div></body>.container { display: grid; grid-template-rows: 100px 200px; grid-template-columns: 150px repeat(2, 1fr); grid-template-areas: "header header header" "menu . content2" "menu content1 content2";}.header { grid-area: header;}.menu { grid-area: menu;}.content1 { grid-area: content1;}.content2 { grid-area: content2;}
方法4 - 设定内部容器位置
此方法须先将外部容器格线设定好，然后在内部容器直接定义其位置，这边的属性是用线来做定义，从左到右、从上到下，最上面与最左边分别为起点，也就是 1，终点则是看要到第几条线，可以设定的值还有 auto（表示自动）与 span <line>（表示所占线数）
.container { display: grid; grid-template-rows: 100px 200px 100px; grid-template-columns: 20% 30% 30% 20%;}.header { grid-row-start: 1; grid-row-end: 2; grid-column-start: 2; grid-column-end: span 3;}.menu { grid-row-start: 2; grid-row-end: 3; grid-column-start: 1; grid-column-end: 3;}.content1 { grid-row: 2 / 3; grid-column: 3 / 4;}.content2 { grid-row: 2 / 4; grid-column: 4 / auto;}
其他属性
除了上述的属性用来排版以外，还有一些其他的属性可以操控，如下
排列方向
Grid 中设定排列方向的属性是 grid-auto-flow，可使用的属性有以下：
row：排列方向以行为优先，超过则排列到下一行，此为预设值column：排列方向以列为优先，超过则排列到下一列dense：若前方有空位，则往前排列，也可与 row、column 混用<body> <div class="container"> <div class="item-fixed-1">item-fixed-1</div> <div class="item-fixed-2">item-fixed-2</div> <div>content1</div> <div>content2</div> <div>content3</div> <div>content4</div> </div></body>.container { display: grid; grid-template-rows: repeat(4, 100px); grid-template-columns: repeat(2, 1fr); /* grid-auto-flow: row; */ /* grid-auto-flow: column; */ /* grid-auto-flow: row dense; */ /* grid-auto-flow: column dense; */}.item-fixed-1 { grid-column-start: 2;}.item-fixed-2 { grid-row-start: 3;}以下固定 item-fixed-1 与 item-fixed-2 的位置，并改变 grid-auto-flow ，可以观察其他容器有什么变化
grid-auto-flow: row
grid-auto-flow: column
grid-auto-flow: row dense
grid-auto-flow: column dense
间距
间距比较容易，可使用以下属性设定grid-row-gap：每行间距grid-column-gap：每列间距grid-gap：grid-row-gap 与 grid-column-gap 的缩写
<body> <div class="container"> <div>content1</div> <div>content2</div> <div>content3</div> <div>content4</div> </div></body>.container { display: grid; grid-template-rows: repeat(2, 100px); grid-template-columns: repeat(2, 1fr); grid-row-gap: 10px; grid-column-gap: 20px; /* grid-gap: 10px 20px; */}
对齐方式
对齐方式基本上与 Flex 满类似的，可以分为外部容器与内部容器来看，有以下值可用
align：start | end | center | stretch;justify：start | end | center | stretch | space-around | space-between | space-evenly;首先原来的样子如下，之后皆以 center 属性来示範
<body> <div class="container"> <div class="self">content1</div> <div>content2</div> <div>content3</div> <div>content4</div> <div>content5</div> <div>content6</div> </div></body>.container { display: grid; width: 500px; height: 400px; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(2, 200px);}
外部容器
justify-content：外部容器x轴对齐方式align-content：外部容器y轴对齐方式justify-items：内部容器x轴对齐方式align-items：内部容器y轴对齐方式.container { justify-content: center; align-content: center;}
.container { justify-items: center; align-items: center;}
内部容器
justify-self：该容器x轴对齐方式align-self：该容器y轴对齐方式.self { justify-self: center; align-self: center;}
（P.S.在外层设定 justify-items 或 align-items 就相当于为内层所有容器设定 justify-self 或 align-self）
属性列表
最后统整一下所有的属性～
外层属性
grid-template-rows // row高度：数量决定列数grid-template-columns // column宽度：数量决定栏数grid-template-areas // 定义网格区块grid-template // 缩写：areas / rows /columnsgrid-auto-rows // row预设高度grid-auto-columns // column预设宽度grid-row-gap // row间距grid-column-gap // column间距grid-gap // 缩写：row / columngrid-auto-flow // 排列方向grid // 缩写：上面所有属性justify-content // 外部容器对齐方式：x轴align-content // 外部容器对齐方式：y轴justify-items // 内部容器对齐方式：x轴align-items // 内部容器对齐方式：y轴内层属性
grid-row-start // row起点grid-row-end // row终点grid-row // 缩写：start / endgrid-column-start // column起点grid-column-end // column终点grid-column // 缩写：start / end// 缩写：上面所有属性或是定义网格区块grid-area // row-start / column-start / row-end / column-endjustify-self // 对齐方式：x轴align-self // 对齐方式：y轴结语
Grid 有些地方真的满灵活的，且与 Flex 一起用感觉能相辅相成，但是目前 Grid 支援度还不是很优，切版目前看起来还是会以 Flex 为主，若是以后版面越来越複杂的话，感觉就会用到 Grid 了，总之现在先学起来放着XD，希望完全支援的那天可以快来～
微信扫一扫打赏
支付宝扫一扫打赏
