首页 > 编程知识 正文

vue grid布局,前端grid布局

时间:2023-05-05 08:49:59 阅读:231773 作者:4950

目录

容器属性

项目属性


参考twdtttgrid教程:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

Grid 布局的属性分成两类。一类定义在容器上面,称为容器属性;另一类定义在项目上面,称为项目属性

容器属性

设为grid布局:display: grid;

间隔:gap:10px 等价于 row-gap:10px ;column-gap:10px; 简写为:gap:10px 10px ;

gap:5px 10px 等价于row-gap:5px ;column-gap:10px ;

设为3列平均分布:grid-template-columns: 1fr 1fr 1fr; 或者:grid-template-columns: repeat(3, 1fr);

设为3行按比例分布:grid-template-rows: 1fr 2fr 50px;

justify-items属性设置单元格内容的水平位置(左中右),align-items属性设置单元格内容的垂直位置(上中下)。

justify-items: start | end | center | stretch;align-items: start | end | center | stretch;

justify-content属性是整个内容区域在容器里面的水平位置(左中右),align-content属性是整个内容区域的垂直位置(上中下)

   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属性:下边框所在的水平网格线

以上示例中,item1的内容可为:(以下4个红框中的内容是等价的)

justify-self属性设置单元格内容的水平位置(左中右),跟justify-items属性的用法完全一致,但只作用于单个项目。

align-self属性设置单元格内容的垂直位置(上中下),跟align-items属性的用法完全一致,也是只作用于单个项目。

justify-self: start | end | center | stretch;align-self: start | end | center | stretch;

 

 

 

 

 

 

 

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。