CSS Grid Guia

CSS GRID
Guía desde cero

¿Qué es CSS GRID?
CSS Grid Layout (Sistema de cuadrículas) es el sistema
de diseño más poderoso actualmente en CSS. Esto
gracias a su sistema bidimensional, lo que significa que
puede manipular tanto columnas como filas, a
diferencia de flexbox, que es en gran medida un
sistema unidimensional.
Grid vs Flexbox
Flexbox se maneja principalmente en un eje principal.
En CSS GRID tenemos todo el control tanto de
columnas como de filas.CSS GRID no remplaza a
Flexbox, al contrario se pueden complementar.
Si lo pensamos de otra manera CSS GRID sería como
una espada y Flexbox como un escudo, se
complementan. En esta guía aprenderemos CSS GRID.
(Un paréntesis)
También tengo una guía de Flexbox, si quieres
descargarla, puedes hacerlo desde el botón que
aparecerá en la parte de abajo. Puedes descargarlo
directamente o descargarlo mediante el servidor de
discord de la comunidad.
Un simple vistazo
a CSS GRID
Te voy a mostrar de manera muy rápida como CSS
GRID nos puede ayuda y porque en algunos casos nos
hace la vida más fácil.
¿Cómo podríamos crear este Layout con Flexbox?

CSS GRID está en
otro nivel.
Hacer el Layout con Flexbox, sería muy complicado,
quedaría como un reto personal hacerlo. Con CSS
GRID sería muy fácil, porque nos permite definir
columnas y filas, creando una cuadricula en la cual
podemos posicionar a los elemento en base a la GRID.
Conceptos
fundamentales
Antes de que pasemos a CSS GRID debemos de
conocer ciertos conceptos para que podamos
comprender CSS GRID de manera más sencilla.
El contexto de CSS
GRID
Si ya vienes de Flexbox quizá recuerdes que hay un
flex-container y flex-items , esto creaba un contexto de
Flexbox. En CSS GRID tenemos algo muy similar un
contenedor que será llamado un Grid-container y sus
hijos directos de ese contenedor que serán los Grid-
items.
Filas y Columnas
(Rows y Filas)
Debido a que CSS Grid, trabaja con un sistema
bidimensional, se usarán filas y columnas, las filas
(rows) son horizontales, las columnas (columns)
verticales.
Grid Cell (Celdas)
Las celdas o también llamadas Grid-cells son la parte
más pequeña de la Grid. Por defecto cada grid-item se
va a posicionar en una celda de la grid.
Grid-areas
Es el espacio entre cuatro grid lines, un grid area
puede estar formado por el número que sea de
celdas, pero un grid area siempre debe ser rectangular
o cuadrada.
Grid-tracks
Se le conoce Grid track, al espacio entre dos grid lines
adyacentes, también se les conoce como filas y
columnas.
Definiendo GRID
CSS Grid Layout (Sistema de cuadrículas) es el sistema
de diseño más poderoso actualmente en CSS. Esto
gracias a su sistema bidimensional, lo que significa que
puede manipular tanto columnas como filas, a
diferencia de flexbox, que es en gran medida un
sistema unidimensional.
Grid-template-columns
La propiedad grid-template-columns nos permite crear

columnas, esta propiedad acepta cualquier unidad de
medida, ya sea porcentajes, pixeles, centimetros, rem,
y cualquier otra unidad de medida permitida en CSS.
Grid-template-rows
La propiedad grid-template-rows nos permite crear

filas en nuestra grid, al igual que la propiedad grid-
template-columns esta propiedad acepta cualquier
unidad de medida.
Repeat()
Ahora imaginemos que debemos crear 10 columnas

del 10% cada una, sería muy tedioso hacer esto.
Aunque CSS GRID en las propiedades grid-template-
columns y grid-template-rows tiene la función repeat().
Esta función por defecto recibe 2 valores, separados
por una coma. El primer valor es el número de
columnas o filas que queremos crear y el segundo
valor es el tamaño que tendrán esos tracks.
Unidad FR
imaginemos este caso, yo quiero crear 4 columnas
donde la primera columna será del 50% y quiero que
las siguientes 3 repartan el espacio sobrante. ¿Cómo
haríamos esto?
En CSS GRID, hay una unidad de medida Flexible,

llamada FR. Se usa para representar las fracciones del
espacio disponible que tenemos en nuestra
cuadricula.
Posicionando a los
grid-items
Una vez que hemos definido las filas y las columnas ya
tenemos completamente definida la GRID, pero si nos
damos cuenta los grid-items se posicionan cada uno
en una celda, nosotros podemos posicionar a los
elementos en la grid sin importar su orden en el HTML.
Con todo lo que hemos aprendido, crearemos un
Layout personalizada con CSS GRID como el del
principio, a su vez aprenderemos como posicionar
elementos en la grid.
1- Primero definamos el HTML de nuestro layout. El

article será el grid-container, la imagen y el contenedor
de textos serán los grid-items.
2- Definiremos los estilos genéricos de nuestro
proyecto para darle una mejor apariencia.
3- Crearemos la cuadricula en el tag article, definiendo
para filas y columnas 3 tracks, podremos notar que se
crean líneas en nuestra grid.
4- Vamos a darle estilos generales a los grid-items y
sus hijos, para que tengan un mejor estilo. Podremos
notar que cada grid-item (El contenedor de textos y la
imagen) se posicionan cada uno en una celda por
defecto.
5- Ahora vamos a posicionar a los grid-items por las
líneas de la cuadricula, esto lo haremos con grid-
column. (Para posicionar en líneas de columnas) y grid-
row. (Para posicionar en líneas de filas). Agregando
unos estilos finales, donde incluso agregamos Flexbox
dentro de CSS GRID, para centrar el contenido.
6- El resultado sería este:
¡Domina CSS GRID!
¡Te voy a regalar el Master de Flexbox y CSS GRID! Al
final de ese curso habrás dominado Flexbox y CSS
GRID a FONDO, creando más de 9 proyectos reales
con estos 2 módulos de CSS.
Este curso es un obsequio a todas las personas que se
usan al Patreon de AlexCG por un precio simbólico,
además al entrar tendrás acceso a un servidor de
discord donde haremos lives mensuales creando
proyectos en vivo o revisando código de los miembros.
Únete al patreon en el botón que te aparecerá abajo!
¡Seguimos en
contacto!
¡Te voy a compartir mi Twitter e Instagram, para que
cualquier duda que tengas, podamos estar en
contacto. ¡Gracias por leerme!

CSS Grid Guia

Cargado por

Copyright:

Formatos disponibles

CSS Grid Guia

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

CSS Grid Guia

Cargado por

Copyright:

Formatos disponibles

CSS GRID

Guía desde cero

¿Cómo podríamos crear este Layout con Flexbox?

La propiedad grid-template-columns nos permite crear

La propiedad grid-template-rows nos permite crear

Ahora imaginemos que debemos crear 10 columnas

En CSS GRID, hay una unidad de medida Flexible,

1- Primero definamos el HTML de nuestro layout. El

También podría gustarte