60 Columns CSS Grid System – 60gs.css

Category: CSS & CSS3 , Layout , Recommended | June 15, 2018
Author: vladocar
Views Total: 925
Official Page: Go to website
Last Update: June 15, 2018
License: MIT

Preview:

60 Columns CSS Grid System – 60gs.css

Description:

The 60gs.css library lets you create 60 columns grid system based on the CSS Grid Layout.

Dead simple to use, ultra light (only 20 lines of CSS code) and fully responsive for modern mobile/web design.

How to use it:

Install & download the package with NPM.

# NPM
$ npm install 60gs --save

Or include the 60gs.css from a CDN.

<link rel="stylesheet" href="https://unpkg.com/[email protected]/60gs.css">

Or directly insert the following CSS snippets into your document.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(60, 1fr)
}

.col-60 { grid-column-end: span 60 } /* 1 column */
.col-30 { grid-column-end: span 30 } /* 2 columns */
.col-20 { grid-column-end: span 20 } /* 3 columns */
.col-15 { grid-column-end: span 15 } /* 4 columns */
.col-12 { grid-column-end: span 12 } /* 5 columns */
.col-10 { grid-column-end: span 10 } /* 6 columns */

/* helper columns */
.col-50 { grid-column-end: span 50 } /* 1 + 4 columns */
.col-45 { grid-column-end: span 45 } /* 1 + 3 columns */

@media (max-width: 600px)   {
  .grid {grid-gap: 10px 0 }
  .grid > * { grid-column-end: span 60 }
  img{ max-width:100%; height:auto }
}

You Might Be Interested In:


Leave a Reply