Sistema de rejilla CSS responsive más simple-Fukol
| Autor: | Heydon |
|---|---|
| Views Total: | 2,718 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 26, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Fukol â & #132; ¢ es un pequeño (menos de 1Kb), extensible, totalmente sensible, basado en Flexbox, mejora progresiva rejilla CSS sensible para el diseño web moderno.
¿Cómo funciona?
Sólo tiene que incluir los siguientes estilos CSS en sus archivos CSS:
.fukol-grid {
display: flex; /* 1 */
flex-wrap: wrap; /* 2 */
margin: -0.5em; /* 5 (edit me!) */
}
.fukol-grid > * {
flex: 1 0 5em; /* 3 (edit me!) */
margin: 0.5em; /* 4 (edit me!) */
} Y luego agrega tu contenido al sistema de cuadrícula siguiendo la estructura HTML como esta:
<div class="fukol"> <ul class="fukol-grid"> <li>Grid Item Here</li> <li>Grid Item Here</li> <li>Grid Item Here</li> <li>Grid Item Here</li> <li>Grid Item Here</li> <li>Grid Item Here</li> ... </ul> </div>
