Flexbox grid system.
npm i @hkst/css-grid
@import '~bem-css-grid-test/src/scss/grid/styles';
The main grid wrapper
The main grid row container
Grid row with gutter modifier.
See breakpoints variable
Auto width column
Column with [1-12] columns space since [BP] breakpoint width.
See breakpoints variable
If you don't use columns modifier classnames the columns has auto width.
In this example the grid system have 12 columns and each .g-col element in this markup use 3 columns space(3*4=12)
<div class="g-wrap">
<div class="g-row">
<div class="g-col">
<!-- Your content -->
</div>
<div class="g-col">
<!-- Your content -->
</div>
<div class="g-col">
<!-- Your content -->
</div>
<div class="g-col">
<!-- Your content -->
</div>
</div>
</div>
(Very similar html markup concept than bootstrap grid)
<div class="g-wrap">
<div class="g-row">
<div class="g-col--xs-6">
<!-- Your 6 columns content in all breakpoints -->
</div>
<div class="g-col--xs-6">
<!-- Your 6 columns content in all breakpoints -->
</div>
<div class="g-col--sm-6 g-col--md-4">
<!-- Your 6 columns content since 'small' breakpoint -->
<!-- Your 4 columns content since 'medium' breakpoint -->
</div>
<div class="g-col--sm-6 g-col--md-4">
<!-- Your 6 columns content since 'small' breakpoint -->
<!-- Your 4 columns content since 'medium' breakpoint -->
</div>
<div class="g-col--lg-4">
<!-- Your 4 columns content since 'large' breakpoint -->
</div>
</div>
</div>
$grid-width: 100% !default;
$grid-columns: 12 !default;
$grid-gutter: 14px !default;
$grid-breakpoints: ( "xs" : 0px, "sm" : 768px, "md" : 992px, "lg" : 1200px) !default;
$grid-gutter-modifiers: ( "xs" : 0.25, "sm" : 0.75, "md" : 1.5, "lg" : 1.75) !default;
If you use .g-row--xs, the gutter is $grid-gutter * 0.25;
.
If you use .g-row--lg, the gutter is $grid-gutter * 1.75;
.
$grid-gutter: 30px;
@import '~bem-css-grid-test/src/scss/grid/styles';