grid布局快速入门

Grid布局快速入门

常用Grid布局属性介绍

下面从一个简单Grid布局例子说起。
CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是实际的 grid(网格)，items 是 grid(网格) 内的内容。

下面是一个 wrapper 元素，内部包含6个 items ：

<div class="wrapper">
            <div class="item div1">1</div>
            <div class="item div2">2</div>
            <div class="item div3">3</div>
            <div class="item div4">4</div>
            <div class="item div5">5</div>
            <div class="item div6">6</div>
        </div>

要把 wrapper 元素变成一个 grid(网格)，只要简单地把其 display 属性设置为 grid 即可

.wrapper {
    display: grid;
}

Columns(列) 和 rows(行)

为了使其成为二维的网格容器，我们需要定义列和行。让我们创建3列和2行。我们将使用grid-template-row和grid-template-column属性。

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

grid-template-columns的3个值表示三列，相应的数值表示列宽即都为100px。
grid-template-rows的2个值表示两行，相应的数值表示行高即都为50px

得到的结果如下：

我们可以变化一下行高跟列宽的值看下效果，代码：

.wrapper {
    display: grid;
    grid-template-columns: 200px 50px 100px;
    grid-template-rows: 100px 50px;
}

效果图：

持续更新，欢迎大家指导！