Grid网格布局

Grid布局是一个二维的布局方法,纵横两个方向总是同时存在。

作用在grid容器上作用在grid子项上
grid-template-columnsgrid-column-start
grid-template-rowsgrip-column-end
grid-template-areasgrid-row-start
grid-templategrid-row-end
grid-column-gapgrid-column
grid-row-gapgrid-row
grid-gapgrid-area
justify-itemsjustify-self
align-itemsalign-self
place-itemsplace-self
justify-content
align-content
place-content

作用在grid容器上的属性

grid-template-columnsgrid-template-rows对网格进行横纵划分,形成二维布局。单位可以是像素、百分比、自适应以及fr单位(网格剩余空间比例单位)。

grid-template-areasgrid-templategrid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区。grid-templategrid-template-rowsgrid-template-columnsgrid-template-areas属性的缩写。

grid-column-gapgrid-row-gap属性是用来定义网格中网格间隙的尺寸。

grid-gap属性是grid-column-gapgrid-row-gap属性的缩写。

justify-itemsalign-itemsjustify-items指定了网格元素的水平呈现方式,align-items指定了网格元素的垂直呈现方式。

place-items可以让align-itemsjustify-items属性写在单一声明中。

取值含义
stretch默认值,拉伸。表现为水平或垂直填充。
start表现为容器左侧或顶部对齐。
end表现为容器右侧或底部对齐。
center表现为水平或垂直居中对齐。

justify-contentalign-contentjustify-content指定了网格元素的垂直分布方式。align-content指定了网格元素的水平分布方式。

place-content可以让justify-contentalign-content属性写在一个CSS声明中。

取值含义
stretch默认值,拉伸。表现为水平或垂直填充。
start表现为容器左侧或顶部对齐。
end表现为容器右侧或底部对齐。
center表现为水平或垂直居中对齐。
space-between表现为两端对齐。
space-around享有独立不重叠的空白空间。
space-evenly平均分配空间。

作用在grid子项上的属性

取值含义
grid-column-start水平方向上占据的起始位置。
grid-column-end水平方向上占据的结束位置。(span属性)
grid-row-start垂直方向上占据的起始位置。
grid-row-end垂直方向上占据的结束位置。(span属性)
grid-columngrid-column-start与grid-column-end的缩写。
grid-rowgrid-row-start与grid-row-end的缩写。
grid-area表示当前网络所占用的区域。
justify-self单个网格元素的水平对齐方式。
align-self单个网格元素的垂直对齐方式。
place-selfalign-self与justify-self的缩写。

Grid仿百度搜索风云榜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Grid仿百度搜索风云榜样式 By ToDo Blog</title>
    <style>
        .box {
            width: 280px;
            height: 352px;
            margin: 20px auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(4, 1fr);
            grid-template-areas:
                "a1 a2 a2"
                "a3 a2 a2"
                "a4 a4 a5"
                "a6 a7 a7";
            grid-gap: 6px 6px;
        }
        .box div {
            background: red;
        }
        .box div:nth-child(1) {
            grid-area: a1;
        }
        .box div:nth-child(2) {
            grid-area: a2;
        }
        .box div:nth-child(3) {
            grid-area: a3;
        }
        .box div:nth-child(4) {
            grid-area: a4;
        }
        .box div:nth-child(5) {
            grid-area: a5;
        }
        .box div:nth-child(6) {
            grid-area: a6;
        }
        .box div:nth-child(7) {
            grid-area: a7;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

不起眼的小广告