Grids (cuadrículas)
Con EDgrid puede crear cuadrículas fácilmente.
Grids con CSS
En CSS EDgrid cuenta con dos grids preconstruidos: 1,2,3,4 y 2,3,4,5 (los números representan las columnas en cada breakpoint de ed-grid).
Para utilizarlos, use la clase grid-container en el contedor, además la clase grid-1234 o grid-2345 para indicar el tipo de grid.
Por último, a cada item de la galeria asignele la clase grid-item
<div class="grid-container grid-1234">
<div class="grid-item"><!-- Cualquier contenido--></div>
<div class="grid-item"><!-- Cualquier contenido--></div>
<div class="grid-item"><!-- Cualquier contenido--></div>
<div class="grid-item"><!-- Cualquier contenido--></div>
<div class="grid-item"><!-- Cualquier contenido--></div>
<div class="grid-item"><!-- Cualquier contenido--></div>
<div class="grid-item"><!-- Cualquier contenido--></div>
</div>
Grids con Sass
Para Sass, use el mixin grid($item,$s $m $l $xl,$gutter) aplicado al contenedor del grid. Los parámetros son:
$item(obligatorio) es el selector css de cada item del grid. Debe pasarse entrecomillado.$s $m $l $xl(solo el primero obligatorio) son el número de columnas en cada breakpoint de EDgrid (separados por espacios)- Los breakpoints superiores heredaran el número de columnas del último breakpoint declarado en el mixin
$gutter(opcional) es la separación entre los items. Solo se aceptanem,remopx.
Ejemplo, para el siguiente HTML:
<div class="gallery">
<div class="image"><!-- Una foto en la galeria--></div>
<div class="image"><!-- Una foto en la galeria--></div>
<div class="image"><!-- Una foto en la galeria--></div>
<div class="image"><!-- Una foto en la galeria--></div>
<div class="image"><!-- Una foto en la galeria--></div>
<div class="image"><!-- Una foto en la galeria--></div>
<div class="image"><!-- Una foto en la galeria--></div>
</div>
Crearemos un grid 1,1,2,3
.gallery {
@include grid('.image',1 1 2 3);
}
Los grids son creados con CSS Grid y agregan un fallback con flexbox para navegadores que no lo soportem.