MAQUETACIÓN WEB

CSS Grid Maquetación

Cómo construir layouts bidimensionales claros y escalables

Domina CSS Grid para crear layouts bidimensionales complejos. Aprende a controlar filas, columnas y áreas para diseñar interfaces web profesionales, ordenadas y mantenibles.

1

Cuándo Grid es la herramienta correcta

A diferencia de Flexbox, Grid permite controlar simultáneamente filas y columnas. Esto lo hace ideal para layouts complejos donde los elementos ocupan áreas específicas y no solo se alinean en una dirección.

Comparación visual entre layout unidimensional y bidimensional
Grid trabaja en dos ejes al mismo tiempo: filas y columnas.
2

HTML base para una grilla simple

Antes de definir tamaños o posiciones, es necesario contar con un contenedor y elementos hijos. Grid trabaja siempre desde el elemento padre, que es quien define las reglas de distribución.

<!-- Contenedor que se convertirá en grilla -->
<section class="grid-container">
  <!-- Cada div será un ítem de la grilla -->
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</section>
Publicidad
html-css-online-course-responsive-web-design-from-scratch
Aprendé desde cero con clases 100% en vivo, grupos súper reducidos y acompañamiento real. Todo el contenido está diseñado y dictado por el creador de la plataforma, para que aprendas de verdad, sin videos fríos ni cursos masivos.

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.10 clases en vivo con profesores expertos
Precio $150000 ARG Oferta especial
Ver próximas fechas
3

Activando el sistema Grid

La grilla se activa aplicando display grid al contenedor padre. Desde ese momento, todos los hijos directos pasan a comportarse como ítems de la grilla y responden a sus reglas.

/* Contenedor principal de la grilla */
.grid-container {
  /* Activa el sistema de grilla */
  display: grid;

}
Activación del sistema Grid mediante display grid
Sin display grid, las propiedades de grilla no tienen efecto.
4

Ítems dentro de una grilla explícita

Cuando se definen filas y columnas explícitas, cada ítem ocupa automáticamente una celda. El orden visual depende de la estructura de la grilla y no solo del orden del HTML.

<!-- Grilla con estructura definida por CSS -->
<div class="grid-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>
5

Definiendo filas y columnas con tamaños fijos y fracciones

Grid permite definir tamaños exactos o proporcionales. Las unidades fr reparten el espacio disponible de forma flexible, adaptándose al tamaño del contenedor.

/* Definición explícita de la grilla */
.grid-container {
  display: grid;

  /* Dos columnas: una ocupa el doble que la otra */
  grid-template-columns: 2fr 1fr;

  /* Dos filas: la primera es más alta que la segunda */
  grid-template-rows: 3fr 1fr;
}
Distribución de espacio en Grid usando unidades fr
Las fracciones reparten el espacio restante de forma proporcional.
6

HTML base para una grilla repetitiva

Cuando se trabaja con grillas grandes y regulares, el HTML se mantiene simple. Grid se encarga de distribuir los elementos automáticamente según la cantidad de filas y columnas definidas.

<!-- Contenedor preparado para una grilla de muchas columnas y filas -->
<div class="grid-container">
  <!-- Cada div ocupa una celda automáticamente -->
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
</div>
7

Creando grillas grandes con repeat()

La función repeat() evita escribir valores repetidos manualmente. Permite definir cuántas columnas o filas se crean y qué tamaño tendrá cada una, haciendo el código más claro y escalable.

/* Grilla con múltiples columnas y filas iguales */
.grid-container {
  display: grid;

  /*3 columnas del mismo tamaño */
  grid-template-columns: repeat(3, 1fr);

  /* 3 filas del mismo tamaño */
  grid-template-rows: repeat(3, 1fr);
}
Grilla CSS generada con la función repeat
repeat() simplifica la creación de grillas extensas y uniformes.
8

Elementos dentro de una grilla visible

Aunque la grilla exista, solo se ocuparán las celdas necesarias según la cantidad de elementos. El resto del espacio queda disponible para futuros ítems o reordenamientos.

<!-- Grilla lista para alojar múltiples elementos -->
<section class="grid-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
  <div>Item 10</div>
  <div>Item 11</div>
  <div>Item 12</div>
</section>
9

Comprendiendo la estructura visual de la grilla

Definir filas y columnas explícitas permite pensar el diseño como una matriz completa. Cada celda existe aunque no tenga contenido, facilitando layouts complejos y consistentes.

