mygGrid.css framework is a simple and pure CSS grid system for adaptive website design.

12 column grid, 5 column responsive grid, grid template columns, bootstrap grid system is based on how many columns

5 Column Responsive Grid System Based On Bootstrap for Vue

How to make use of it:

Load the core style sheet in the header section of your HTML document.

<link rel="stylesheet" href="css/layout.css">

The basic structure of the mygGrid.

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="info">.col-12</div>
    </div>
  </div>
  <div class="row">
    <div class="col-6">
      <div class="info">.col-6</div>
    </div>
    <div class="col-6">
      <div class="info">.col-6</div>
    </div>
  </div>
  <div class="row">
    <div class="col-4">
      <div class="info">.col-4</div>
    </div>
    <div class="col-4">
      <div class="info">.col-4</div>
    </div>
    <div class="col-4">
      <div class="info">.col-4</div>
    </div>
  </div>
  <div class="row">
    <div class="col-3 col-sm-3">
      <div class="info">.col-3</div>
    </div>
    <div class="col-3 col-sm-3">
      <div class="info">.col-3</div>
    </div>
    <div class="col-3 col-sm-3">
      <div class="info">.col-3</div>
    </div>
    <div class="col-3 col-sm-3">
      <div class="info">.col-3</div>
    </div>
  </div>
  <div class="row">
    <div class="col-2 col-sm-2">
      <div class="info">.col-2</div>
    </div>
    <div class="col-2 col-sm-2">
      <div class="info">.col-2</div>
    </div>
    <div class="col-2 col-sm-2">
      <div class="info">.col-2</div>
    </div>
    <div class="col-2 col-sm-2">
      <div class="info">.col-2</div>
    </div>
    <div class="col-2 col-sm-2">
      <div class="info">.col-2</div>
    </div>
    <div class="col-2 col-sm-2">
      <div class="info">.col-2</div>
    </div>
  </div>
  <div class="row">
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
  </div>
</div>

Lightweight 12-column Grid Framework, mygGrid.css Plugin/Github

See Demo And Download

Official Website(mscalessio): Click Here

This superior jQuery/javascript plugin is developed by mscalessio. For extra Advanced Usages, please go to the official website.