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

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:0011:55

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

Curso de CSS Grid Básico

Clase 5 de 13

Clase 5 / 13

Recursos

Ya conoces las propiedaddes del contenedor y las propiedades de alineación. Vamos ahora a conocer las de ubicación.

Cuáles son las propiedades de ubicación

Imaginemos que tenemos una grilla de 4x4 con sólo dos elementos. Podemos moverlos para que ocupen más espacio que una celda, o estén en una celda distinta a la que deberían estar.

Para las columnas, las propiedades que nos van a ayudar son:

grid-column-start: con esta propiedad nosotros vamos a decirle al elemento en que línea de columna debe comenzar.
grid-column-end: con esta propiedad nosotros vamos a decirle al elemento hasta que línea de la columna va a llegar.
grid-column: es una mezcla de grid-column-start y grid-column-end. Los valores que necesita son el valor inicial y el valor final, estos van separados de un ""/"" (diagonal).

Para las filas las propiedades son iguales, solo que vamos a trabajar en las filas:

grid-row-start
grid-row-end
grid-row

Además de estas propiedades, tenemos:

grid-area: con esta propiedad declaramos solo una vez donde va a comenzar tanto en columna como en fila y donde va a terminar tanto en columna como en fila.

Cómo agregar las propiedades de ubicación

Vamos al editor de texto para comprender mejor estos conceptos. Primero creamos un contenedor con tres elementos a los que les agregamos clases para poder aplicar estilos individuales a cada uno.

    <div class=""contenedor"">
        <div class=""item item-1"">1</div>
        <div class=""item item-2"">2</div>
        <div class=""item item-3"">3</div>
    </div>

En nuestro archivo CSS llamamos al contenedor con su clase y le aplicamos propiedades similares a las que hemos trabajado anteriormente.

Ajustamos el ancho de fuente en 4rem para todas las clases. Le damos un borde y color de fondo distinto a cada elemento del contenedor para poder diferenciarlo.

.contenedor {
    border: 5px solid #e1bee7;
    background-color: white;
    display: grid;
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 75px 75px 75px;
    place-content: center;
}
.item {
    font-size: 4rem;
}
.item-1 {
    border: 5px solid #f8bbd0;
    background-color: #ffeeff;
}
.item-2 {
    border: 5px solid #e1bee7;
    background-color: #fff1ff;
}
.item-3 {
    border: 5px solid #b2ebf2;
    background-color: #e5ffff;
}

Item 1

Ahora, editemos el primer elemento para que ocupe todo el ancho de la primera fila. Debe empezar a numerar los elementos de izquierda a derecha.

Mucho ojo, el número no es la columna en sí, sino la línea en que termina la columna. Entonces si queremos que ocupe hasta la tercera celda, tendremos que colocar grid-column-end: 4.

.item-1 {
    border: 5px solid #f8bbd0;
    background-color: #ffeeff;
    grid-column-start: 1;
    grid-column-end: 4;
}

Item 2

En este caso queremos que ocupe la primera celda de las filas 2 y 3 dentro de la primera columna. Como la primera fila ya está ocupada, debemos empezar de la fila 2 y terminar en la 4.

grid-row: 2/4

Item 3

El tercer item ocupa tanto filas como columnas, por lo que conviene usar grid-area. El orden en que debemos colocar el valor es: fila y columna en que empieza, fila y columna en que termina.

.item-3 {
    border: 5px solid #b2ebf2;
    background-color: #e5ffff;
    grid-area: 2/2/4/4;
}

¿Existen atajos para usar las propiedades?

Podemos usar grid-template-areas para acomodar todos los elementos con mucha más rapidez. grid-template-areas declaramos areas dentro de la grilla.

Para ello, agregamos la información a la tabla como si fuera dentro de una grilla, de esta manera:

.contenedor {
    border: 5px solid #e1bee7;
    background-color: white;
    display: grid;
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 75px 75px 75px;
    grid-template-areas: 
        ""header header header""
        ""side main main""
        ""side main main"";
    place-content: center;
}

Luego, colocamos el nombre de la celda creada anteriormente a cada item.

}
.item-1 {
    border: 5px solid #f8bbd0;
    background-color: #ffeeff;
    grid-area: header;
}
.item-2 {
    border: 5px solid #e1bee7;
    background-color: #fff1ff;
    grid-area: side;
}

Completa este reto

Aprendiste varias formas de llegar a un mismo resultado. Ya sólo te queda jugar para seguir practicando lo aprendido. Pero adivina, te tengo un reto para ello.

Debes recrear la grilla que ves en al siguiente imagen. Estás en la total libertad de usar el método que consideres el mejor o simplemente el que quieras usar. Recuerda que en programación no hay una sola manera de lograr las cosas.

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

Manuel Cabos

Hace 4 años

¿Cómo? ¿Qué haga un pixel art con Grid? 😂

