Gird布局

分类: HTML5 作者: 浏览:40 时间:2019年4月29日 18:08 评论:0

Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同,Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素(成为 Grid Items 网格项),你就可以轻松使用 Grid(网格) 布局。

Gird通过将元素的父级设置display: grid,来声明这是一个grid容器,来转化为网格布局。

容器属性(Grid Container)

display: grid || inline-grid;  
// 声明一个容器,块状||内联  
grid-template-columns: 25% 25% 25% 25%;  
// 定义列,有多少个参数就多少列,参数之间用逗号隔开  
grid-template-rows: 25% 100px auto;  
// 定义行,有多少个参数就多少行,参数之间用逗号隔开  
grid-column-gap  
// 列间距  
grid-column-gap  
// 行间距  
justify-items:start | end | center | stretch(默认);  
// 水平方向对齐,左对齐|右对齐|居中|填充  
align-items: start | end | center | stretch;  
// 垂直方向对齐,顶部对齐|底部对齐|居中|填充  
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;  
// 整个容器水平对齐  
align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
// 整个容器垂直对齐  

单元格属性

grid-column-start  
grid-column-end  
grid-row-start  
grid-row-end  
赞(0)

评论(0)

  • 暂无评论