Bootstrap Inspired Grid System In Pure CSS – Favorite Grid

Preview:

Description:

Favorite Grid is a tiny yet customizable, responsive, mobile-friendly grid layout system built with CSS flexbox and inspired by Bootstrap.

How to use it:

1. Download and import the Favorite Grid into the HTML.

<!-- Compatible With Legacy Browsers -->
<link rel="stylesheet" href="dist/grid.min.css">
<!-- For Modern Browsers -->
<link rel="stylesheet" href="dist/grid.flex.min.css">

2. Insert columns into the grid and define the number of columns using the col-BREAKPOINT-VALUE class as follows:

<div class="container">
    <div class="row">
        <div class="col-12"><div class="box"></div></div>
        <div class="col-12 col-md-6"><div class="box"></div></div>
        <div class="col-12 col-md-6"><div class="box"></div></div>
        <div class="col-12 col-md-4"><div class="box"></div></div>
        <div class="col-12 col-md-4"><div class="box"></div></div>
        <div class="col-12 col-md-4"><div class="box"></div></div>
        <div class="col-12 col-md-3"><div class="box"></div></div>
        <div class="col-12 col-md-3"><div class="box"></div></div>
        <div class="col-12 col-md-3"><div class="box"></div></div>
        <div class="col-12 col-md-3"><div class="box"></div></div>
        <div class="col-12 col-md-2"><div class="box"></div></div>
        <div class="col-12 col-md-2"><div class="box"></div></div>
        <div class="col-12 col-md-2"><div class="box"></div></div>
        <div class="col-12 col-md-2"><div class="box"></div></div>
        <div class="col-12 col-md-2"><div class="box"></div></div>
        <div class="col-12 col-md-2"><div class="box"></div></div>
        <div class="col-12 col-md-1"><div class="box"></div></div>
        <div class="col-12 col-md-11"><div class="box"></div></div>
    </div>
</div>

3. Override the default Variables in the scss file.

// Device sizes
$small-device : 480px;
$medium-device : 768px;
$large-device : 992px;
$x-large-device : 1200px;
// The maximum number of columns you want for your grid system
$max-column : 12;
// Calculate the smallest and largest grid column widths
$largest-column-width : 100%;
$smallest-column-width : $largest-column-width / $max-column;