逍遥阁

css网格布局

关键词: css grid

css网格布局

### repeat

将指定值重复指定次数

```
grid-template-columns: repeat(次数, 值);
grid-template-columns: repeat(3, 100px);
grid-template-columns: repeat(3, 100px 200px);
grid-template-columns: repeat(auto-fill, 100px);/*尽可能多的次数*/
```

### minmax

表示长度在指定范围内

```
width: minmax(最小值，最大值);
width: minmax(100px，1fr);
```

### fr单位(fraction的缩写)

表示长度的比例系数，比如2fr是1fr的2倍

可以与绝对长度的单位px结合使用

### display(父级元素)

```
display: grid;
display: inline-grid;
```

### grid-template-columns(父级元素)

定义每一列的宽度，可以使用像素px或者百分比%，还可以使用关键词auto表示浏览器自动计算

并不是定义子元素的宽度，定义的是网格的列宽，如果子元素需要充满网格，可以设置`width:100%;`或者`justify-items:stretch;`

```
grid-template-columns: 100px 100px 100px;
grid-template-columns: repeat(3, 100px);
grid-template-columns: 1fr 2fr 3fr;
```

### grid-template-rows(父级元素)

定义每一行的高度，可以使用像素px或者百分比%，还可以使用关键词auto表示浏览器自动计算

并不是定义子元素的高度，定义的是网格的行高，如果子元素需要充满网格，可以设置`height:100%;`或者`align-items:stretch;`

```
grid-template-rows: 100px 100px 100px;
grid-template-rows: repeat(3, 100px);
grid-template-rows: 1fr 2fr 3fr;
```

### grid-row-gap->row-gap(父级元素)

设置行间距

### grid-column-gap->column-gap(父级元素)

设置列间距

### grid-gap->gap(父级元素)

分别设置行间距和列间距

如果没有第2个值，表示和第1个值是一样的

```
grid-gap: 10px;
grid-gap: 10px 20px;
```

### justify-content(父级元素)

定义网格`整体`在容器内的水平位置，可以用谷歌浏览器审查容器元素看到网格线

flex-start 整体居左

flex-end 整体居右

center 整体居中

### align-content(父级元素)

定义网格`整体`在容器内的垂直位置，可以用谷歌浏览器审查容器元素看到网格线

flex-start 整体居上

flex-end 整体居下

center 整体居中

### justify-items(父级元素)

定义`子元素`在网格内的水平位置，可以用谷歌浏览器审查容器元素看到网格线

假设网格是`100px*100px`，子元素是`50px*50px`，可以调整子元素在网格内的水平位置

flex-start 居左

flex-end 居右

center 居中

stretch 宽度填充满网格

### align-items(父级元素)

定义`子元素`在网格内的垂直位置，可以用谷歌浏览器审查容器元素看到网格线

假设网格是`100px*100px`，子元素是`50px*50px`，可以调整子元素在网格内的垂直位置

flex-start 居上

flex-end 居下

center 居中

stretch 高度填充满网格

### 测试代码

```
<!DOCTYPE html>
<html>
<head>
    <title>grid</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <style>
        .box {
            display: grid;
            width: 540px;
            height: 720px;
            border: 1px solid red;
            grid-template-columns: repeat(auto-fill, 100px);
            grid-template-rows: repeat(auto-fill, 100px);
            justify-content: center;
            align-content: center;
            justify-items: stretch;
            align-items: stretch;
            gap: 10px;
        }

.item {
            text-align: center;
            border: 1px solid green;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>
</body>
</html>
```

admin
2021-08-21 19:48:03
css

文章分类

文章标签

文章归档

友情链接

css网格布局