CSS grid 网格布局

七、grid 布局

网格布局（属于二维布局），可以跟 flex 结合使用。

兼容性没有 flex 好，不够普及

特点：

1）可以定义任意数量的行和列

2）行的高度和列的宽度可以使用绝对值、相对比例或自动调整的方式，可设置最大值和最小值

3）内部元素可以设置自己所在的行、列，还可以设置跨越几行、几列

4）可以设置内部元素的对齐方向

https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

https://www.layui.com/doc/element/layout.html

•可以从报纸的排版中学到很多经过多年积累下来的经验。

•核心的思想是借鉴“网格”的布局思想，它具有如下优点：

–（1）使用基于网格的设计可以使大量页面保持很好的一致性，这样无论是在一个页面内，还是在网站的多个页面之间，都可以具有统一的视觉风格，这是很重要的。

–（2）均匀的网格以大多数认为合理的比例将网页划分为一定数目的等宽列，这样在设计中产生了很好的均衡感。

–（3）使用网格可以帮助设计把标题、标志、内容和导航目录等各种元素合理地分配到适当的区域，这样可以为内容繁多的页面创建出一种潜在的秩序，或者称为“背后”的秩序。报纸的读者通常并不会意识到这种秩序的存在，但是这种秩序实际上在起着重要的作用。

–（4）网格的设计不但可以约束网页的设计，从而产生一致性，而且具有高度的灵活性。

•在网格的基础上，通过跨越多列等手段，可以创建出各种变化的方式，这种方式既保持了页面的一致性，又具有风格的变化。

–（5）网格可大大提高整个页面的可读性，因为在任何文字媒体上，一行文字的长度不读者的阅读效率和舒适度有直接的关系。

•如果一行文字过长，读者在换行的时候，眼睛就必须剧烈的运动，以找到下一行文字的开头，这样既打断了读者的思路，又使眼睛和脖子的肌肉紧张，使读者疲劳感明显增加。

•而通过使用网格，可以把一行文字的长度限制在适当的范围，使读者阅读起来既方便，又舒适。

下面可以给大家介绍几本书，如果有深厚的兴趣，可以去看看！

《CSS&javas cript 动态网页设计与制作》

《CSS 禅意花园》

《CSS 精粹（第 3 版）》