/* Grilla explícita con muchas divisiones */
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
Representación visual de filas y columnas explícitas en Grid
Grid define una matriz completa, no solo las celdas ocupadas.
10

HTML semántico para Grid por áreas

Grid por áreas se apoya en una estructura HTML clara. Cada etiqueta representa una sección lógica del layout, que luego será posicionada desde CSS sin alterar el orden del marcado.

<!-- Contenedor principal del layout -->
<div class="layout">
  <header>Header</header>
  <nav>Navegación</nav>
  <section id="productos">Productos</section>
  <section id="servicios">Servicios</section>
  <aside>Publicidad</aside>
  <footer>Footer</footer>
</div>
HTML semántico preparado para grid-template-areas
Las áreas se definen en CSS, no en el orden del HTML.
11

Definiendo layout con grid-template-areas

Las áreas permiten diseñar el layout de forma visual, usando nombres. Cada fila del grid se escribe como texto, facilitando la lectura y el mantenimiento del diseño.

/* Layout definido por áreas */
.layout {
  display: grid;

  /* Definición visual del layout */
  grid-template-areas:
    "nav header header"
    "nav productos publicidad"
    "nav servicios publicidad"
    "nav footer footer";

  grid-template-columns: 20% auto 15%;
  grid-template-rows: 80px 1fr 1fr 60px;
}

header { grid-area: header; }
nav { grid-area: nav; }
#productos { grid-area: productos; }
#servicios { grid-area: servicios; }
aside { grid-area: publicidad; }
footer { grid-area: footer; }
Layout CSS Grid definido mediante grid-template-areas
Las áreas permiten diseñar el layout como un mapa visual.
12

Estructura base para aplicar espacios entre celdas

El espaciado entre elementos debe resolverse desde la grilla y no con márgenes individuales. Esto mantiene una separación uniforme y controlada en todo el layout.

<!-- Grilla con múltiples elementos -->
<div class="grid">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>
13

Separación uniforme con gap

La propiedad gap define la distancia entre filas y columnas. Es la forma correcta de separar celdas en Grid sin romper la estructura ni depender de márgenes individuales.

/* Grilla con separación controlada */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  /* Espacio horizontal entre columnas */
  column-gap: 10px;

  /* Espacio vertical entre filas */
  row-gap: 15px;
}
Espaciado entre filas y columnas usando gap en Grid
gap mantiene separaciones consistentes en toda la grilla.
14

HTML base para alinear ítems en Grid

Para entender la alineación en Grid, primero necesitamos una grilla con ítems más pequeños que sus celdas. Esto permite ver claramente cómo se acomodan dentro de cada celda.

<!-- Contenedor que define una grilla -->
<section class="grid-container">
  <!-- Ítems intencionalmente pequeños -->
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</section>
15

Alineando ítems dentro de sus celdas

Las propiedades justify-items y align-items controlan cómo se posiciona cada ítem dentro de su propia celda. No mueven la grilla, sino el contenido interno.

/* Grilla con celdas visibles */
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;

  /* Alineación horizontal dentro de la celda */
  justify-items: center;

  /* Alineación vertical dentro de la celda */
  align-items: center;
}

/* Ítems más pequeños que la celda */
.grid-item {
  padding: 5px;
  border: 1px solid black;
}
Alineación de ítems dentro de sus celdas en CSS Grid
Estas propiedades trabajan sobre cada celda individual.
16

Grilla con espacio disponible en el contenedor

Para que justify-content tenga efecto, la grilla debe ocupar menos ancho que su contenedor. Esto permite distribuir el conjunto de columnas dentro del espacio sobrante.

<!-- Contenedor con ancho mayor al de la grilla -->
<div class="wrapper">
  <div class="grid-container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
</div>
Publicidad
html-css-online-course-responsive-web-design-from-scratch
Aprendé desde cero con clases 100% en vivo, grupos súper reducidos y acompañamiento real. Todo el contenido está diseñado y dictado por el creador de la plataforma, para que aprendas de verdad, sin videos fríos ni cursos masivos.

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.10 clases en vivo con profesores expertos
Precio $150000 ARG Oferta especial
Ver próximas fechas
17

Distribuyendo la grilla en el eje horizontal

justify-content define cómo se distribuye el conjunto completo de columnas dentro del contenedor. Requiere espacio sobrante para que sus valores sean visibles.

