Creación de Grillas con CSS Grid: Propiedades y Ejemplos Prácticos

Contenido del curso

Introducción a Grid

Propiedades de Grid

Power ups de Grid

Proyecto

Bonus

12
Creación de Diseños Responsivos con CSS Grid
09:21 min

Próximos pasos

13
Especificación de CSS Grid: Curso Final y Próximos Pasos
00:30 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:26

Creación de Grillas con CSS Grid: Propiedades y Ejemplos Prácticos

Curso de CSS Grid Básico

Clase 3 de 13

Clase 3 / 13

Recursos

Ahora vamos a conocer algunas propiedades el contenedor que nos permiten construir grillas especificando la cantidad de filas, columnas y los tamaños que manejan entre ellos.

Qué es el display grid

Define el elemento como contenedor de cuadrícula y establece un nuevo contexto de formato de cuadrícula para su contenido.

<div class=""contenedor"">
        <div class=""item"">1</div>
        <div class=""item"">2</div>
        <div class=""item"">3</div>
        <div class=""item"">4</div>
        <div class=""item"">5</div>
        <div class=""item"">6</div>
    </div>

El div principal o “contenedor” va a ser el padre de nuestra grilla. Los seis div internos serán los elementos o grid items.

.contenedor {
    border: 5px solid #e1bee7;
    background-color: #fff1ff;
}

.item {
    border: 5px solid #00bcd4;
    font-size: 4rem;
}

En nuestra hoja de estilos agregamos un color de fondo y un borde al contenedor principal, mientras que un borde y un tamaño de fuente a los elementos del contenedor.

Al renderizar el código en el navegador obtendríamos este resultado:

Los elementos se posicionan uno debajo de otro y funciona como un solo bloque, ya que por defecto el navegador asigna un contenedor como block. Sólo con el hecho de agregar la propiedad display: grid al código de nuestro contenedor principal, el navegador ya lo interpreta como tal, a pesar de no cambiar visualmente. Vamos a generar algunas columnas.

.contenedor {
    border: 5px solid #e1bee7;
    background-color: #fff1ff;
    display: grid;
    grid-template-columns: 100px 200px 300px ;
}

Grid-template-columns y grid-template-rows

Define las columnas y filas de la cuadrícula con una lista de valores separados por espacios. Los valores representan el tamaño de la pista y el espacio entre ellos representa la línea de la cuadrícula.

grid-template-columns nos permite especificar el número de columnas y su ancho. En este caso usamos tres tamaños, cada uno 100px mayor al anterior. Vemos en el navegador que al llegar a la tercera columna, los elementos se mueven a la siguiente fila.

grid-template-rows nos permite especificar el número de filas y su ancho. En este caso usamos dos tamaños, el primero de 150px y el segundo de 250px.

grid-template-rows: 150px 250px;

grid-auto- Nos permite definir una altura a todas las columnas y filas. Es decir, si agregáramos otra columna o fila también tendría esta dimensión.

grid-auto-rows: 150px;

Grid-auto-flow

Nos permite cambiar el orden en el que están los grid items, este valor por defecto es row (fila), pero lo podemos cambiar.

grid-auto-flow nos permite modificar cómo se está llenando la grilla. Cuando los elementos no entran en la cantidad de filas definidas, crea nuevas. grid-auto-flow: column crea nuevas columnas.

Como observamos, todos los elementos se han alineado en una sola fila, esto es porque no hemos definido en el código la cantidad de filas que queremos. Vamos a establecer que las filas solo tengan dos dimensiones, mientras que todas las columnas tendrán 100px. De esta manera:

grid-template-rows: 100px 200px;
grid-auto-columns: 100px;
grid-auto-flow: column;

Vemos en el navegador que incluso el orden en que se organizan los elementos cambia. Todas las columnas tienen un mismo ancho. Puedes usar estas propiedades para jugar según lo que busques.

Qué son gaps

Es un espacio entre filas y columnas.

row-gap nos permite definir el tamaño de la brecha entre filas. Por supuesto, también lo puedes hacer en las columnas con column-gap. En este caso usamos***:***

row-gap: 15px;
column-gap: 30px;

Ojo: los espacios solo se crean entre filas o columnas, no con los extremos del contenedor.

gap, por otro lado nos permite crear un espaciado tanto para filas y columnas. Por ejemplo: gap: 40px crea el mismo espaciado entre sí, tanto en filas como en columnas.

