CSS有一些常用于解决布局问题的属性:比如(浮动float、定位position),这些相对hacky的方法往往会在页面上留下一些问题。
弹力袋Flexbox是一个非常好的布局工具css网格布局,网格布局CSS Grid Layout是最新的、更强大的布局形式。 本文将简单介绍一下什么是网格布局。
网格布局(CSS网格布局)
网格布局是一种二维布局系统,与过去常用的布局形式相比,它彻底改变了我们设计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已经被放置在网格指定的位置了。 想象一下css网格布局,如果没有网格布局,你将如何实现这个布局图?
到这里,也许你还对网格布局一头雾水,不过好消息是我拿到了作弊图,你可以按照传说自己练习一下(这个技巧你一定要努力练习):
文章到此结束,如果对您有帮助,请点个赞。
文章首发于IIICOOM-个人博客| 技术博客-《CSS网格布局(Grid Layout)》
发表评论