Diseño Tiny Flexbox Grid en CSS puro-Infinity-CSS-Grid
| Autor: | vladocar |
|---|---|
| Views Total: | 391 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 20, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Infinity-CSS-Grid es un sistema de diseño CSS ultraligero (menos de 0.1 KB) que ayuda a los desarrolladores web a generar rápidamente un diseño de cuadrícula flexible y adaptable usando Flexbox CSS.
Funcionamiento
Instale & descargar la biblioteca Infinity-CSS-Grid.
# NPM $ npm install infinity-css-grid --save
Importe la hoja de estilo en el documento.
<link rel="stylesheet" href="grid.css">
Agregue tantos elementos de cuadrícula al diseño.
<div class="row"> <div class="column">12,5%</div> <div class="column">12,5%</div> <div class="column">12,5%</div> <div class="column">12,5%</div> <div class="column">12,5%</div> <div class="column">12,5%</div> <div class="column">12,5%</div> <div class="column">12,5%</div> </div>
Combine las columnas.
<div class="row"> <div class="merge3">Merge 3 (take 3 places)</div> <div class="column">1</div> <div class="column">1</div> <div class="column">1</div> </div>
También se admiten las columnas anidadas.
<div class="row"> <div class="merge4 nested row"> <div class="column">Nested </div> <div class="column">Nested </div> <div class="column">Nested </div> </div> <div class="column">1</div> </div>