Completa este reto

¡Aprendimos muchoooo! Ahora te toca participar. Como reto tendrás que construir un grid de tres filas y dos columnas con un gap de 20px entre ellas. Muy sencillo, ¿verdad? Como referencia, los números de los elementos deben coincidir con los de la siguiente imagen:

Como dato adicional, te dejo una página en la que podrás jugar y practicar tu conocimiento sobre CSS Grid y el manejo de filas y columnas. Para ello ve a Grid Garden.

Contribución creada por: José Miguel Ventimilla (Platzi Contributor), con aportes de Josué Ramírez Hernández.

José R. Lemus

Hace 3 años

Aporto mi grano de arena para las personas que no han digerido a la primera esta lección. Tanto el HTML como el CSS tiene comentarios del ejercicio presentado en esta lección, solo deben copiar y pegar pero lo más aconsejable es que puedan hacerlo como lo hice yo a modo de recordatorio.

DEMO:

HTML:

<body>
    <section class="main">
<h2>Diferentes ejercicios de las propiedades del contenedor</h2>
<br>
<h3>Habilitando el Display Grid</h3>        
<!-- DISPLAY GRID -->
        <div class="contenedor1">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
        </div>
<br>
<h3>Filas y columnas que deseo: X columnas y X anchura</h3>  
<!-- FILAS Y COLUMNAS QUE QUIERO - SABEMOS LA CANTIDAD DE ELEMENTOS (1) -->
        <div class="contenedor2">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
        </div>
<br>
<h3>Filas y columnas que deseo: X altura de filas</h3> 
<!-- FILAS Y COLUMNAS QUE QUIERO: ALTURA - SABEMOS LA CANTIDAD DE ELEMENTOS (2) -->
        <div class="contenedor3">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
        </div>
<br>
<h3>Grid auto: auto-rows</h3> 
<!-- GRID AUTO ROWS (1) - CUANDO NO SABEMOS LA CANTIDAD DE ELEMENTOS A INSERTAR  -->
        <div class="contenedor4">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
        </div>
<br>
<h3>Grid auto: auto-rows y auto-flow</h3> 
<!-- GRID AUTO ROWS (2) - ORDEN DE LOS NÚMEROS (POR DEFECTO SE RELLENA LAS COLUMNAS Y LUEGO FILAS, VAMOS A CAMBIARLO)  -->
        <div class="contenedor5">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
        </div>
<br>
<h3>Grid auto: auto-rows, auto-flow y auto-columns</h3>
<!-- GRID AUTO ROWS (3) - ORDEN DE LOS NÚMEROS (POR DEFECTO SE RELLENA LAS COLUMNAS Y LUEGO FILAS, VAMOS A CAMBIARLO)  -->
        <div class="contenedor6">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
        </div>
<br>
<h3>Gaps: espaciado interno de columnas y filas (invidual)</h3>      
        <div class="contenedor7">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
        </div>
<br>
<h3>Gaps: espaciado interno de columnas y filas (uniforme)</h3>        
        <div class="contenedor8">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
        </div>    
    </section>
</body>

CSS

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html {
    font-size: 62.5%;
    font-family: sans-serif;
}
h1 {
    font-size: 3.6rem;
    color: brown;
}
h2 {
    font-size: 2.8rem;
    color: black;
}
.item {
    border: 5px solid #00bcd4;
    font-size: 4rem;
}

.contenedor2, .contenedor3, .contenedor4, .contenedor5, .contenedor6, .contenedor7, .contenedor8 {
    border:5px solid #e1bee7;
    background-color: #fff1ff;
    display: grid;
}

