Flexible 12-column CSS Grid System

Preview:

Description:

A CSS-only 12-column grid system for web designers and developers to create responsive and flexible layouts using CSS Grid.

It makes your layout look great on desktops, tablets, and smartphones and ensures that your website or application is accessible and user-friendly on all devices.

How to use it:

1. Download and import the 12-column-css-grid.min.css stylesheet.

<link rel="stylesheet" href="css/12-column-css-grid.css">

2. Basic usage. Available breakpoint prefixes:

• xs
• sm
• md
• lg

<div class="grid-container">
  <div class="col-xs-3 col-md-1"></div>
  <div class="col-xs-9 col-md-11"></div>
  <div class="mcol-xs-12 col-md-8 grid-container nested-grid">
      <div class="col-xs-12 col-md-5"></div>
      <div class="col-xs-12 col-md-7"></div>
      <div class="col-xs-12 col-md-9 grid-container secondary-nested-grid">
          <div class="col-xs-4"></div>
          <div class="col-xs-4"></div>
          <div class="col-xs-4"></div>
          <div class="col-xs-8"></div>
          <div class="col-xs-4"></div>
      </div>
      <div class="col-xs-12 col-md-3"></div>
  </div>
  ...
</div>

3. Add offsets to grid items.

<div class="grid-container">
  <div class="col-xs-1 col-xs-offset-12"></div>
  <div class="col-xs-2 col-xs-offset-11"></div>
  <div class="col-xs-3 col-xs-offset-10"></div>
  ...
</div>

4. Align & justify grid items.

<div class="grid-container col-xs-align-items-stretch col-sm-align-items-end col-md-align-items-start col-lg-align-items-center">
  <div class="col-xs-6"></div>
  <div class="col-xs-6"></div>
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
</div>

<div class="grid-container col-xs-justify-items-stretch col-sm-justify-items-end col-md-justify-items-start col-lg-justify-items-center">
  <div class="col-xs-6"></div>
  <div class="col-xs-6"></div>
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
</div>