60 columnas CSS Grid System-60gs. CSS

Vista prévia

Descripción

La biblioteca 60gs. CSS le permite crear el sistema de cuadrícula de columnas 60 basado en el < a href = "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout" target = "_ blank" rel = "noopener" > CSS Grid Layou t.

Muerto fácil de usar, ultra ligero (sólo 20 líneas de código CSS) y totalmente sensible para el diseño moderno móvil/Web.

Funcionamiento

Instale & Descargue el paquete con NPM.

# NPM
$ npm install 60gs --save

O incluya el 60gs. CSS de un CDN.

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

O inserte directamente los siguientes fragmentos de código CSS en el documento.

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