CSS3
文章目录
- CSS3
- 1 CSS3 响应式布局
- 1.3 Grid 布局
- 1.3.1 Grid 布局简介
- 1.3.2 开启grid 布局
- 1.3.3 排列元素
- 1.3.4 对齐方式
1 CSS3 响应式布局
1.3 Grid 布局
【【迄今为止最易懂】2分钟掌握 CSS Grid 布局】 https://www.bilibili.com/video/BV18p411A7JB?share_source=copy_web&vd_source=415854ff1b8f03d642857b6a175f8102
1.3.1 Grid 布局简介
一种二维布局方式
可以同时控制行和列的排布以及对齐方式
Grid 由水平线和垂直线组成。
两个水平线间的区域叫行轨道。
两个垂直线之间的区域叫列轨道。
1.3.2 开启grid 布局
给外层容器设置display属性值为 grid
这样容器的直接子元素就会自动成为grid 布局的元素
【举个栗子】
一个div中嵌套有6个div
改成3列布局
这样是固定宽度，也可以用fr 设置为浮动宽度
fr 是 grid 布局专用单位【代表grid 剩余空间】
设置行、列间距
也可以直接使用gap属性 直接统一设置
1.3.3 排列元素
使用grid-template-areas
例如一个页面，头部和底部的宽度占满屏幕，侧边占1/3，内容占2/3。
指定区域
然后各个元素分别指定对应的区域
1.3.4 对齐方式
和flex 类似
它也有水平方向的行轴和垂直方向的块轴
【在垂直方向对齐子元素】
居中
靠下
【在水平方向对齐子元素】
居中对齐
靠右对齐
两端对齐
【当行轨道和列轨道小于父元素】
【可以对轨道进行对齐】
垂直方向居中：
垂直靠下：
水平方向居中对齐
靠右对齐
两端对齐
