CSS栅格系统实现

该文章由 leevare 发布于 ,归类于 Sass

可以模仿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;
    }
}

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