CSS Grid Layout(网格布局)

2022年9月15日22:14:42网页制作评论78 views字数 1178阅读模式

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);
}

结果图:
CSS Grid Layout(网格布局)

可以看出对应的item已经被放在网格指定的位置。想象一下如果没有网格布局,你将会怎样实现这个布局图?

到此,也许你对网格布局还是一头雾水,不过好消息是我搞到一张作弊图,你可以对照图例自行修炼(欲练此功,必须用功):
CSS Grid Layout(网格布局)

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/27686.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定