/* Contenedor externo */
.wrapper {
  width: 100%;
}

/* Grilla más angosta que su contenedor */
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 120px);
  grid-template-rows: repeat(2, 80px);
  gap: 10px;

  /* Distribuye la grilla horizontalmente */
  justify-content: center;
}
Distribución horizontal del contenido usando justify-content
justify-content mueve el conjunto completo de columnas.
18

Grilla con altura disponible

Para que align-content funcione, el contenedor debe tener más altura que la grilla. Esto permite distribuir el conjunto de filas dentro del espacio vertical sobrante.

<!-- Contenedor con altura definida -->
<div class="wrapper">
  <div class="grid-container">
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
    <div class="box">D</div>
  </div>
</div>
19

Distribuyendo filas en el eje vertical

align-content controla cómo se posiciona el conjunto completo de filas dentro del contenedor. Funciona de forma análoga a justify-content, pero en el eje vertical.

/* Contenedor externo con altura */
.wrapper {
  height: 400px;
}

/* Grilla más baja que su contenedor */
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 120px);
  grid-template-rows: repeat(2, 80px);
  gap: 10px;

  /* Distribuye la grilla verticalmente */
  align-content: center;
}
Distribución vertical del contenido usando align-content
align-content posiciona el conjunto de filas.
20

HTML para comparar alineación de ítems y contenido

Usando la misma estructura HTML, podemos observar cómo cambian los resultados según alineemos los ítems individualmente o el contenido completo de la grilla.

<!-- Misma estructura para distintas pruebas de alineación -->
<div class="grid-container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>
21

Items vs Content: qué mueve cada propiedad

justify-items y align-items trabajan sobre cada celda. justify-content y align-content mueven la grilla completa. Entender esta diferencia evita errores comunes en layouts.

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 120px);
  grid-template-rows: repeat(2, 80px);
  gap: 10px;

  /* Alinea ítems dentro de su celda */
  justify-items: center;
  align-items: center;

  /* Alinea la grilla completa */
  justify-content: space-evenly;
  align-content: space-between;
}
Comparación visual entre alineación de ítems y de contenido
Items afecta celdas; content afecta la grilla completa.
22

Ítem específico a modificar dentro de la grilla

justify-self y align-self se aplican a un ítem puntual. El resto de los elementos mantiene la alineación definida por el contenedor, lo que permite excepciones controladas.

<!-- Grilla con un ítem destacado -->
<div class="grid-container">
  <div class="item item-a">Item A</div>
  <div class="item">Item B</div>
  <div class="item">Item C</div>
  <div class="item">Item D</div>
</div>
23

Alineando un solo ítem con justify-self y align-self

Estas propiedades permiten alinear un ítem dentro de su celda sin afectar a los demás. Son el equivalente individual de justify-items y align-items.

/* Grilla base */
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 120px);
  gap: 10px;

  /* Alineación general para todos los ítems */
  justify-items: stretch;
  align-items: stretch;
}

/* Estilo común */
.item {
  border: 1px solid black;
  padding: 8px;
}

/* Alineación individual del ítem A */
.item-a {
  /* Alineación horizontal dentro de su celda */
  justify-self: center;

  /* Alineación vertical dentro de su celda */
  align-self: start;
}
Alineación individual de un ítem usando justify-self y align-self
self modifica un solo ítem, no toda la grilla.
24

HTML con ítems preparados para reglas individuales

Hasta ahora trabajamos sobre el contenedor. En Grid, cada ítem hijo también puede modificar su propio comportamiento. Este HTML sirve como base para aplicar reglas específicas a un solo elemento.

<!-- Contenedor principal de la grilla -->
<div class="grid-container">
  <!-- Ítems hijos de la grilla -->
  <div class="item item-a">
    <h3>Item A</h3>
    <p>Description A</p>
  </div>
  <div class="item item-b">
    <h3>Item B</h3>
    <p>Description B</p>
  </div>
  <div class="item item-c">
    <h3>Item C</h3>
    <p>Description C</p>
  </div>
  <div class="item item-d">
    <h3>Item D</h3>
    <p>Description D</p>
  </div>
</div>
Publicidad
html-css-online-course-responsive-web-design-from-scratch
Aprendé desde cero con clases 100% en vivo, grupos súper reducidos y acompañamiento real. Todo el contenido está diseñado y dictado por el creador de la plataforma, para que aprendas de verdad, sin videos fríos ni cursos masivos.

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.10 clases en vivo con profesores expertos
Precio $150000 ARG Oferta especial
Ver próximas fechas
25

