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

一.Grid 是什么

CSS 中 Grid 是一种强盛的布局方式，它可以同时处理行和列
Grid 和Flex有一些类似，都是由父元素包裹子元素利用
二.示例代码

都是基于这个html代码

1. import less from './index.module.less'
3. //grid 布局
4. const Grid = () => {
5.   return (
6.     <div className={less.box}>
7.       <div>1</div>
8.       <div>2</div>
9.       <div>3</div>
10.       <div>4</div>
11.       <div>5</div>
12.     </div>
14.   )
15. }
17. export default Grid

复制代码

1. 基础利用 - 固定宽高

1. .box {
2.   margin: 50px auto;
3.   display: grid;
4.   grid-template-rows: 100px 50px; //每行的高度
5.   grid-template-columns: 100px 50px 50px; // 每列的宽度
6.   width: 300px;
7.   height: 300px;
8.   border: 1px solid red;
9. }
11. .box div {
12.   border: 1px solid green;
13.   text-align: center;
14. }

复制代码

2.百分百宽高

1. .box {
2.   margin: 50px auto;
3.   display: grid;
4.   grid-template-rows: 50% 50%; //每行的高度
5.   grid-template-columns: 33% 33% 33%; // 每列的宽度
6.   width: 300px;
7.   height: 300px;
8.   border: 1px solid red;
9. }
11. .box div {
12.   border: 1px solid green;
13.   text-align: center;
14. }

复制代码

3.重复设置-repeat

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

1. .box {
2.   margin: 50px auto;
3.   display: grid;
4.   grid-template-rows: repeat(2,30%);
5.   grid-template-columns: repeat(2,50%);
6.   width: 300px;
7.   height: 300px;
8.   border: 1px solid red;
9. }
11. .box div {
12.   border: 1px solid green;
13.   text-align: center;
14. }

复制代码

此中的第五个div没有设置高度，所以自顺应

4.单位-fr

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

1. .box {
2.   margin: 50px auto;
3.   display: grid;
4.   grid-template-rows: 1fr 2fr;
5.   grid-template-columns: 150px 1fr 2fr;
6.   width: 300px;
7.   height: 300px;
8.   border: 1px solid red;
9. }
11. .box div {
12.   border: 1px solid green;
13.   text-align: center;
14. }

复制代码

5.自顺应

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

1. .box {
2.   margin: 50px auto;
3.   /* width: 300px; */
4.   height: 200px;
5.   display: grid;
6.   grid-template-columns: 10vw auto 20vw;
7.   border: 1px solid #3333;
8. }
10. .box div {
11.   padding: 20px;
12.   background-clip: content-box;
13.   border: 1px solid green;
14.   text-align: center;
15.   line-height: 160px;
16. }

复制代码

6.间距定义

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

1. .box {
2.   margin: 50px auto;
3.   /* width: 300px; */
4.   height: 200px;
5.   display: grid;
6.   grid-template-columns: 10vw auto 20vw;
7.   border: 1px solid #3333;
8.   gap: 20px 10px;
9. }
11. .box div {
12.   padding: 20px;
13.   background-clip: content-box;
14.   border: 1px solid green;
15.   text-align: center;
16.   line-height: 160px;
17. }

复制代码

其他

关于grid 布局剩余后续在继续更新

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。