# Sistema de filas y columnas con CSS Grid
La versión 3 de EDgrid incluye la creación de layouts con CSS Grid, la que ofrece varias ventajas sobre los layouts con Flexbox.
Esta versión se basa en las siguientes reglas:
1. El contenedor define la cantidad de columnas en cada breakpoint
2. Los items definen cuantas columnas de su contedor ocuparán
3. Solo el contenedor tiene una clase definida `ed-grid`. Los items pueden ser cualquier elemento hijo directo de `ed-grid` (a diferencia de la versión con flexbox que exigía tener un `ed-item`).
4. CSS Grid utiliza la propiedad `gap` para definir la separación entre tracks, lo que resuelve el problema de los contenedores anidados y los paddings (propio de layouts con floats y flexbox).
## Contenedor ed-grid
En esta versión se usa `ed-grid` como contenedor y es en él donde debemos definir las columnas (es así como funciona CSS Grid).
Para definir las columnas use la nomenclatura `breakpoint-grid-numero`.
```html
```
## Items
Cualquier hijo directo de `ed-grid` es automáticamente un item del layout. Y automáticamente tomará una columna de su contenedor.
```html
```
Ejemplo:
1
2
3
### Definir cantidad de columnas que ocupa el item
Use la siguiente nomenclatura `breakpoint-cols-numero` Donde número es la cantidad de columnas.
Por ejemplo, para crear un layout de sidebar al 25% y contenido al 75% el marcado sería el siguiente:
```html
1
2
```
Ejemplo
1
2
### Definir en qué columna inicia un item
Use la nomenclatura: `breakpoint-x-numero` para indicar en qué columna iniciará un item.
```html
Comienzo en la columna 2 y ocupo 3 columnas
```
Ejemplo:
Comienzo en la columna 2 y ocupo 3 columnas
### Definir cantidad de filas que ocupa el item
Use la siguiente nomenclatura `breakpoint-rows-numero` Donde número es la cantidad de filas.
```html
1
2
3
```
Ejemplo:
1
2
3
### Definir en qué fila inicia un item
Use la nomenclatura: `breakpoint-y-numero` para indicar en qué columna iniciará un item.
```html
1
2
3
4
5
```
Ejemplo:
1
2
3
4
5
## Anidar contenedores
Puesto que CSS Grid define la separación entre tracks internamente, puede anidar contenedores como desee, sin restricciones.
```html
1
2
3
4
5
```
Ejemplo:
1
2
3
4
5
## Separación entre filas y columnas
De forma predeterminada las columnas tienen una separacion de `1rem` en tamaños móviles (s,m) y `2rem` en tamaños de escritorio (lg,xl). Si desea agregar una separación entre filas (igual a la de las columnas), agregue la clase `rows-gap` al contenedor.
```html
1
2
3
4
5
6
7
8
9
10
11
12
```
Ejemplo:
1
2
3
4
5
6
7
8
9
10
11
12
Puede cambiar la separación para todos los `ed-grid` redefiniendo la variable `$gap` antes de importar EDgrid.
```scss
$gap: 1rem; // En tamaños de escritorio se multiplica por 2
@import "~ed-grid/ed-grid";
```
O puede cambiar la separación para un `ed-grid` especifico usando la nomenclatura `breakpoint-gap-numero`. El número va de 0 a 4 con separaciones de `.5rem`.
\* *Puede usar el numero `05` para crear separaciones de `.25rem`. Ejemplo: `s-gap-05`.*
```html