60 Columns CSS Grid System – 60gs.css

Preview:

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 }
}