学习笔记---display、grid属性

术语：Grid

Grid 是二维网格系统。它可以用来构建复杂的布局以及较小的界面。

属性：grid-template-columns

定义列，按照你希望它们在网格中出现的顺序，把grid -template-columns 属性设置为列大小

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px; // 定义三个宽度为100px的单元格
}

属性：grid-template-rows

grid-template-rows 用于定义网格中行的数量和大小。

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px; // 高度 与‘columns’类似
}

属性：grid-template

grid 是 grid-template-rows、grid-template-columns 和 grid-template-areas 三个属性的简写。

.grid {
    display: grid;
    grid-template:
        "header header  header" 80px
        "nav    article article" 600px
        / 100px 1fr;
}

 

属性：fr

fr 是为 css 网格布局创建的新单位。 fr 使你不需要计算百分比就能创建灵活的网格， 1fr 表示可用空间的一等份。

.grid {
    display: grid;
    grid-template-columns: 3fr 4fr 3fr; // 宽度分为3+4+3=10个等份，4个单元格分别占3、4、3份
    grid-template-columns: 3fr 4fr 3fr 2fr; // 宽度分为3+4+3+2=12个等份，4个单元格分别占3、4、3、2份
}

属性：grid-auto-flow

grid-auto-flow 属性控制 网格单元 如何流入网格，其默认值为 row。网格中的“网格单元”将会被一一填充，直到没有剩余的项目为止。

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-auto-flow: column;
}

函数：repeat()

repeat() 函数有助于使 网格轨道 列表变得不是那么多余，并为其添加了语义层。

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr 2fr); // 重复3次的 1fr 2fr。 还可以是：grid-template-columns:2fr repeat(5，1fr) 4fr;
}