/* DISPLAY GRID */
.contenedor1 {
    border:5px solid #e1bee7;
    background-color: #fff1ff;
    display: grid;
}
/* FILAS Y COLUMNAS QUE QUIERO (1) */
.contenedor2 {
    grid-template-columns: 100px 200px 300px; /* <<<< CUANTAS COLUMNAS Y DE QUÉ ANCHO */
}
/* FILAS Y COLUMNAS QUE QUIERO (2) */
.contenedor3 {
    grid-template-columns: 100px 200px 300px;
    grid-template-rows: 150px 250px; /* <<<< ALTURA DE LAS FILAS */
}
/* GRID AUTO (1) */
.contenedor4 {
    grid-template-columns: 100px 200px 300px;
    grid-auto-rows: 150px; /* <<<< LA ALTURA DE CUALQUIER FILA O COLUMNA QUE SE CREA AUNQUE NO SEPAMOS CUANTOS ELEMENTOS INSERTAR */
}
/* GRID AUTO (2): EL ORDEN DE LOS NÚMEROS */
.contenedor5 {
    grid-template-columns: 100px 200px 300px;
    grid-auto-rows: 150px;
    grid-auto-flow: column; /* <<<< CREA NUEVAS COLUMNAS EN VEZ DE FILAS, EN ESTE EJEMPLO NO HEMOS DEFINIDO CUANTAS FILAS DEBE TENER LA GRILLA */
}
.contenedor6 {
    grid-template-rows: 100px 200px; /* <<<< CANTIDAD DE FILAS ARRIBA 100 Y ABAJO 200 */
    grid-auto-columns: 100px; /* <<<< EL TAMALO DE CUALQUIER COLUMNA QUE SE CREA AUNQUE NO SEPAMOS CUANTOS ELEMENTOS INSERTAR */
    grid-auto-flow: column; /* <<<< CREA NUEVAS COLUMNAS EN VEZ DE FILAS, EN ESTE EJEMPLO NO HEMOS DEFINIDO CUANTAS FILAS DEBE TENER LA GRILLA */
}
/* ESPACIADO INTERNO GAPS (1) */
.contenedor7 {
    grid-template-rows: 100px 200px;
    grid-auto-columns: 100px;
    grid-auto-flow: column;
    row-gap: 15px; /*<<< ESPACIADO DE 15PX ENTRE FILAS */
    column-gap: 30PX; /*<<< ESPACIADO DE 30PX ENTRE COLUMNAS */
}
/* ESPACIADO INTERNO GAPS (2) */
.contenedor8 {
    grid-template-rows: 100px 200px;
    grid-auto-columns: 100px;
    grid-auto-flow: column;
    gap:40px; /*<<< ESPACIADO UNIFORME DE COLUMNAS Y FILAS DE 40PX */
}

Comentarios (800)800 comentarios

Jose Luis Grande Acevedo

Hace 5 años

Lidia María Ramirez Navarro

Cristian Nahuel Kairiyama

Hace 4 años

Ana Shek

Julian Trujillo

Jonner paz

Pepe Sosa

Eduardo Peña Ramos

Juan Gui Arenas

Estefany Salas

Team Platzi

Elcira Ibarra

Facundo Martin Corengia

Adal Alberto Obregon Uribe

Bayron Sneider Arciniegas Aldana

Benjamin Allen Ramirez Horna

Thomas André Dale Guevara

Dario Paladines

Jonathan David Olivos

Yuliani Paoleth Alcántara Galindo

Larry Finol

Raul Romero

Marcos Avila Rodriguez

Rolando Jose Lugo Palomino

Jazmin Ocampo Marin

Luisa María Franco Jiménez

Omar ali

Sebastian Pedroza

Juan Daniel Zuluaga Serna

Juan Castro

Profesor

Fernando Yutiz

Introducción a Grid

CSS Grid Layout: Crea Diseños Web Dinámicos

Conceptos básicos de CSS Grid Layout

Propiedades de Grid

Creación de Grillas con CSS Grid: Propiedades y Ejemplos Prácticos

Propiedades de Alineación en CSS Grid

Ubicación de Elementos en CSS Grid: Grid Column, Grid Row y Grid Area

Power ups de Grid

Funciones avanzadas de CSS Grid: minmax y repeat

CSS Grid: Uso de fr, minContent, maxContent, autofill y autofit

Proyecto

Diseño de Grillas para Páginas Web de Comida

Maquetación de Sección con Grid en HTML y CSS

Maquetación de Grillas y Estilos CSS en Proyectos Web

Creación de Grilla de Menú en HTML y CSS

Bonus

Creación de Diseños Responsivos con CSS Grid

Próximos pasos

Especificación de CSS Grid: Curso Final y Próximos Pasos

Creación de Grillas con CSS Grid: Propiedades y Ejemplos Prácticos

Progreso del curso

Introducción a Grid

Propiedades de Grid

Power ups de Grid

Proyecto

Bonus

Próximos pasos

Recursos

Recursos