CSS栅格系统实现

可以模仿bootstrap框架的做法,改变盒模型为border-box,设置外层容器container的宽度,确定好列数,就可以用sass来的栅格系统的创建了。

例如,设置$container1180px,分为12列,那么每一列也就是1180/12的宽度,即98.333px,使用百分制来标识单个列的宽度,那么计算方式应该为percentage(($container/$grid-columns)/$container)。每一列的宽度得到的了,那每个盒子设置好内间距,那么一个栅格系统就实现了。实现效果如下:

$max-container-width: 1180px;
$grid-gutter-width: 15px;
$grid-gutter-width-percent: percentage($grid-gutter-width/$max-container-width);
$grid-columns: 12;
$grid-single-width: percentage(($max-container-width/$grid-columns)/$max-container-width);

%pd {
    padding: 0 $grid-gutter-width;
}
.container {
    width: $max-container-width;
    margin-left: auto;
    margin-right:auto;
    padding-left: $grid-gutter-width;
    padding-right: $grid-gutter-width;
    &:after {
        content: '';
        display: block;
        clear: both;
    }
}
.row {
    margin-left: -#{$grid-gutter-width};
    margin-right: -#{$grid-gutter-width};
    &:after {
        content: '';
        display: block;
        clear: both;
    }
}

@for $i from 1 through $grid-columns {
    .col-md-#{$i} {
        @extend .left;
        @extend %pd;
        width: $grid-single-width * $i;
    }
}
@for $i from 1 to $grid-columns {
    .col-md-offset-#{$i} {
        margin-left: $grid-single-width * $i;
    }
}
如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注