学习一下grid 布局什么是grid布局网格布局,与flex布局比较,flex是一维布局,grid是二维布局; 它把网

什么是grid布局

网格布局,与flex布局比较,flex是一维布局,grid是二维布局; 它把网页划分为一个个网格,可任意组合不同网格,做出各种各样的布局

设置方法

.grid {
    display: grid;
    /*display: inline-grid*/
}

grid-template-columns|grid-template-rows 定义列宽|行高 repeat
row-gap | column-gap|gap 定义行与行|列与列之间的间隔, gap是简写
grid-template-areas 用于定义区域,用相同字母表示可以进行合并单元格的操作,用. 表示不需要使用的区域
grid-auto-flow : row | column | row dense | column dese 先行后列|先列后行 dense 表示尽可能填满空格
justify-items(单元格内水平位置),align-items(单元格内容的垂直位置),place-items (缩写) 可选值[start|end|cneter|stretch]
justify-content (容器的水平位置) ,align-content(容器内的垂直位置), place-content(简写),可选值[start | end | center | stretch | space-around | space-between | space-evenly]
grid-auto-columns ,grid-auto-rows 定义浏览器自动创建的多余的列宽和行高,如果不指定,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高.使用方法与 grid-template-columns|grid-template-rows 相同

了解过felx布局后这几个属性可以轻易的理解,以下深入学习一下grid-template-columns|grid-template-rows 的使用

/*基础使用*/

.grid {
    display : grid;
    grid-template-colums: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

repeat(次数,重复值)

如果要设置的行数或者列数很多,可以通过repeat() 设置相同长度

/*repeat()*/
.grid {
    display : grid;
    grid-template-colums: repeat(3,100px);
    grid-template-rows: repeat(3,100px);
}

auto-fill 让每行或者每一列容纳尽可能的单元格

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

fr 表示比例关系, 2fr是1fr 的两倍

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /*表示等宽*/
}

minmax(min,max)

产生一个长度范围,表示长度在这个范围

auto 表示浏览器自己决定长度

grid-column-start,grid-cloumn-end,grid-row-start,grid-row-end 指定项目位置 span 关键字
grid-column ,grid-row 是上面两两的简写
grid-area 与grid-template-areas配合可以选择放置哪一个区域,也可以作为1的四个属性的简写
justify-self,align-self,place-self(简写) 设置单元格内容的水平(垂直) 位置,只作用于单个项目,可选值[ start | end | center | stretch]

.grid {
    display: grid;
    grid-template-columns: 25% 65%;
}

.grid {
    display: grid;
    grid-template-columns: repeat(12,1fr);
}