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. 

    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.

    Compartir:

    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on pinterest
    Pinterest
    Share on linkedin
    LinkedIn

    Redes Sociales

    Más Popular

    Get The Latest Updates

    Subscribe To Our Weekly Newsletter

    No spam, notifications only about new products, updates.

    Publicaciones Relacionadas

    Reto FrontEnd StyleLeading Panamá

    Reto FrontEnd de StyleLeading 06

    Reto Frontend de StyleLeading CSS + HTML Detalles del Evento y Formulario de Registro como Participante Reto FrontEnd de StyleLeading Fecha del Evento Jueves 21

    Reto FrontEnd StyleLeading Panamá

    Reto FrontEnd de StyleLeading #05

    Reto Frontend de StyleLeading CSS + HTML Detalles del Evento y Formulario de Registro como Participante Reto FrontEnd de StyleLeading Fecha del Evento Jueves 14

    Reto FrontEnd StyleLeading Panamá

    Reto FrontEnd de StyleLeading #04

    Reto Frontend de StyleLeading #4 Detalles del Evento y Formulario de Registro como Participante Reto FrontEnd de StyleLeading Fecha del Evento Jueves 07 enero de

    Reto FrontEnd StyleLeading Panamá

    Reto FrontEnd de StyleLeading #03

    Reto Frontend de StyleLeading Detalles del Evento y Formulario de Registro como Participante Fecha del Evento Jueves 10 dic: 7:30 p.m. – 08:30 p.m. Detalles