Flexible 12-column CSS Grid System

Category: CSS & CSS3 , Layout | December 21, 2022
Author:erikmonjas
Views Total:333 views
Official Page:Go to website
Last Update:December 21, 2022
License:MIT

Preview:

Flexible 12-column CSS Grid System

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>

You Might Be Interested In:


Leave a Reply