2 Columnas Iguales - CSS Grid

Trabajaremos con el siguiente archivo

Comenzaremos con:
 Trabajaremos con el siguiente archivo
Comenzaremos con:
 2 Columnas Iguales - CSS Grid
Los ejemplos con grid la mejor forma de visualizarlos es con Firefox
developer edition, es un navegador diseñado para desarrolladores
 2 Columnas Iguales - CSS Grid
Una vez instalado copiamos la url, la pegamos en el navegador y lo
abrimos
 2 Columnas Iguales - CSS Grid

La idea es que lo que está dentro de los dos articule se coloquen

uno al costado del otro en la página

Afecta
únicamente al
primer nivel de
hijos
2 Columnas Iguales - CSS Grid

Damos clic en
grid para ver sus
herramientas

Activamos todos
estos casilleros
 2 Columnas Iguales - CSS Grid

Espacio de columnas
 2 Columnas Iguales - CSS Grid

Ahora si lo hacemos pequeño se va

a ver de esta forma en un
dispositivo móvil, supongamos que
esto no es lo que queremos
entonces lo ideal es que el código
vaya dentro de un media queries
 2 Columnas Iguales - CSS Grid

Entonces cuando baje de 768px se verá de otra manera

 2 Columnas Iguales – con flexbox

Trabajaremos con el siguiente archivo:

2 Columnas Iguales – con flexbox
 3 Columnas Iguales - CSS Grid

Trabajaremos con el siguiente archivo:

3 Columnas Iguales - CSS Grid
3 Columnas Iguales - CSS Grid
 3 Columnas Iguales – con flexbox
Trabajaremos con el siguiente archivo:
3 Columnas Iguales – Con flexbox
 Cómo agregar más elementos al diseño (más de 3 columnas con grid)
Trabajaremos con el siguiente archivo:
 Cómo agregar más elementos al diseño (más de 3 columnas con grid)
Se supone que como ya lo hemos estado
trabajando lo tenemos así:
 Cómo agregar más elementos al diseño (más de 3 columnas con grid)
si duplicamos los articule, copiamos y pegamos
 Cómo agregar más elementos al diseño (más de 3 columnas con grid)
Vemos que nos queda así sin necesidad de hacer otro cambio, esto porque estamos
usando grid
 Cómo agregar más elementos al diseño (más de 3 columnas con flexbox)
Trabajaremos con el siguiente archivo:
 Cómo agregar más elementos al diseño (más de 3 columnas con flexbox)
Se supone que como ya lo hemos estado
trabajando lo tenemos así:
 Cómo agregar más elementos al diseño (más de 3 columnas con flexbox)
si duplicamos los articule, copiamos y pegamos
Cómo agregar más elementos al diseño (más de 3 columnas con flexbox)
Vemos que nos queda así
Cómo agregar más elementos al diseño (más de 3 columnas con flexbox)
Esto lo solucionamos agregando a nuestros código css
Cómo agregar más elementos al diseño (más de 3 columnas con flexbox)
Vemos que nos queda así.