乐趣区

关于布局:CSS-Grid-Layout网格布局

jiezi

CSS 有一些属性常常被用来解决布局问题：如（浮动 float、定位 postion）这些比拟 hack 的办法常常会给页面遗留下一些问题。

弹性盒子 Flexbox 是一个十分好的布局工具，网格布局 CSS Grid Layout 是最新、更弱小的布局形式。本文就来简略介绍一下什么是网格布局。

网格布局 (CSS Grid Layout)

网格布局是二维的布局零碎，和过来罕用的布局形式相比齐全扭转了咱们设计 UI 的形式。

须要理解的术语

Grid Container(网格容器)，Grid Item(网格容器子元素)。

Grid Line(网格线)，Grid Cell(网格单元格)。

Grid Track(网格轨道)，Grid Area(被网格线离开的区域)。

图例参考

页面构造 

<div class="container">
    <div class="item item_a">item_a</div>
    <div class="item item_b">item_b</div>
    <div class="item item_c">item_c</div>
</div>

定义一个网格布局的容器 

.container {display: grid;}

设置网格行、列 

.container {
    display: grid;
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-rows: [row1-start] 100px [row1-end] 100px [third-line] 100px [last-line];
}

通过下面的形式就申明了一个 3 行 5 列 的网格容器。

设置网格容器内元素地位 

.item_a {
    grid-column-start: 4;
    grid-column-end: five;
    grid-row-start: row1-start;
    grid-row-end: 2;

    background-color: orange;
}
.item_b {
    grid-column-start: 1;
    grid-column-end: span col4-start;
    grid-row-start: 3;
    grid-row-end: span 2;

    background-color: aqua;
}
.item_c {
    grid-column-start: 2;
    grid-column-end: span 1;
    grid-row-start: 2;
    grid-row-end: span 1;

    background-color: rgb(149, 255, 0);
}

后果图：

能够看出对应的 item 曾经被放在网格指定的地位。设想一下如果没有网格布局，你将会怎么实现这个布局图？

到此，兴许你对网格布局还是一头雾水，不过好消息是我搞到一张舞弊图，你能够对照图例自行修炼（欲练此功，必须用功）：

文章到此就完结了，如果帮到你了，欢送点赞。

文章首发于 IICOOM- 集体博客 | 技术博客 –《CSS Grid Layout(网格布局)》

退出移动版