# grid-css

**Repository Path**: rcliang/grid-css

## Basic Information

- **Project Name**: grid-css
- **Description**: css布局网格布局
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-07-11
- **Last Updated**: 2024-07-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# grid-css

#### 介绍
css布局网格布局

https://www.bilibili.com/video/BV1EW4y1v7pm/?p=2&spm_id_from=pageDriver&vd_source=46916894c36da11bac5ac08c1f7f1bfa

#### 申明网格布局 

```html
display: grid;
```



#### 设置布局格式   

```html
/* 设置布局格式 row行布局;column列布局*/
grid-auto-flow: row;
```

#### 设置每列多行跟宽度

```html
/* 设置多少列，且每列的宽度,如果超出则自动分配剩余的宽度 */
/* 固定值 */
grid-template-columns: 100px 100px 200px;  
/* 按照比例（将元素的宽度分寸按照fr的和分寸多少分，然后再按照比例计算每一个的宽度）*/
grid-template-columns: 1fr 1fr 2fr;
/* 百分比 */
grid-template-columns: 10% 20% 20%;
/* 例如混合使用元素的总宽度减掉150px再计算分配fr */
grid-template-columns: 1fr 150px 2fr;
/* repeat重复值设置如果元素宽度都一样均分则可以如下设置，分成三份，每份宽度100px */
grid-template-columns: repeat(3,100px);
/* minmax最大值与最小值 */
grid-template-columns: repeat(3,minmax(20px,100px));
/* auto-fill设置元素宽度，自动分配元素个数 */
grid-template-columns: repeat(auto-fill,100px);
```

#### 设置多少行，且每行的宽度

```html
 /* 设置多少行，且每行的宽度,如果超出则自动分配剩余的宽度 */
 grid-template-rows: 50px 60px;
/* 按照比例 （将元素的宽度分寸按照fr的和分寸多少分，然后再按照比例计算每一个的宽度）*/
grid-template-rows: 1fr 3fr;
/* 百分比 */
grid-template-rows: 10% 30%;
/* 例如混合使用元素的总宽度减掉150px再计算分配fr */
grid-template-rows: 1fr 150px 2fr;
/* repeat重复值设置如果元素宽度都一样均分则可以如下设置，分成三份，每份宽度100px */
grid-template-rows: repeat(3,100px);
```

#### 设置超出列宽度元素的宽(固定值)

```html
grid-auto-columns: 15px;
```

#### 设置超出行宽度元素的宽(固定值)

```html
grid-auto-rows: 15px;
```

#### 设置子元素占用多少列和行

```
/* 设置第一行低三个元素的占用2行2列的宽高 */
grid-row:1 / span 2   /* 如果1(grid-row:span 2)不填则是元素默认所在的位置 */
grid-columns:3 / span 2  /* 如果3(grid-columns:span 2)不填则是元素默认所在的位置 */
/*另外一直写法,当前元素占多少行多少列*/
grid-area:span 2 / span2
```

#### 容器的对齐方式

```
/*水平方向 stretch拉伸默认值 start顶部对齐  end底部对齐  center居住对齐 
space-between两端对齐  space-around环绕对齐，左右两侧平分剩余空间  space-evenly每个项目的空间相等平均对齐*/
align-content: center;
/*垂直方向 stretch拉伸默认值 start顶部对齐  end底部对齐  center居住对齐 
space-between两端对齐  space-around环绕对齐，左右两侧平分剩余空间 space-evenly每个项目的空间相等平均对齐*/
justify-content: center;

/*合并写法*/
place-content:center center
```

#### 单元格对齐方式

```
/*水平方向 stretch拉伸默认值 start顶部对齐  end底部对齐  center居住对齐 
space-between两端对齐  space-around环绕对齐，左右两侧平分剩余空间  space-evenly每个项目的空间相等平均对齐*/
align-items: center;
/*垂直方向 stretch拉伸默认值 start顶部对齐  end底部对齐  center居住对齐 
space-between两端对齐  space-around环绕对齐，左右两侧平分剩余空间 space-evenly每个项目的空间相等平均对齐*/
justify-items: center;
/*合并写法*/
place-items:center center
```

#### 单独设置某个单元格对齐方式

```
/*水平方向 stretch拉伸默认值 start顶部对齐  end底部对齐  center居住对齐 
space-between两端对齐  space-around环绕对齐，左右两侧平分剩余空间  space-evenly每个项目的空间相等平均对齐*/
align-items: center;
/*垂直方向 stretch拉伸默认值 start顶部对齐  end底部对齐  center居住对齐 
space-between两端对齐  space-around环绕对齐，左右两侧平分剩余空间 space-evenly每个项目的空间相等平均对齐*/
justify-self: center;
/*合并写法*/
place-self:center center
```

#### 设置边框间距

```
/*设置行间距*/
grid-row-gap:5px;
/*设置列间距*/
grid-column-gap:5px;
/*合并写法参数一行间隙，列间隙*/
gap:15px 10px
```




#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)