CSS变量创建网格系统

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

今天要聊的网格系统不是CSS Grid Layout,而要聊的是类似960gs。到止前为止类似于960gs的网格系统成熟的系统有很多套了。

实现Grid系统的方案

如果忽略CSS Grid Layout特性,所讲的Grid系统都是源自于960gs。而实现这种网格系统所用的方案至今天而言主要实现方式有:

  • 固定网格系统
  • 流式网格系统

固定网格系统:固定网格系统所说的就是网格的列宽、列数、列间距都是固定的值,比如使用的是px值。

流式网格系统:流式(也称之为自适应网格系统),也就是网格的列宽,列间距都是使用的百分比,而列数是固定的值,最常见的和固定网格一样,是12列。但一般情况,流式网格系统都会给网格容器设置一个最大宽度(max-width)。

而实现网格系统的方法目前为之最为常见的是使用float或者flexbox两种。其中先进的一点的是采用CSS处理器来实现。

计算Grid系统的公式

这里所说的网格系统,共实现具有一定的数学公式:

scw = (100 – (m * (mc – 1))) / mc

其对应描述如下:

  • scw:指的是单列宽度
  • m:指的是列间距
  • mc:最大列数(一般是12

根据上面的公式,可以转换出计算其他列的列宽的公式:

cw = (scw * cs) + (m * (cs – 1))
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css3/create-css-grid-system-with-css-variables.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部