CSS 网格布局(grid)-小结

2023-09-20 187 阅读4分钟

经过多半个月的学习, 基本上把 CSS 网格布局 的基本知识学习了一遍
本篇文章我们就对这几天的学习做一个简单的汇总, 方便复习使用

基础使用

基本概念

juejin.cn/post/727387…

设置 display：grid 或 display：inline-grid 定义网格容器
通过 grid-template-columns 和 grid-template-rows 属性设置网格轨道
fr 单位、repeat() 和 minmax() 使用
什么是网格线？实现跨轨道放置网格元素
网格间距（gap）设置和注意事项, 展示效果样式

线的定位

juejin.cn/post/727482…

主要讲了一下怎样实现跨轨道放置元素(类似表格的合并单元格), 和他的简写方式
通过 grid-column(row)-start 和 grid-column(row)-end 设置元素的边线, 即可达到"合并单元格"的效果
支持使用负数, -1 表示最后一条线
如果只延伸一个轨道. 即xx-start: 3; xx-end: 4时, 可以省略 xx-end
span 可以表示轨道数量, xx-start: 3; xx-end: span 2 等价于 xx-start: 3; xx-end: 5
grid-column 或 grid-row 可以直接设置 start end (例: grid-column: 3 / 4)
grid-area: 1 1 2 2, 按顺序: grid-row-start grid-column-start grid-row-end grid-column-end

模板区域

juejin.cn/post/727522…

使用 grid-area 属性命名网格项目，然后在 grid-template-areas 属性中引用该名称
留出空单元的方法是使用句点符，即：.
简写 grid-template 和 grid

命名线布局

juejin.cn/post/727628…

grid-template-columns: [one] 1fr [two] 1fr [three]; 命名线 one two three
grid-colum: one / three, 还是这种方式去使用, 只是把"数字"的线名改成了自定义线名
合理的 -start 和 -end 作为后缀, 可以形成网格区域
网格区域隐式定义了线名称, 可以直接使用
repeat 函数高级用法, 定义定义重复网格的同时设置网格线名称

自动定位

juejin.cn/post/727644…

默认定位: 不对项目指定位置信息, 每个单元格中一个
grid-template-rows 和 grid-auto-rows 设置行的大小, minmax()的使用
按列自动定位(改变排列的方向), grid-auto-flow 默认值为 row, 可以改为 column
按自动定位时会出现空白的情况, 可以使用 grid-auto-flow: dense 变成紧凑型(实际上为 row dense)

盒模型对齐

juejin.cn/post/727739…

对齐元素到块轴 align-items 和 align-self, 对齐网格轨道到块轴 align-content
对齐元素到行轴 justify-items 和 justify-self, 对齐网格轨道到行轴 justify-content
place-items 为 align-items 和 justify-items 的简写;
place-self 为 align-self 和 justify-self 的简写;
place-content 为 align-content 和 justify-content 的简写;
对齐和自动外边距, margin: auto

排版方向

juejin.cn/post/727779…

水平方向从右到左排布, 可以使用 direction
垂直方向排布, 可以使用 writing-mode
都会导致线的顺序和方向发生改变, 在使用的时候需要注意一下

渐进增强

juejin.cn/post/727895…

网格布局到现在也已经发展了很多年了, 可以在生产环境中使用了
使用网格布局后有部分属性设置会失效, 如 float 和 display: inline-block
如果确实需要判断浏览器是否支持网格布局并做进一步优化, 可以使用 @supports 进行处理

用法示例

常用页面布局

juejin.cn/post/727926…

通过网格布局我们可以很容易的实现一个页面的基础布局
在基础布局的基础上通过 @media 实现响应式布局

栅格布局

juejin.cn/post/727966…

通过网格布局我们可以很容易的实现一个栅格布局
自动放置实现响应式布局, 通过 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) 的使用实习响应式布局

展开收起动画

juejin.cn/post/728005…

实现高度变化的动画效果, 实际高度可以根据内容变化(不要求固定高度)
JS计算高度, 通过计算高度实现真实高度和 0 之间的过渡
max-height, 通过使用 max-height, 模拟实现高度的变化
网格布局(grid), 使用网格中的 fr 单位实现

结束

通过这些文档的学习基本上可以掌握网格布局的基本用发了
在未来的几天我会根据API规范写个文档, 方便查询API的用法