css系列-grid栅格布局

栅格介绍

名词解释

CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行。

栅格系统与FLEX弹性布局有相似之处理，都是由父容器包含多个项目元素的使用。

兼容性

下面是栅格系统兼容性数据，所以在根据项目使用的场景决定是否使用栅格布局。

声明容器

块级容器

<style>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        padding: 200px;
    }

    article {
        width: 400px;
        height: 200px;
        border: solid 5px silver;
        display: grid;
        grid-template-rows: 50% 50%;
        grid-template-columns: 25% 25% 25% 25%;
    }

    article div {
        background: blueviolet;
        background-clip: content-box;
        padding: 10px;
        border: solid 1px #ddd;
    }
</style>


<article>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</article>

行级容器

display: inline-grid;

划分行列

栅格有点类似表格，也 行 和 列。使用 grid-template-columns 规则可划分列数，使用 grid-template-rows 划分行数。

固定宽度

下面是使用固定宽度划分两行三列的的示例，当容器宽度过大时将漏白。

<style>
	* {
    padding: 0;
    margin: 0;
  }
  body {
    padding: 200px;
  }
  article {
    width: 300px;
    height: 200px;
    border: solid 5px silver;
    display: grid;
    grid-template-rows: 100px 100px;
    grid-template-columns: 100px 100px 100px;
  }
  article div {
    background: blueviolet;
    background-clip: content-box;
    padding: 10px;
    border: solid 1px #ddd;
  }

</style>
...

<article>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</article>

百分比

可以使用使用百分比自动适就容器。

display: grid;
grid-template-rows: 50% 50%;
grid-template-columns: 25% 25% 25% 25%;

重复设置

使用 repeat 统一设置值，第一个参数为重复数量，第二个参数是重复值

grid-template-rows: repeat(2, 50%);
grid-template-columns: repeat(2, 50%);

可以设置多个值来定义重复，下面定义了四列，以 100%、20px 重复排列。

display: grid;
grid-template-rows: repeat(2, 50%);
grid-template-columns: repeat(2, 100px 50px);

自动填充

自动填充是根据容器尺寸，自动设置元素尺寸。

width: 300px;
height: 200px;
display: grid;
grid-template-rows: repeat(auto-fill, 100px);
grid-template-columns: repeat(auto-fill, 100px);

比例划分

使用 fr 单位设置元素在空间中所占的比例，下面按1份-2份 分成两组共四列。

单位组合

width: 300px;
height: 200px;
display: grid;
grid-template-rows: 1fr 2fr;
grid-template-columns: 100px 1fr 2fr;

重复定义

width: 300px;
height: 100px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr 2fr);

组合定义

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

下面是使用 grid-template 同时声明 grid-template-rows、grid-template-columns。

grid-template: 100px 1fr / 50px 1fr

下面是使用grid-template 定义 grid-template-areas ，有关grid-template-areas的使用方法会在下面介绍。

grid-template: "header . ."
            ". main ."
            "footer footer .";

minmax

使用 minmax 方法可以设置取值范围，下列在行高在 最小100px ~ 最大1fr 间取值。

width: 300px;
height: 300px;
display: grid;
grid-template-rows: 100px minmax(100px, 1fr);
grid-template-columns: 100px 1fr;

间距定义

行间距

使用 row-gap 设置行间距。

width: 300px;
height: 200px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
row-gap: 30px;

列间距

使用 column-gap 定义列间距。

width: 300px;
height: 200px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
column-gap: 20px;

组合定义

使用 gap 规则可以一次定义行、列间距，如果间距一样可以只设置一个值。

设置行列间距为20px与10px

width: 300px;
height: 200px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 20px 10px;

统一设置行列间距为20px

gap: 20px;

未完待续