CSS Grid 布局全攻略：从基础到进阶

文章目录

- 一.Grid 是什么
- 二.示例代码
- - 1. 基础使用 - 固定宽高
  - 2.百分百宽高
  - 3.重复设置-repeat
  - 4.单位-fr
  - 5.自适应
  - 6.间距定义
  - 其他

一.Grid 是什么

CSS 中 Grid 是一种强大的布局方式，它可以同时处理行和列
Grid 和Flex有一些类似，都是由父元素包裹子元素使用

二.示例代码

都是基于这个html代码

import less from './index.module.less'//grid 布局
const Grid = () => {return (<div className={less.box}><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div>)
}export default Grid

1. 基础使用 - 固定宽高

.box {margin: 50px auto;display: grid;grid-template-rows: 100px 50px; //每行的高度grid-template-columns: 100px 50px 50px; // 每列的宽度width: 300px;height: 300px;border: 1px solid red;
}.box div {border: 1px solid green;text-align: center;
}

在这里插入图片描述

2.百分百宽高

.box {margin: 50px auto;display: grid;grid-template-rows: 50% 50%; //每行的高度grid-template-columns: 33% 33% 33%; // 每列的宽度width: 300px;height: 300px;border: 1px solid red;
}.box div {border: 1px solid green;text-align: center;
}

在这里插入图片描述

3.重复设置-repeat

repeat ：统一设置值，第一个参数为重复数量，第二个参数是重复值

.box {margin: 50px auto;display: grid;grid-template-rows: repeat(2,30%); grid-template-columns: repeat(2,50%); width: 300px;height: 300px;border: 1px solid red;
}.box div {border: 1px solid green;text-align: center;
}

其中的第五个div没有设置高度，所以自适应
在这里插入图片描述

4.单位-fr

grid 中的 fr单位和 flex布局中的 grow属性类似

.box {margin: 50px auto;display: grid;grid-template-rows: 1fr 2fr; grid-template-columns: 150px 1fr 2fr; width: 300px;height: 300px;border: 1px solid red;
}.box div {border: 1px solid green;text-align: center;
}

在这里插入图片描述

5.自适应

在网格布局可以使用auto属性设置用来获取剩余所有空间

.box {margin: 50px auto;/* width: 300px; */height: 200px;display: grid;grid-template-columns: 10vw auto 20vw;border: 1px solid #3333;
}.box div {padding: 20px;background-clip: content-box;border: 1px solid green;text-align: center;line-height: 160px;
}

在这里插入图片描述

6.间距定义

使用gap来来定义间距
row-gap:30px:定义行间距
column-gap:10px:定义列间距

.box {margin: 50px auto;/* width: 300px; */height: 200px;display: grid;grid-template-columns: 10vw auto 20vw;border: 1px solid #3333;gap: 20px 10px;
}.box div {padding: 20px;background-clip: content-box;border: 1px solid green;text-align: center;line-height: 160px;
}