# 父
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; // 当前子元素 垂直居中
前端 grid 布局
最新推荐文章于 2024-04-17 13:03:25 发布