Grid 布局

前端 2018-01-14

Grid 布局是什么?

它是一个二维的网格布局。

两个核心部分:父元素和子元素

二维有:行 (row)、列 (column)

直接贴代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gird</title>
</head>
<body>

    <div class="wrapper">
        <div class='letter'>
            A
        </div>
        <div class='letter'>
            B
        </div>
        <div class='letter'>
            C
        </div>
        <div class='letter'>
            D
        </div>
        <div class='letter'>
            E
        </div>
        <div class='letter'>
            F
        </div>
        <div class='letter'>
            G
        </div>
        <div class='letter'>
            H
        </div>
        <div class='letter'>
            I
        </div>
    </div>

    <div class="footer">
        <div class="item">J</div>
        <div class="item">K</div>
        <div class="item">L</div>
    </div>

    <style>
        body,html {
            padding: 0;
            margin: 0;
        }

        .wrapper {
            width: 600px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-column-gap: 1px; /* 列的网格线间的间距 1px */
            grid-row-gap: 1px; /* 行的网格线间的间距 1px */
            background-color: black;
        }

        .footer{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr; /* 这里应该用 grid-template-columns: repeat(3, 1fr); 的。这样更简洁 */
            grid-template-rows: 1fr;
            grid-column-gap: 1px; 
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        .letter,.item {
            background-color: #0069b3;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            font-size: 70px;
            color: white;
            line-height: 1;
            font-family: 'hobeaux-rococeaux-background', Helvetica;
            font-weight: 200;
            cursor: pointer;
            transition: all .3s ease;
        }
    </style>
</body>
</html>

效果如下:
效果


我只是写了简单的笔记,没有实例截图,推荐大家看参考资料里的原文博客:带你入门 CSS Grid 布局

学习CSS Grid

首先我们要设置个网格容器

使用 display: grid 或者 display: inline-grid ,然后网格布局要有子元素,然后默认子元素是按行排列的。

设置显示网格

使用 grid-template-columnsgrid-template-rows 可以显式的设置网格布局的列和行。

/* 设置了两列,宽度分别为 20px 30px */
grid-template-columns: 20px 30px;

/* 设置了两行,高度分别为 20px 30px */
grid-template-rows: 20px 30px;

也可以使用其他单位,比如 百分比,rem 等。

另外有一个弹性单位:fr,这个按等分分的,比如:

grid-template-rows: 1fr 1fr 2fr;

上面代码中 1fr 表示的为布局可用空间大小的 1/4 ,因为上面 1 + 1 + 2 = 4。

当遇到多种长度单位时,fr 的计算这样的:

grid-template-rows: 20% 20px 1fr 3fr;
/* 这时候的 1fr = 网格大小 - 网格自身的20% - 20px 然后再除以 4 等分  */
设置最小和最大尺寸

使用 minmax() 接受两参数:最小值和最大值。

/* 高度根据元素大小变化但最大为 200px,最小宽度为 200px,最大为网格大小(父元素)的 50% */
grid-template-rows: minmax(auto, 200px);
grid-template-columns: minmax(200px, 50%);
设置多个相同尺寸的元素

使用 repeat() ,接受两参数:元素的个数,具体的尺寸大小。

/* 三列大小都为 200px,三行大小都为 200px */
grid-template-columns: repeat(3, 200px);
grid-template-columns: repeat(3, 200px);
/* 也可以这样写 */
grid-template-columns: 20px 30px repeat(2, 1fr) 40px;
网格间的间距
  • grid-row-gap:行与行间的间距
  • grid-column-gap:列与列间的间距
  • grid-gap:上面的缩写版,第一个参数为 grid-row-gap 的值,第二个参数为 grid-column-gap 的值,若只有一个值则两者都用同一个值。
grid-column-gap: 1px; /* 列的网格线间的间距 1px */
grid-row-gap: 1px; /* 行的网格线间的间距 1px */

/* 可以简写为:*/
grid-gap: 1px;
通过网格线坐标来定位 网格项目(grid items)

网格线怎么理解?我们拿汉字 来举例(因为我不想画图)。我们把这个看成是一个两行两列的布局,那么从左边数起,是不是有三个竖线,那么它们分别为 1,2,3。同样的从上往下数也有:1,2,3。

PS:感觉你也可以看出是 x,y 坐标图,只是原点是 (1, 1) 而不是 (0, 0),注意:这个是写在子元素的样式。、

  • grid-row-start:起始位置,接受参数为 网格线位置
  • grid-row-end:结束位置,接受参数为 网格线位置(可省略)
  • grid-column-start
  • grid-column-end
  • grid-row:起始和结束位置的简写,如果一个值时则只是设置起始位置
  • grid-column:如果有两个值时,则要用 / 隔开
  • grid-area:grid-row-start, grid-column-start, grid-row-end, grid-column-end
  • span 关键字后跟着一个数字,等于设置结束位置 = 起始位置加该数字行或列数
.item-1{
    grid-row-start: 2;
    grid-row-end: 3;
    /* 上面可以省略 grid-row-end */
    grid-row-start: 2;

    /* 同样的 grid-column-end 也一样 */
    grid-column-start: 2;
    grid-column-end: 3;
    /* 上面可以省略 grid-column-end */
    grid-column-start: 2;

    /* 也可以这样写 */
    grid-row: 2;
    grid-column: 2 / 3;
    grid-column: 2 / span 1;

    grid-area: 2 / 2;
    grid-area: 2 / 2 / 3;
}
网格线命名和使用

在父元素在定义网格时,用 [网格线名] 去定义。

.warp{
    display: grid;
    grid-template-rows: [row-1-s] 1fr [row-2-s] 1fr [row-2-e];
}
.item-1{
    grid-row: row-1-s / row-2-e;
}
repeat() 也可以命名网格线
.warp{
    display: grid;
    grid-template-rows: repeat(2, [row-s] 1fr [row-e]);
    grid-template-columns: repeat(2, [column-s] 1fr [column-e]);
}

这样的话,除了最外的框框那个网格线是一个命名,其他的网格线都有两个命名。然后它会自动加数字,避免命名冲突。以 字为例:

    |--------row-s---------| 
    column-s       |     column-e 2
    |---row-s 2|row-end ---|
    |  column-e|column-s 2 |
    |-------row-e 2--------|

隐式网格
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow:网格流向,默认为 row 也可以设置为 column
.warp {
    grid-template-rows: 50px;
    grid-template-columns: repeat(2, 2fr);
    grid-auto-rows: 200px;
}
/* 效果是:如果子元素有多个,第一行的高度为 50px,其它行的元素高度则是 200px */
隐式命名网格线名称?不太懂为什么要这样,我就不写了。
通过 z-index 来确定层级关系
网格项目的对齐方式
  • 网格布局容器
    • justify-items:横向
    • align-items:纵向
  • 子元素自身
    • justify-self
    • align-self
  • 有以下属性:
    • auto
    • normal
    • start 网格线为 1
    • end 网格线为 n
    • center 居中
    • stretch 铺满整行或者整列
网格内容的对齐方式
  • align-content:纵向
  • justify-content:横向
  • 属性:
    • normal
    • start:靠网格布局大小起始边
    • end:靠网格布局大小结束边
    • center:居中
    • space-around:相当于 item 加上左右外边距,外边距不重叠
    • space-between:起始和结束位置的 item 靠边,其他等边距
    • space-evenly:所有 item 都等边距

参考资料


本文由 阿涛 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论