网格系统

在页面中，文字和内容通常按行展示。当文字挤满一行后，会自动换行。我们也可以通过网格系统来将页面中的内容分栏展示。网格系统多用于首页或某个专题页面中集中展示信息。

什么是网格系统？

网格系统可将一行分为多列。

网格系统有两个主要元素，分别是行和列。

行包含列，列决定了内容的宽度。

学联会网站允许一行包含多列，每一列的宽度相等，最多可以将一行分为 12 列。

如果将一行划分为 2 列，则每一列的宽度为 50%，两列相加 = 100%。

如将一行划分为 4 列，则每一列的宽度为 25%，四列相加 = 100%。

所以，分的列数越多，每一列的宽度越小。分的列数越少，每一列的宽度越大。

效果展示和应用

1 列

<div class="row">
    <div class="large-12 medium-12 small-12">这是一列。</div>
</div>

2 列

<div class="row">
    <div class="large-6 medium-6 small-6">这是一列。</div>
    <div class="large-6 medium-6 small-6">这是一列。</div>
</div>

3 列

<div class="row">
    <div class="large-4 medium-4 small-4">这是一列。</div>
    <div class="large-4 medium-4 small-4">这是一列。</div>
    <div class="large-4 medium-4 small-4">这是一列。</div>
</div>

观察上面的例子，若要使用网格系统，必须要先写行 <div class=”row”></div>这个容器，并在这个容器中放入距离的列。

列的容器是 <div class=”col-数字”>内容放在这里</div>。列的容器包含在行里。

col-数字相加必须要 = 12。只要满足这个条件，列可以随意拼凑。例如，如果要均分为 3 列，则每列为 12/3=4，则 <div class=”col-4″></div>。若要均分为 6 列，则 12/6=2，则 <div class=”col-2″></div>。

除了均分以外，还可以按照自己的需求进行分割。

3+6+3

<div class="row">
    <div class="large-3 medium-3 small-3">这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。</div>
    <div class="large-6 medium-6 small-6">这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。</div> 
    <div class="large-3 medium-3 small-3">这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。这是一列。</div>
</div>

在不同屏幕尺寸的设备上使用不同的网格

640 像素及以下用 small-1, small-2, small-3, small-4, small-5, small-6, small-7, small-8, small-9, small-10, small-11, small-12 来定义列宽。

640 – 1024 像素用 medium-1, medium-2, medium-3, medium-4, medium-5, medium-6, medium-7, medium-8, medium-9, medium-10, medium-11, medium-12 来定义列宽。

1024 像素以上用 large-1, large-2, large-3, large-5, large-5, large-6, large-7, large-8, large-9, large-10, large-11, large-12 来定义列宽。

请始终确保定义 3 种屏幕尺寸。

<div class="row">
<div class="large-3 medium-6 small-12">
<div class="v1pad h1pad bg-blue">在大屏幕占 1/4 栏，中等屏幕上占 1/2 栏，在小屏幕上占 1/1 栏</div>
</div>
<div class="large-3 medium-6 small-12">
<div class="v1pad h1pad bg-blue">在大屏幕占 1/4 栏，中等屏幕上占 1/2 栏，在小屏幕上占 1/1 栏</div>
</div>
<div class="large-3 medium-6 small-12">
<div class="v1pad h1pad bg-blue">在大屏幕占 1/4 栏，中等屏幕上占 1/2 栏，在小屏幕上占 1/1 栏</div>
</div>
<div class="large-3 medium-6 small-12">
<div class="v1pad h1pad bg-blue">在大屏幕占 1/4 栏，中等屏幕上占 1/2 栏，在小屏幕上占 1/1 栏</div>
</div>
</div>