CSS Grid Layout – Primeros pasos

En esta ocasión, cubriremos los conceptos básicos de CSS Grid, incluida una terminología básica y una sintaxis fácil para que puedas comenzar a utilizar Grid en tu proyecto hoy. Haremos un proyecto en vivo utilizando CSS Grid para aclarar las dudas que tengas sobre su implementación.

* Vamos a utilizar HTML5 + CSS3.

* Vamos agregar animación al proyecto utilizando Keyframes.

* Vamos a utilizar Grid y Flex para crear la estructura.

Antes de iniciar debemos conocer ¿Qué es CSS Grid?  

Es un sistema bidimensional, es decir, nos permite trabajar con las filas (rows) y columnas (columns) que necesitemos para armar nuestro diseño.  Para esto, debemos crear una etiqueta en nuestro archivo HTML que nos sirva de contenedor (Grid Container) para nuestra cuadrícula donde iremos colocando nuestro contenido (Grid Items).

Para definir el contenido principal de nuestra sección utilizamos:

display: grid;

Para definir las filas y columnas dentro del mismo selector utilizamos:

grid-template-columns: 1fr 1fr;

grid-template-rows: 1fr 1fr;

Definimos las filas y columnas de nuestra cuadrícula separando los valores con espacios, 1fr quiere decir una fracción, es decir, en el ejemplo son dos columnas o dos fracciones y dos filas o fracciones. Los valores representan el tamaño del Grid Track y el espacio entre ellos representa la línea de la cuadrícula (grid line).

El ejemplo quedaría así:

.main-container{    display: grid;    grid-template-columns: 1fr 1fr;    grid-template-rows: 1fr 1fr;} Pruébalo en tu editor de código favorito y mira el resultado.  Si prefieres, puedes ver un video que preparé con algunos ejemplos útiles para comenzar hoy mismo a utilizar Grid en tu proyecto.

Suscríbete a nuestro canal en Youtube y dale click a la campanita para recibir notificaciones cuando tengamos nuevo contenido útil para mejorar habilidades con desarrollador Frontend. Recuerda que siempre hay algo nuevo por aprender, para suscribirte puedes utilizar el siguiente enlace:  Canal en Youtube

Te cuento que puedes unirte a nuestro grupo de Meetup styleLeading donde hacemos proyectos en vivo y conversamos sobre diseño y desarrollo de sitios web: https://www.meetup.com/es/STYLE-LEADING/

Puedes utilizar el siguiente formulario para recibir en tu correo electrónico el proyecto con los archivos HTML y CSS, y así poder realizar las modificaciones que necesites y así mejorar el proyecto. 

[contact-form-7 id=»12978″ title=»YoutubeCSSGridA»]

No olvides visitar nuestro BLOG para ver mas contenido interesante y también otros proyectos con los archivos HTML y CSS, y así poder realizar las modificaciones que necesites.

Me despido como siempre, deseándote los mejor en tus proyectos.