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

news2025/1/10 1:34:57

文章目录

- 一.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;
}