它曾经是表格 ,然后是边距和浮点数 ,然后是flexbox ,现在是网格 :CSS始终致力于寻求新的更好的方法来减轻对Web布局进行编码的古老工作。 CSS网格布局模型可以沿着两个轴 (水平和垂直)创建和更新布局, 从而影响元素的宽度和高度 。
网格布局不取决于标记中元素的位置,因此,可以在不更改布局的情况下改组标记中元素的位置 。 在网格模型中,网格容器元素通过网格线 分为网格列和行 (统称为网格轨迹 )。 现在,让我们看看如何创建示例网格 。
浏览器支持
在撰写本文时, 最新的IE浏览器和Edge仅支持CSS网格模块。 在其他主要浏览器中,CSS Grid 处于试验阶段 ,您必须在其中手动启用支持 :
- Firefox:按Shift + F2 ,在浏览器底部显示的GCLI输入栏中输入以下命令: pre
pref set layout.css.grid.enabled true
。 - Chrome:浏览
chrome://flags
URL并启用Experimental Web Platform features
。
所有主要的浏览器支持都可能在2017年初/中期推出 。
样本网格
要将元素转换为网格容器 ,可以使用以下三个display
属性之一 :
-
display: grid;
–将元素转换为块网格容器 -
display: inline-grid;
–将元素转换为嵌入式网格容器 -
display: subgrid;
–如果元素是网格项目,则将其转换为忽略网格模板和网格间隙属性的子网格
就像一个表由多个表单元格组成一样 ,一个网格也由多个网格单元格组成 。 网格项被分配给一组网格单元 ,这些网格单元统称为网格区域 。
我们将创建一个包含五个部分(网格区域)的网格 :顶部,底部,左侧,右侧和中央。 HTML 在容器div中由五个div组成。
<div class="grid-container">
<div class="grid-top">Top</div>
<div class="grid-left">Left</div>
<div class="grid-centre">centre</div>
<div class="grid-right">Right</div>
<div class="grid-bottom">Bottom</div>
</div>
在CSS中, grid-template-areas
属性定义具有不同网格面积的网格 。 字符串的值表示网格行 , 字符串中的每个有效名称均表示一列 。 若要创建一个空的网格单元格,您需要在行字符串中使用点( .
)字符 。
.grid-container {
width: 500px;
height: 500px;
display: grid;
grid-template-areas: "top top top"
"left centre right"
"bottom bottom bottom";
}
.grid-top {
grid-area: top;
}
.grid-bottom {
grid-area: bottom;
}
.grid-left {
grid-area: left;
}
.grid-right {
grid-area: right;
}
.grid-centre{
grid-area: centre;
}
因此,此代码创建了一个具有三行和三列的网格 。 top
项目占第一行中三列的面积,而bottom
项目占最后一行中三列的面积。 left
, centre
和right
每个项在中间行占据一列 。
现在我们需要为这些行和列分配尺寸 。 grid-template-columns
和grid-template-rows
属性定义网格轨迹 (行或列)的大小。
.grid-container {
width: 500px;
height: 500px;
display: grid;
grid-template-areas: "top top top"
"left centre right"
"bottom bottom bottom";
grid-template-columns: 100px auto 100px;
grid-template-rows: 50px auto 150px;
}
这就是我们CSS网格现在的外观(带有一些其他样式):
![CSS网格](https://i-blog.csdnimg.cn/blog_migrate/de443ab65c50e27a70ba8f2f15d716e0.png)
网格项目之间的空间
您可以使用grid-column-gap
和grid-row-gap
或它们的长期属性grid-gap
在列和行之间添加空格 。
.grid-container {
width: 500px;
height: 500px;
display: grid;
grid-template-areas: "top top top"
"left centre right"
"bottom bottom bottom";
grid-template-columns: 100px auto 100px;
grid-template-rows: 50px auto 150px;
grid-gap: 5px 5px;
}
在下面,您可以看到grid-gap
属性确实在网格项之间添加了间隙。
![空间网格](https://i-blog.csdnimg.cn/blog_migrate/667bad04ab64b2d1d2735fc2534388b7.png)
对齐网格内容和项目
网格容器( .grid-container
)的justify-content
属性沿内联轴(水平轴)对齐网格的内容,而 align-content
属性则沿块轴(垂直轴)对齐网格的内容。 这两个属性都可以具有以下值之一 : start
, end
, center
, space-between
, space-around
和space-evenly
。
如果适用,对齐时轨道(行或列)的大小将缩小以适合内容 。 看看下面与不同值对齐的网格内容的屏幕快照。
justify-content: start;
![具有辩解内容的网格:开始](https://i-blog.csdnimg.cn/blog_migrate/072e2fef54142c1e613d0a51f2012219.png)
justify-content: end;
![包含正当内容的网格:结束](https://i-blog.csdnimg.cn/blog_migrate/a4c46d24e25e115814c5c8ca6c05e687.png)
justify-content: center;
![具有正当内容的网格:中心](https://i-blog.csdnimg.cn/blog_migrate/5f682eeee7224ef708eac964e3d3f0ce.png)
justify-content: space-between;
![具有正当内容的网格:间隔](https://i-blog.csdnimg.cn/blog_migrate/cc60828cc20b86fcdc84f9bb921d7ad7.png)
justify-content: space-around;
![具有正当内容的网格:环绕空间](https://i-blog.csdnimg.cn/blog_migrate/bd8dd8355e0111633ea425af17ebe1ef.png)
justify-content: space-evenly;
![具有合理内容的网格:空间均匀](https://i-blog.csdnimg.cn/blog_migrate/46ca4269f6501921e20d7643d4b0841c.png)
align-content: start;
![具有对齐内容的网格:开始](https://i-blog.csdnimg.cn/blog_migrate/6c1284e44563df708c1a889c2f887fb4.png)
align-content: end;
![网格与对齐内容:结束](https://i-blog.csdnimg.cn/blog_migrate/639bd49e34bf0a338439f36127d61fad.png)
align-content: center;
![具有对齐内容的网格:居中](https://i-blog.csdnimg.cn/blog_migrate/d4293f51a6476689248adfbcb7ffce94.png)
align-content: space-between;
![网格具有对齐内容:间距](https://i-blog.csdnimg.cn/blog_migrate/8899e2d6c2d8bf4c84cf76c6263cc98a.png)
align-content: space-around;
![带有align-content的网格:空格](https://i-blog.csdnimg.cn/blog_migrate/ef69492276ee31ca7424e55a58208f26.png)
align-content: space-evenly;
![具有对齐内容的网格:空间均匀](https://i-blog.csdnimg.cn/blog_migrate/1e90783375f9385eebe6c3f8d6d8483e.png)
要在其网格区域内对齐单个项目 ,请使用另一对对齐属性 : justify-items
和align-items
。 两者都可以具有以下值之一: start
, end
, center
, baseline
(沿着区域的基本网格线对齐项目)和stretch
(项目填充整个区域)。