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

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（根据内容自适应），可以通过grid-auto-rows、grid-auto-columns来设置隐式行列网格的尺寸大小。
网格分割线网格线是从头开始的，一般来说n行有n + 1根水平网格线，m列有m + 1根垂直网格线。设置子元素的网格坐标grid-row / grid-column时，用的坐标是基于网格线的，而不是格子。

文章插图

<style>.from {display: grid;grid-gap: 8px 5px;/* 设置行列网格 */grid-template-columns: repeat(2, 80px minmax(120px, 1fr));grid-template-rows: repeat(3, minmax(40px, auto));grid-auto-rows: minmax(40px, auto);/* 合并的写法 */grid-template: repeat(2, minmax(36px, auto)) / repeat(2, 80px minmax(180px, 1fr));}.from * {box-sizing: border-box;padding: 3px; margin: 0px;background-color: lightyellow;}.from label {display: flex; padding: 0 3px;align-items: center;justify-content: right;}.from>.form-cell {display: flex; padding: 0 10px;align-items: center;}.from>textarea {grid-column: 2/5;grid-column: 2/span 3;resize: none;}</style><div class="from"><label for="">姓名：</label><input type="text"><label for="">籍贯：</label><input type="text"><label for="">性别：</label><div class="form-cell"><input type="radio"><label for="">男</label>&nbsp;&nbsp;<input type="radio"><label for="">女</label></div><label for="">生日：</label><input type="date"><label for="">简介：</label><textarea name="" id="" cols="100" rows="5">1111</textarea></div>