style.css

:root {
  --item-w: 64px;
  --base: #0db50d;
  --light: #8fe38f;
  --shadow: #0f800f;
  --black: #004500;
  --border: #dac76b;
  --bg-frame: #753E23;
  --shadow-frame: #552f1d;
}

.container {
  height: 600px;
  border: 40px solid var(--border);
  background: radial-gradient(circle, var(--bg-frame) 70%, var(--shadow-frame) 100%);

  display: grid;
  grid-template-columns: 
    var(--item-w) var(--item-w) var(--item-w) var(--item-w)
    var(--item-w) var(--item-w) var(--item-w) var(--item-w);
  grid-template-rows: 
    var(--item-w) var(--item-w) var(--item-w) var(--item-w)
    var(--item-w) var(--item-w) var(--item-w) var(--item-w);
  place-content: center;
}

/* long-shadow-1 */
.item-13 {
  grid-area: 2/5/4/6;
}

/* long-light */
.item-16 {
  grid-area: 2/8/4/9;
}

/* eye 1 */
.item-18 {
  grid-area: 3/2/5/4;
}

/* eye 2 */
.item-20 {
  grid-area: 3/6/5/8;
}

/* nose */
.item-28 {
  grid-area: 5/4/6/6
}

/* long-shadow-2 */
.item-33 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 6;
  grid-row-end: 8;
}

/* mouth */
.item-34 {
  grid-column: 3/7;
  grid-row: 6/8;
}

.item {
  background-color: var(--base);
}

.item-1, .item-5, .item-16, .item-29, .item-36, .item-37, .item-44 {
  background-color: var(--light);
}

.item-2, .item-8, .item-9, .item-13, .item-30, .item-33, .item-39, .item-46 {
  background-color: var(--shadow);
}

.item-18, .item-20, .item-28, .item-34, .item-42, .item-45 {
  background-color: var(--black);
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
    <div class="item item-4"></div>
    <div class="item item-5"></div>
    <div class="item item-6"></div>
    <div class="item item-7"></div>
    <div class="item item-8"></div>
    <div class="item item-9"></div>
    <div class="item item-10"></div>
    <div class="item item-11"></div>
    <div class="item item-12"></div>
    <div class="item item-13"></div>
    <div class="item item-14"></div>
    <div class="item item-15"></div>
    <div class="item item-16"></div>
    <div class="item item-17"></div>
    <div class="item item-18"></div>
    <div class="item item-19"></div>
    <div class="item item-20"></div>
    <div class="item item-21"></div>
    <div class="item item-22"></div>
    <div class="item item-23"></div>
    <div class="item item-24"></div>
    <div class="item item-25"></div>
    <div class="item item-26"></div>
    <div class="item item-27"></div>
    <div class="item item-28"></div>
    <div class="item item-29"></div>
    <div class="item item-30"></div>
    <div class="item item-31"></div>
    <div class="item item-32"></div>
    <div class="item item-33"></div>
    <div class="item item-34"></div>
    <div class="item item-35"></div>
    <div class="item item-36"></div>
    <div class="item item-37"></div>
    <div class="item item-38"></div>
    <div class="item item-39"></div>
    <div class="item item-40"></div>
    <div class="item item-41"></div>
    <div class="item item-42"></div>
    <div class="item item-43"></div>
    <div class="item item-44"></div>
    <div class="item item-45"></div>
    <div class="item item-46"></div>
    <div class="item item-47"></div>
    <div class="item item-48"></div>
  </div>
</body>
</html>

Comentarios (729)729 comentarios

Daniela Jurado Blandón

Hace 5 años

Estefany Salas

Team Platzi

David Castro

Cristian Leonardo Castañeda Olarte

Beder Danilo Casa Condori

Ana Shek

Robert Mestanza

Rafael Martínez Rodríguez

Juan Gui Arenas

Guillermo González López

Eddie Mora

Facundo Martin Corengia

Jonathan David Olivos

Andrés Felipe Duque Morales

Hugo Herrera

diego gomez

Jonnier Martinez

Jorge Luis Estevez Solares

Ricardo José Zamaro Urbina

Fernando Yutiz

Jose Montoya

Mario Alberto Villarejo Estrada

Platzi Team

Jovanny Alarcon C

Dylan Peralta

Misael Gomez

Rouseld Bayardo Castilblanco Gonzalez

Carlo Wesley Martinez Ortiz

Luis Berenguer

Omar Gabriel Aguilar Moscoso

Fernando Francisco López Mauro

José Isidro Torres Caldea

Enrique Orozco Gaytán

Maria Esther Mendoza Zafra

Sebastian Pedroza

Ruben Vivas

Carlos Rafael Córdova Flores

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

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

Progreso del curso

Introducción a Grid

Propiedades de Grid

Power ups de Grid

Proyecto

Bonus

Próximos pasos

Recursos

Recursos