Grid 布局有哪些常用属性？

CSS Grid 布局是一种强大的二维布局系统，适用于复杂的网页布局。以下是 Grid 布局中常用的属性：

容器属性（父元素）

display：定义容器为 Grid 布局。

.container {
    display: grid; /* 或 inline-grid */
}

grid-template-columns：定义列的大小和数量。

.container {
    grid-template-columns: 100px 1fr 2fr;
}

grid-template-rows：定义行的大小和数量。

.container {
    grid-template-rows: 50px 100px;
}

grid-template-areas：定义网格区域。

.container {
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
}

grid-gap：定义行和列之间的间距（grid-row-gap 和 grid-column-gap 的简写）。
```
.container {
    grid-gap: 10px 20px; /* 行间距 10px，列间距 20px */
}
```
justify-items：定义子元素在单元格内的水平对齐方式。
```
.container {
    justify-items: start | end | center | stretch;
}
```
align-items：定义子元素在单元格内的垂直对齐方式。
```
.container {
    align-items: start | end | center | stretch;
}
```

justify-content：定义整个网格在容器内的水平对齐方式。

.container {
    justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

align-content：定义整个网格在容器内的垂直对齐方式。

.container {
    align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

子元素属性（子元素）

grid-column-start 和 grid-column-end：定义子元素在列上的起始和结束位置。
```
.item {
    grid-column-start: 1;
    grid-column-end: 3;
}
```
grid-row-start 和 grid-row-end：定义子元素在行上的起始和结束位置。
```
.item {
    grid-row-start: 1;
    grid-row-end: 3;
}
```
grid-column 和 grid-row：grid-column-start 和 grid-column-end 的简写，以及 grid-row-start 和 grid-row-end 的简写。
```
.item {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
```
grid-area：定义子元素在网格区域中的位置。
```
.item {
    grid-area: header;
}
```
justify-self：定义单个子元素在单元格内的水平对齐方式。
```
.item {
    justify-self: start | end | center | stretch;
}
```
align-self：定义单个子元素在单元格内的垂直对齐方式。
```
.item {
    align-self: start | end | center | stretch;
}
```

示例代码

以下是一个完整的示例，展示如何使用 Grid 布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid 示例</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 100px 1fr 2fr;
            grid-template-rows: 50px 100px;
            grid-gap: 10px;
            justify-content: center;
            align-content: center;
            height: 300px;
            border: 1px solid #000;
        }
        .item {
            background-color: lightblue;
            padding: 10px;
        }
        .item1 {
            grid-column: 1 / 3;
            grid-row: 1;
        }
        .item2 {
            grid-area: 1 / 3 / 2 / 4;
        }
        .item3 {
            justify-self: end;
            align-self: end;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
</body>
</html>

总结

容器属性：display、grid-template-columns、grid-template-rows、grid-template-areas、grid-gap、justify-items、align-items、justify-content、align-content
子元素属性：grid-column-start、grid-column-end、grid-row-start、grid-row-end、grid-column、grid-row、grid-area、justify-self、align-self

通过灵活使用这些属性，可以实现各种复杂的二维布局需求。Grid 布局在现代网页设计中非常强大，能够极大地简化布局代码。

Grid Grid布局网格布局网页布局容器属性子元素属性

学在每日，进无止境！更多精彩内容请关注微信公众号。

原文出处：内容由AI生成仅供参考，请勿使用于商业用途。如若转载请注明原文及出处。

出处地址：http://www.07sucai.com/tech/753.html

博客站

Grid 布局有哪些常用属性？

容器属性（父元素）

子元素属性（子元素）

示例代码

总结

喜欢此内容的人还喜欢

热门头条

推荐内容