CSS 网格布局那些事儿

[10081677wc]

CSS 网格布局那些事儿

CSS Grid

CSS Grid 布局（又名"网格"），是一个基于二维网格布局的系统，主要目的是改变我们基于网格设计的用户接口方式。

刚开始的时候我们使用表格（table），然后使用浮动（float）、 定位（position）和内联块（inline-block），但所有这些方法本质上来讲都是 hacks，存在很多需要额外实现的重要功能（例如垂直居中），虽然 Flexbox 可以起到一定的补救作用，但是它只可以实现简单的一维布局，并不适用于复杂的二维布局。

Grid 的入门是很容易的，只需要定义一个容器元素并设置 display: grid，使用 grid-template-columns 和 grid-template-rows 属性设置网格的列与行的大小，然后使用 grid-column 和 grid-row 属性将其子元素放入网格之中，并且与 Flexbox 类似，网格项的源顺序无关紧要。

网格容器（Grid Container）

当我们给 container 元素设置 display: grid 时，它就会成为所有网格项的父元素。

<div class="container">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
</div>

网格项（Grid Item）

网格容器的子元素，这里 item 元素都是网格项，需要注意的时 sub-item 不包含其中。

<div class="container">
    <div class="item"></div> 
    <div class="item">
        <p class="sub-item"></p>
    </div>
    <div class="item"></div>
</div>

网格线（Grid Line）

网格线构成网格的结构，它们可以是垂直的也可以是水平的，并且存在于一行或一列的任一侧。

网格轨道（Grid Track）

两个相邻网格线之间的空间，可以把它们想像成网格的行或列。

网格单元格（Grid Cell）

两个相邻的行和两个相邻的列之间的网格线空间，它是网格的基本单位。

网格区域（Grid Area）

四条网格线所包围的所有空间，网格区域可由任意数量的网格单元格组成。

网格容器属性（Grid Container）

定义一个元素成为网格容器，并对其内容建立一个网格格式的上下文。

container{
    display: grid | inline-grid   
}

需要注意的是 column，float，clear 和 vertical-align 元素对网格容器不起作用。

grid-template-rows

利用以空格分隔的值定义网格的列和行，值的大小代表轨道的大小，并且它们之间的空格表示网格线。

.container{
    grid-template-columns: <track-size> ... | <line-name> <track-size> ... | subgrid;
    grid-template-rows: <track-size> ... | <line-name> <track-size> ... | subgrid;
}

track-size：可以是一个长度、百分比或者是网格中自由空间的一小部分 line-name：选择任意名称 subgrid：如果网格容器本身就是一个网格项，可以使用此属性指定行和列的大小继承于父元素。

grid-template-areas

使用该属性定义网格区域的名称，从而定义网格模板，网格区域重复的名称就会导致内容跨越这些单元格，句点表示一个空单元格。

.container{
    grid-template-columns: 50px 50px 50px 50px;
    grid-template-rows: auto;
    grid-template-areas: "header header header header"
                         "main main . sidebar"
                         "footer footer footer footer"
}

需要注意的是，我们只是使用该语法进行网格区域命名，而不是网格线命名，区域两边的网格线就会得到自动命名，这意味着部分网格线可能具有多个名称。

grid-column-gap／grid-row-gap

指定网格线的大小，可以把它想像成在行/列之间设置间距宽度。

.container{
    grid-column-gap: <line-size>;
    grid-row-gap: <line-size>;
}

grid-gap

.container{
    grid-gap: <grid-column-gap> <grid-row-gap>;
}

如果没有指定 grid-row-gap 属性的值，默认与 grid-column-gap 属性值相同。

justify-items

沿列轴对齐网格项中的内容，此值适用于容器内所有的网格项。

.container{
    justify-items: start | end | center | stretch;
}

start：内容与网格区域的左端对齐 end：内容与网格区域的右端对齐 center：内容处于网格区域的中间位置 stretch：内容宽度占据整个网格区域空间（默认值）

align-items

沿行轴对齐网格项中的内容，此值适用于容器内所有的网格项。

.container{
    align-items: start | end | center | stretch;
}

start：内容与网格区域的顶端对齐 end：内容与网格区域的底部对齐 center：内容处于网格区域的中间位置 stretch：内容高度占据整个网格区域空间（默认值）

justify-content

当网格大小小于其网格容器的大小时，可以设置网格容器内网格的对齐方式，此属性会将网格沿列轴进行对齐。

start：网格与网格容器的左端对齐 end：网格与网格容器的右端对齐 center：网格处于网格容器的中间 stretch：调整网格项的大小，使其宽度填充整个网格容器 space-around：在网格项之间设置偶数个空格间隙，其最边缘间隙大小为中间空格间隙大小的一半 space-between：在网格项之间设置偶数个空格间隙，其最边缘不存在空格间隙 space-evenly：在网格项之间设置偶数个空格间隙，同样适用于最边缘区域

.container{
    justify-content: start;
}

.container{
    justify-content: end; 
}

.container{
    justify-content: center;  
}

.container{
    justify-content: stretch; 
}

.container{
    justify-content: space-around;    
}

.container{
    justify-content: space-between;   
}

.container{
  justify-content: space-evenly;    
}

align-content

当网格大小小于其网格容器的大小时，可以设置网格容器内网格的对齐方式，此属性会将网格沿行轴进行对齐。

.container{
    align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

start：网格与网格容器的顶端对齐 end：网格与网格容器的底部对齐 center：网格处于网格容器的中间 stretch：调整网格项的大小，使其高度填充整个网格容器 space-around：在网格项之间设置偶数个空格间隙，其最边缘间隙大小为中间空格空隙大小的一半 space-between；在网格项之间设置偶数个空格间隙，其最边缘不存在空格间隙 space-evenly：在网格项之间设置偶数个空格间隙，同样适用于最边缘区域