grid布局笔记

2019-1-17    分类: 前端资源

有点类似table布局,但是比table更灵活更优于flex布局。

 

案例:

.container {
  display: grid;
  grid-template-columns: 30px 30px 30px; //3列每列30px宽
  grid-template-rows: 30px 30px 30px;  //3行每行30px高
}

<div class="container">
  <!--无需在里面定义div元素,单元表格完全可以使用css来操作-->
</div>

 

 

网格容器(可以理解为<table>):

以下是容器拥有的属性

display: grid | inline-grid; //必须声明,为一个容器定义grid才能使用以下属性功能,块状|内联
//显示表格
grid-template-columns: 25% 25% 25% 25%; //列,多少个参数就多少个列
grid-template-rows: 25% 100px auto; //行,多少个参数就多少行
grid-template: //是grid-template-columns、grid-template-rows、grid-template-areas三个属性的简写
//隐示表格
grid-auto-columns:30px  //如果一个单元表格的位移超出了原来容器,那么布局会被破坏掉,可以预先设置好单元表格的宽度,此时超出的部分会自动生成列表且宽度为30px
grid-auto-columns / grid-auto-rows
grid-column-gap: 10px; //列之间的间距
grid-row-gap: 15px; //行间距
grid-gap: //grid-row-gap和grid-column-gap的缩写
justify-items:start | end | center | stretch(默认); //水平方向对齐(类似操作<td>里面的元素对齐),
左对齐|右对齐|居中|填满表 格(类似width:100%)

align-items: start | end | center | stretch;//垂直方向对齐(类似操作<td>里面的元素对齐),
顶部对齐|底部对齐|居中|填满表格(类 似height:100%)

place-items //<align-items> 和 <justify-items>的缩写
justify-content: start | end | center | stretch | space-around | space-between | space-evenly; //整个容器水平对齐
align-content: start | end | center | stretch | space-around | space-between | space-evenly; //整个容器垂直对齐
place-content:<align-content> <justify-content>的简写
grid-auto-flow: row(默认) | column | row dense | column dense //row时以行为准自动填满,column时以列为准自动往左填满
grid: 是grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 和 grid-auto- 
flow的缩写

grid-template-areas: //不常用,需要看案例,要多个值配合才行

 

 

网格项(可以理解为<tr><td>):

以下是单元格拥有的属性

单个表单的合并和位移,以下4个属性需要同时配合(需看案例配合):
grid-column-start
grid-column-end
grid-row-start
grid-row-end

等同以下

grid-column //grid-column-start和grid-column-end缩写
grid-row //grid-row-start和grid-row-end缩写
justify-self: start | end | center | stretch; //单个表格的水平方向对齐
align-self: start | end | center | stretch; //单个表格的垂直方向对齐
place-self: //align-self 和 justify-self 的简写形式

grid-area//不常用

 

 

repeat()函数

display不能为 inline-grid;

案例1
grid-template-columns: 1fr 1fr 1fr;
等同
grid-template-columns: repeat(3, 1fr); //3个1fr列,一个3列
案例2
grid-template-columns: repeat(5, 1fr 2fr); //5个 1fr 2fr,也就是一个10列
案例3
grid-template-columns: 10px repeat(8, 1fr) 20px; //第一列为10px,第二到第9列为1fr,最后一列为20px
案例4
grid-template-columns: repeat(auto-fill或者auto-fit, 20px); //auto-fill、auto-fit会以容器的宽度和20px为准,来决定重复的次数

 

minmax()

display不能为 inline-grid;

minmax(最小值,如果小于最小值就会触发该值)

grid-template-columns: repeat(3,minmax(50px,1fr)); //3个以大于或等于50px的列宽

grid-template-columns: repeat(3,minmax(50px,1fr));

 

自适应效果:

display不能为 inline-grid;

grid-template-columns: repeat(auto-fill,minmax(50px,1fr)); //自适应布局

 

参考:

www.css88.com/archives/8510