CSS Grid Layout es un sistema de rejilla bidimensional que nos permite dividir nuestra pantalla en filas y columnas para crear diseños increíbles de una manera rápida y sencilla.
Notas: Ambar Quintana
CSS Grid Layout es un sistema de rejilla bidimensional donde puedes colocar los elementos del grid en celdas definidas por filas y columnas, es decir, la idea principal de CSS Grid es dividir la pantalla en líneas horizontales y verticales para crear las filas y columnas.
También, nos permite distribuir los elementos y cambiarlos de posición sin tener que modificar el HTML, pues el módulo a través de sus propiedades se encarga de colocarlo en la posición que deseamos.
Ventajas de usar CSS Grid Layout
Con CSS Grid Layout el proceso de colocar y distribuir los elementos en una página es muy sencillo, pero también nos brinda otros beneficios, como lo son:
- Mayor flexibilidad.
- Reducción considerable del código empleado.
- Responsive más sencillo de realizar.
- Buen soporte en los navegadores.
CSS Grid Layout es compatible con todos los navegadores modernos.
Conceptos
Antes de comenzar a utilizar y crear nuestros primeros Layouts con CSS Grid, es importante conocer algunos conceptos:
grid-container
Es el elemento padre contenedor. Se encarga de manejar cómo sus hijos son alineados y contiene el número de filas y columnas que tendrá el layout.
grid-item
Son todos los hijos directos de nuestro contenedor (grid-container).
grid-line
Son las líneas verticales y horizontales que dividen nuestro grid, para separarlo en columnas y filas.
grid-cell
Es el espacio definido entre dos líneas horizontales consecutivas y dos líneas verticales consecutivas, es decir, los «cuadros» que se forman en la intercepción de estas líneas.
grid-track
Es el espacio entre dos líneas de nuestro grid, las cuales pueden ser verticales u horizontales. Piensa en ellos como las columnas o filas del grid.
grid-area
Se compone por varias celdas que están consecutivas; ya sean horizontales, verticales o ambas.
grid-gap
Es el espacio que definimos entre nuestras filas y columnas. Puedes verlo como un margen, pero éste no afectará el ancho del grid.
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección siguiente Creando un Grid Layout básico