2 CSS布局秘籍-6脉神剑( 二 ) _生活百科

flex的栅格布局（12格），可以自动等比例划分网格，比float浮动的栅格方便多了。
.row {display: flex;}.col {margin-left: 2.08333333%;margin-bottom: 1em;width: 6.25%;flex: 1 1 auto;background: rgb(255,150,150);}02、Grid网格布局(display:grid)grid布局是一个二维布局系统，通过行、列设置定义一个网格，然后子元素按照顺序排列网格，或者设置其行列网格坐标。一个gird网格通常具有许多的行（row）与列（column），以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter /?ɡ?t?r/水沟）。
属性描述值/补充display: grid;父元素启用grid布局还可以设置为inline-grid，行内网格grid-template-rows、grid-template-columnsIE10定义行/列的二维网格，一个参数为一行/列，多行/列定义多个值，空格隔开grid-template-columns: 200px max-content 100px auto auto;/* 5列 */● auto：自动排列；max-content：最大内容区域● 尺寸值：px、em、%● 比例单位fr：2fr 1fr 1fr; 比例系数● minmax()函数：minmax(100px,auto)，区间值● repeat()函数：repeat(2, 2fr 1fr)，重复创建行列grid-template-areasIE区域网格命名：按照区域命名的网格布局，先定义区域，在给子元素设置区域名称● 字符串命名，空格隔开，.标识空的格子● 每个命名为一个单元格，同名合并格子?grid-area(子元素)给子元素设置区域名grid-area: leftgrid-template IE定义行列，上面rows / columns、areas的简写grid-template: 50px 1fr / 150px 1fr;grid-gap、gap IE定义行、列的间隙，等同于gapgrid-gap: 10px 20px;gap /ɡ?p/ 缝隙?row-gap行间间隙row-gap: 5px;?column-gap列间间隙column-gap: 10px;grid-auto-rowsIE10自动设定隐式网格的大小-行网格-高度grid-auto-rows:50px;grid-auto-columns自动设定隐式网格的大小-列网格-宽度grid-auto-columns: 1fr;grid-column(子元素)、grid-row(子元素) IE设置子元素网格线序号坐标（行/列），注意这里的坐标是网格的行列分割线，不是单元格● auto、auto-fill：自动排列● 行列坐标序号 grid-column: 2;● 跨行列坐标，起/始坐标位置grid-column: 1 / 3;● /span跨行列数量：[开始坐标 /span [跨单元格数量]其他：单位/函数描述值/补充flex：fr (IE)网格（grid）可变长度单位grid-template-columns: 200px 1fr 1fr;minmax(min,max)定义长宽范围的闭区间函数，在gird网格布局中使用。参数为尺寸值、fr、auto、min-content、max-contentminmax(100px, auto)repeat(重复次数,值..) IE网格列表尺寸的重复设置函数，用于gird布局● 第一个参数：重复次数；auto-fill：尽量最大网格数排列● 后面参数：重复的网格尺寸repeat(auto-fill,80px minmax(200px, auto)) ;.grid {display: grid;grid-template-columns: 200px max-content 100px auto 10%;grid-template-rows: 100px auto;/* 两行布局：行定义/列定义 */grid-template: minmax(100px,auto) 40px/ 200px 1fr 1fr;/* 两行三列命名布局，子元素需指定名称 grid-area */grid-template-areas: "head head right" "navmain right";grid-auto-rows: 50px;/* 网格间隙距离 */row-gap: 5px;column-gap: 10px;grid-gap: 5px 10px;}.grid div:first-child{/* 跨2个格子，两种方式 */grid-column: 1/3;grid-column: 1 /span 2;/* 命名布局，指定命名格子 */grid-area: right;}隐式网格通过grid-template-columns 、 grid-template-rows、grid-template等显示申明创建的网格为显示网格，当子元素超出时会自动换行进行网格排列，这部分称为隐式网格，隐式网格的大小默认是auto（根据内容自适应），可以通过

2 CSS布局秘籍-6脉神剑( 二 )

经验总结扩展阅读

肺结节10个人9个人有吗真的吗

提拉紧致按摩手法轻柔处理才能改善问题

卡西欧手表哪一款性价比高,卡西欧系列的手表都有哪些好的推荐？

淘宝聊天窗口打开失败怎么回事

男人的情感软肋在哪里：3个男人告诉你

观赏鱼饲养用水有哪些要求?

鸿蒙侧边栏怎么删除应用?

月经期的饮食保健

三星W999有什么配件

事业单位高温补贴多少钱事业单位高温补贴发放是每年都有吗

蜜蜡和翡翠怎么保养

连衣裙炎热的夏天，穿一件短款修身连衣裙游逛商厦绝对是最惬意的事情！

28岁女白领：靠出轨38岁领导走向事业顶峰，我却过得很煎熬

supreme羊驼真假怎么辨别?

桃胶什么季节吃最好

护肤先敷面膜还是先用芦荟胶?

春秋五霸是谁

灰紫色的翡翠手镯怎么样

久久说情感凤凰男要求AA制，多年后却向妻子求助，妻子回应：我有钱，但不帮

黄色和金黄色的区别?