HTML怎么设置栅格系统,Core.css-轻量级的CSS reset和栅格系统

Core.css使用了一个.row来代表容器中的行，如果给它追加最大宽度的class，则代表固定宽度的行，否则是全屏的行。.col代表着容器中的列，它将容器的宽度分成12列，也就是我们常说的12栅格系统。.xs-12代表着列宽是100%，同理，.xs-3代表列宽25%，因为它需要4个.xs-3刚好达到12栅格的100%。其他依次类推从.xs-1到xs-12。

XS: 100%

XS: 50%

XS: 50%

随着屏幕的大小变换，内容区域的元素会匹配屏幕重新布局，就是我们说的自适应效果。我们在.col列中追加class类就可以实现自适应效果。如超小屏幕(xs)、超大屏幕(xl)。栅格系统首先会匹配移动手机版小屏幕，所以每个.col都需要一个class如：.xs-*，这样的话如果大屏幕的类没有设置，它就会使用这个.xs-*。

XS: 100%, SM+: 50%

XS: 100%, SM+: 50%

XS/SM: 50%, MD/LG: 33%, XL+: 25%

XS/SM: 50%, MD/LG: 33%, XL+: 25%

XS/SM: 50%, MD/LG: 33%, XL+: 25%

XS/SM: 50%, MD/LG: 33%, XL+: 25%

如果将.xs-*中的*设为0，如.xs-0，这样的话这个列就会隐藏，就是display: none的意思。

Hidden only on XS screens

Hidden only on XL screens

Visible only on XS screens

Visible only on XL screens

When would you need this?

如果你想设置容器的最大宽度，比如最大宽度1280px，也就是大屏幕尺寸，就可以在.row中追加.lg辅助类。以下是最大宽度的对应尺寸大小：.xs {max-width: 32rem;} /* 512px (Extra-Small) */

.sm {max-width: 48rem;} /* 768px (Small) */

.md {max-width: 64rem;} /* 1024px (Medium) */

.lg {max-width: 80rem;} /* 1280px (Large) */

.xl {max-width: 96rem;} /* 1536px (Extra-Large) */

Core.css还提供了简单基本的css reset样式，比如margin: 0，padding: 0以及box-sizing: border-box。