FlexGrid

Configuration

$dev: false;
$rem: 16px;

$columns: (
    "breakpoints": (
        "xs": 0,
        "sm": 769px,
        "md": 1024px,
        "lg": 1216px,
        "xl": 1408px,
    ),
    "columns": 12,
    "container-gap": 5px 15px 30px,
    "col-gap": 5px 10px 40px,
);
$gaps: (
    "top": 10px 15px,
    "bottom": 10px 30px,
    "right": 10px 30px,
    "left": 10px 30px,
);

Horizontal grid

col full width cell

<div class="row">
  <div class="col">
    <div class="box"></div>
  </div>
  <div class="col md-12">
    <div class="box"></div>
  </div>
</div>

Responsive

<div class="col 
            sm-3
            lg-5">
  <div class="box">Responsive</div>
</div>

Gap

$config: "col-gap": 5px 15px 30px

<div class="row gap">
  <div class="col sm-6">
    <div class="box">gap</div>
  </div>
  <div class="col sm-6">
    <div class="box">gap</div>
  </div>
</div>

gap-x

<div class="row gap-x">
  <div class="col sm-6">
    <div class="box">gap</div>
  </div>
  <div class="col sm-6">
    <div class="box">gap</div>
  </div>
</div>

gap-y

<div class="row gap-x">
  <div class="col sm-6">
    <div class="box">gap</div>
  </div>
  <div class="col sm-6">
    <div class="box">gap</div>
  </div>
</div>

Auto sizing

sm-auto sm-shrink

auto

shrink

<div class="row">
  <div class="col sm-4">
    <div class="box">4</div>
  </div>
  <div class="col sm-auto">
    <div class="box">auto</div>
  </div>
  <div class="col sm-shrink">
    <div class="box">shrink</div>
  </div>
</div>

Responsive Adjustments

row shrink

<div class="row shrink">
  <div class="col">
    <div class="box"></div>
  </div>
  <div class="col">
    <div class="box"></div>
  </div>
  <div class="col">
    <div class="box"></div>
  </div>
</div>

Alignment

sm-start

<div class="row sm-start">
  <div class="col sm-4">
    <div class="box"></div>
  </div>
</div>

sm-center

<div class="row sm-center">
  <div class="col sm-4">
    <div class="box"></div>
  </div>
</div>

sm-end

<div class="row sm-end">
  <div class="col sm-4">
    <div class="box"></div>
  </div>
</div>

sm-end md-center lg-start

<div class="row sm-end md-center lg-start">
  <div class="col sm-4">
    <div class="box"></div>
  </div>
</div>

sm-top

<div class="row sm-top">
    <div class="col sm-6">
        <div class="box" style="height: 100px;"></div>
    </div>
    <div class="col sm-6">
        <div class="box"></div>
    </div>
</div>

sm-middle

<div class="row sm-middle">
    <div class="col sm-6">
        <div class="box" style="height: 100px;"></div>
    </div>
    <div class="col sm-6">
        <div class="box"></div>
    </div>
</div>

bottom

<div class="row sm-bottom">
    <div class="col sm-6">
        <div class="box" style="height: 100px;"></div>
    </div>
    <div class="col sm-6">
        <div class="box"></div>
    </div>
</div>

sm-bottom md-middle lg-top

<div class="row sm-bottom md-middle lg-top">
    <div class="col sm-6">
        <div class="box" style="height: 100px;"></div>
    </div>
    <div class="col sm-6">
        <div class="box"></div>
    </div>
</div>

Distribution

sm-around

<div class="row sm-around">
    <div class="col sm-3">
        <div class="box"></div>
    </div>
    <div class="col sm-3">
        <div class="box"></div>
    </div>
    <div class="col sm-3">
        <div class="box"></div>
    </div>
</div>

sm-between

<div class="row sm-between">
    <div class="col sm-3">
        <div class="box"></div>
    </div>
    <div class="col sm-3">
        <div class="box"></div>
    </div>
    <div class="col sm-3">
        <div class="box"></div>
    </div>
</div>

Reordering

sm-first

<div class="row shrink">
    <div class="col">
        <div class="box">1</div>
    </div>
    <div class="col">
        <div class="box">2</div>
    </div>
    <div class="col sm-first">
        <div class="box">3</div>
    </div>
</div>

sm-last

<div class="row shrink">
    <div class="col sm-last">
        <div class="box">1</div>
    </div>
    <div class="col">
        <div class="box">2</div>
    </div>
    <div class="col">
        <div class="box">3</div>
    </div>
</div>

Reversing

sm-reverse

<div class="row sm-reverse">
    <div class="col">
        <div class="box">1</div>
    </div>
    <div class="col">
        <div class="box">2</div>
    </div>
    <div class="col">
        <div class="box">3</div>
    </div>
</div>

Display elements

hiding and show elements

md-hide md-show

|||

<div class="row shrink">
    <div class="col">
        <div class="box"></div>
    </div>
    <div class="col">
        <div class="box"></div>
    </div>
    <div class="col md-hide">
        <div class="box">|||</div>
    </div>
    <div class="col md-show">
        <div class="box">X</div>
    </div>
</div>

Methods

Calculate the sizes that you indicate.

.myNameClass {
  @include row(100px 1fr 100px);
}

<div class="row myNameClass">
    <div class="col">
        <div class="box"> </div>
    </div>
    <div class="col">
        <div class="box"> </div>
    </div>
    <div class="col">
        <div class="box"> </div>
    </div>
</div>

fit

Calculate the width and height that grow in proportion.

.myNameFit {
  @include fit(273px 50px);
}

<div class="myNameFit">
    <div class="box"></div>
</div>

query

Mixin that indicates from

.myclassFrom {
    font-size: 12px;
    @include from(md) {
        font-size: 16px;
    }
}

Mixin that indicates until

.myclassFrom {
    font-size: 16px;
    @include until(sm) {
        font-size: 12px;
    }
}

DisplayFlex