Qué propiedades pueden usar los ítems hijos

Algunas propiedades de Grid no se aplican al contenedor, sino a cada ítem. Esto permite modificar alineación o asignar áreas específicas sin romper la estructura general del layout.

/* Grilla base */
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 120px);
  gap: 10px;
}

/* Estilo común para visualizar los ítems */
.item {
  border: 1px solid black;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
Ítems de una grilla listos para aplicar propiedades individuales
Las reglas del contenedor y del ítem cumplen roles distintos.

Lección anterior

Representación visual de ejes principales y transversales organizando elementos con CSS Flexbox
Flexbox permite al navegador distribuir y alinear elementos de forma inteligente según el espacio disponible.

CSS Flexbox: Arquitectura del Layout Flexible

Flexbox es clave para layouts modernos. Aprende a usar su sistema de ejes, distribuye el espacio y alinea elementos para crear interfaces responsive, limpias y profesionales con total control.

Comenzar Lección

Lección actual

Esquema visual de un layout web bidimensional construido con CSS Grid
CSS Grid permite diseñar layouts completos controlando filas y columnas al mismo tiempo.

CSS Grid Maquetación

Domina CSS Grid para crear layouts bidimensionales complejos. Aprende a controlar filas, columnas y áreas para diseñar interfaces web profesionales, ordenadas y mantenibles.

Lección actual

Lección siguiente

Diseño web adaptable usando Media Queries en CSS
Las Media Queries permiten adaptar el diseño a distintos tamaños de pantalla.

Media Queries y diseño responsive en CSS

Domina el diseño responsive con Media Queries: define breakpoints, aplica Mobile First y adapta layouts y tipografía para interfaces perfectas en cualquier pantalla.

Comenzar Lección
¿Qué es CSS Grid y para qué se utiliza en layouts web?⌄CSS Grid es un sistema de maquetación bidimensional que permite definir filas y columnas al mismo tiempo. Se utiliza para construir layouts complejos y consistentes sin depender del orden del HTML.
¿Cuál es la diferencia entre CSS Grid y Flexbox?⌄Grid trabaja en dos dimensiones, controlando filas y columnas simultáneamente, mientras que Flexbox es unidimensional. Grid es ideal para layouts estructurales y Flexbox para alineaciones lineales.
¿Por qué CSS Grid se define siempre desde el contenedor padre?⌄Porque el contenedor es quien establece la grilla y sus reglas. Los elementos hijos solo se adaptan a esa estructura, lo que centraliza el control del layout y mejora el mantenimiento del CSS.
¿Qué significa activar Grid con display: grid?⌄Aplicar display: grid convierte un elemento en contenedor de grilla. Desde ese momento, sus hijos directos pasan a ser ítems de Grid y responden a propiedades como filas, columnas y alineación.
¿Qué son las filas y columnas explícitas en CSS Grid?⌄Son filas y columnas definidas manualmente con grid-template-rows y grid-template-columns. Permiten crear una matriz completa donde cada celda existe aunque no tenga contenido.
¿Para qué sirven las unidades fr en CSS Grid?⌄Las unidades fr reparten el espacio disponible de forma proporcional entre filas o columnas. Facilitan layouts flexibles que se adaptan al tamaño del contenedor sin cálculos manuales.
¿Cuándo conviene usar repeat() en una grilla CSS?⌄repeat() se usa cuando hay patrones repetidos de filas o columnas. Reduce código duplicado, mejora la legibilidad y hace que la grilla sea más escalable y fácil de mantener.
¿Por qué se recomienda mantener el HTML simple al usar Grid?⌄Porque Grid traslada la complejidad del layout al CSS. Un HTML simple y semántico mejora la accesibilidad, la claridad del código y evita dependencias visuales en el marcado.
¿Qué son las áreas en CSS Grid y para qué sirven?⌄Las áreas permiten nombrar regiones del layout y organizarlas visualmente con grid-template-areas. Facilitan la lectura del diseño y desacoplan la estructura visual del orden del HTML.
¿Por qué grid-template-areas mejora el mantenimiento del layout?⌄Porque define el diseño como un mapa visual con nombres claros. Esto hace que los cambios estructurales sean más simples, legibles y menos propensos a errores.