CSS Grid Maquetación: Diseño Bidimensional Profesional

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.

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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- 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>

<!-- 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>

htmlCssOnlineCourseResponsiveWebDesignFromScratch

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 especialDisponible por 0 Días y 00:00:00 Hs

Ver próximas fechas

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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

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

}

/* 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.

Í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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- 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>

<!-- 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>

Curso de HTML y CSS para Frontend

Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs

Ver próximas fechas

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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* 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;
}

/* 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.

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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- 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>

<!-- 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>

Curso de HTML y CSS para Frontend

Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs

Ver próximas fechas

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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* 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 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.

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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- 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>

<!-- 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>

Curso de HTML y CSS para Frontend

Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs

Ver próximas fechas

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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* Grilla explícita con muchas divisiones */
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

/* 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.

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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- 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>

<!-- 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.

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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* 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 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.

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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- 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>

<!-- 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>

Curso de HTML y CSS para Frontend

Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs

Ver próximas fechas

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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* 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;
}

/* 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.

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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- 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>

<!-- 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>

Curso de HTML y CSS para Frontend

Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs

Ver próximas fechas

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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* 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;
}

/* 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.

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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- 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>

<!-- 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>

Curso de HTML y CSS para Frontend

Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs

Ver próximas fechas

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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* 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;
}

/* 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.

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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- 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>

<!-- 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>

Curso de HTML y CSS para Frontend

Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs

Ver próximas fechas

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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* 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;
}

/* 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.

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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- 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>

<!-- 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>

Curso de HTML y CSS para Frontend

Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs

Ver próximas fechas

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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.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;
}

.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.

Í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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- 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>

<!-- 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>

Curso de HTML y CSS para Frontend

Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs

Ver próximas fechas

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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* 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;
}

/* 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.

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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- 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>

<!-- 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>

Curso de HTML y CSS para Frontend

Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs

Ver próximas fechas

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.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* 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;
}

/* 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.

Leccion Anterior

Representación visual de ejes principales y transversales organizando elementos con CSS Flexbox

CSS Flexbox: Arquitectura del Layout Flexible

Flexbox es el estándar moderno para organizar interfaces web. En esta guía completa vas a entender cómo funciona el sistema de ejes, cómo el navegador calcula el espacio disponible y cómo aplicar Flexbox para resolver layouts reales como navbars, tarjetas, grillas flexibles y estructuras responsive con menos CSS y más control.

Comenzar Lección

Leccion Actual

Esquema visual de un layout web bidimensional construido con CSS Grid

CSS Grid Maquetación

En esta lección aprenderás a usar CSS Grid para crear layouts complejos de forma clara y predecible, entendiendo filas, columnas, áreas y alineación para maquetar interfaces profesionales.

Comenzar Lección

Lecciones Siguiente

Diseño web adaptable usando Media Queries en CSS

Media Queries y diseño responsive en CSS

En esta lección vas a aprender cómo funcionan las Media Queries en CSS y por qué son fundamentales para el diseño responsive. Vas a entender cómo definir estilos base, trabajar con breakpoints, aplicar el enfoque Mobile First y ajustar layouts, tipografías y alineaciones según el tamaño de pantalla, logrando interfaces más mantenibles, legibles y profesionales.

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.

¿Cuál es la forma correcta de separar celdas en CSS Grid?

La separación debe hacerse con gap, row-gap o column-gap desde el contenedor. Esto asegura espacios uniformes y evita inconsistencias que aparecen al usar márgenes individuales.

¿Qué diferencia hay entre justify-items y align-items?

justify-items alinea los ítems horizontalmente dentro de sus celdas, mientras align-items lo hace verticalmente. Ambas propiedades actúan sobre cada celda individual.

¿Cuándo justify-content tiene efecto en una grilla?

justify-content solo funciona cuando la grilla es más angosta que su contenedor. En ese caso, distribuye el conjunto de columnas dentro del espacio horizontal sobrante.

¿Para qué se utiliza align-content en CSS Grid?

align-content controla la distribución vertical del conjunto de filas dentro del contenedor. Requiere que exista altura disponible para que sus valores sean visibles.

¿Cuál es la diferencia entre alinear ítems y alinear contenido en Grid?

Alinear ítems mueve el contenido dentro de cada celda, mientras que alinear contenido desplaza la grilla completa. Confundir estas propiedades es un error común en layouts.

¿Qué propiedades de Grid se aplican a los ítems hijos?

Propiedades como justify-self y align-self se aplican a ítems individuales. Permiten excepciones controladas sin alterar la alineación general definida por el contenedor.

¿Para qué sirven justify-self y align-self?

Permiten alinear un solo ítem dentro de su celda de forma independiente. Son útiles cuando un elemento necesita un comportamiento distinto sin romper el layout general.

¿Por qué no se recomienda usar márgenes para separar ítems en Grid?

Porque los márgenes rompen la lógica de la grilla y generan separaciones inconsistentes. gap mantiene la coherencia espacial y simplifica el control del diseño.

¿Qué error común ocurre al usar justify-content sin espacio sobrante?

Si la grilla ocupa todo el ancho del contenedor, justify-content no produce cambios visibles. Es un error frecuente pensar que la propiedad no funciona.

¿Cuándo CSS Grid es la herramienta más adecuada para un layout?

Grid es ideal cuando el diseño requiere controlar filas y columnas al mismo tiempo, definir áreas claras y mantener una arquitectura de layout predecible y escalable.