前端 grid 布局

最新推荐文章于 2024-04-17 13:03:25 发布

cs_dn_Jie

最新推荐文章于 2024-04-17 13:03:25 发布

阅读量387

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/cs_dn_Jie/article/details/126728152

版权

 # 父
 height: calc(100vh / 3) ;
 // 行
 grid-template-rows: repeat(3,100px); // 三行 每个高度100px
 grid-template-rows: repeat(3,100%);  // 三行 每个高度就是 calc(100vh / 3) 占满整个屏幕
 // 列
 grid-template-columns: 100px 100px 100px; // 三列 每个宽度为 100px
 grid-template-columns: 200px minmax(100px, 1fr) 200px; // 三列 左右固定宽度 中间自适应并且 最小100px ，最大宽度 = 浏览器宽度 - 左边宽度(200px) - 右边宽度(200px)
 grid-template-columns: repeat(3, 1fr)  // 三列 宽度自适应
 gap: 10px;  // 间距
 place-items:center; // 子元素 垂直居中
 
 # 子
 grid-column: 1 / span 2;  // 列 占2份
 grid-row: 1 / span 2;  // 行 占2份
 justify-self: center;  // 当前子元素 垂直居中