CSS

CSS

Tutorial CSS: Espaciado y Alineación

Aprende a controlar el espaciado y la alineación en CSS Grid con gap, justify-items y justify-content para diseños web responsivos y precisos.

Aprende CSS y certifícate

Espacio entre pistas con gap, column-gap y row-gap

Cuando trabajamos con CSS Grid, uno de los aspectos más importantes es controlar el espacio entre las filas y columnas de nuestra cuadrícula. Para esto, CSS Grid nos proporciona las propiedades gap, column-gap y row-gap, que nos permiten establecer espacios consistentes entre los elementos sin necesidad de usar márgenes adicionales.

Propiedad gap

La propiedad gap es una forma abreviada (shorthand) que nos permite definir el espacio entre filas y columnas en una sola declaración. Esta propiedad simplifica nuestro código y hace que sea más fácil mantener espaciados consistentes en toda la cuadrícula.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 20px; /* Aplica 20px de espacio tanto entre filas como entre columnas */
}

En este ejemplo, todos los elementos de la cuadrícula tendrán un espacio de 20 píxeles entre ellos, tanto horizontal como verticalmente. Es importante destacar que este espacio se aplica solo entre las celdas, no en los bordes externos de la cuadrícula.

También podemos especificar diferentes valores para el espacio entre filas y columnas:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 20px 10px; /* 20px entre filas, 10px entre columnas */
}

En este caso, el primer valor (20px) se aplica al espacio entre filas, y el segundo valor (10px) al espacio entre columnas.

Propiedad row-gap

Si solo necesitamos controlar el espacio entre las filas de nuestra cuadrícula, podemos utilizar la propiedad row-gap. Esta propiedad es especialmente útil cuando queremos mantener diferentes espaciados para filas y columnas.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 80px);
  row-gap: 15px; /* Aplica 15px de espacio solo entre filas */
}

En este ejemplo, solo habrá un espacio de 15 píxeles entre las filas, mientras que las columnas no tendrán ningún espacio entre ellas.

Propiedad column-gap

De manera similar, la propiedad column-gap nos permite controlar exclusivamente el espacio entre las columnas de nuestra cuadrícula.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100px 100px;
  column-gap: 25px; /* Aplica 25px de espacio solo entre columnas */
}

Aquí, solo habrá un espacio de 25 píxeles entre las columnas, mientras que las filas estarán juntas sin espacio entre ellas.

Combinando row-gap y column-gap

Podemos usar ambas propiedades juntas para lograr el mismo resultado que con la propiedad abreviada gap:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  row-gap: 20px;    /* Espacio entre filas */
  column-gap: 10px; /* Espacio entre columnas */
}

Este código es equivalente a usar gap: 20px 10px;. La elección entre usar la propiedad abreviada o las propiedades individuales depende de tus preferencias y del contexto específico de tu proyecto.

Ejemplo práctico

Veamos un ejemplo más completo para entender mejor cómo funcionan estas propiedades:

<div class="grid-container">
  <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>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 20px;
  background-color: #f0f0f0;
  padding: 20px;
}

.item {
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

En este ejemplo, creamos una cuadrícula de 3×2 con seis elementos. Cada elemento tiene un ancho igual (1fr) y una altura de 100px. El espacio entre todos los elementos es de 20px, tanto horizontal como verticalmente.

Unidades para los valores de gap

Podemos utilizar diferentes unidades para los valores de gap, row-gap y column-gap:

  • Píxeles (px): Proporcionan un espacio fijo y consistente.
.grid-container {
  gap: 20px;
}
  • Porcentajes (%): El espacio se calcula como un porcentaje del tamaño del contenedor.
.grid-container {
  gap: 5%;
}
  • Unidades relativas (em, rem): Se ajustan según el tamaño de fuente, lo que las hace útiles para diseños responsivos.
.grid-container {
  gap: 1.5rem;
}
  • Unidades viewport (vw, vh): El espacio se ajusta según el tamaño de la ventana del navegador.
.grid-container {
  gap: 2vw 1vh;
}

Compatibilidad y prefijos

Las propiedades gap, row-gap y column-gap tienen buen soporte en los navegadores modernos. Sin embargo, para una mayor compatibilidad con navegadores más antiguos, es posible que necesites usar las versiones con prefijo:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
  /* Propiedades modernas */
  gap: 20px;
  
  /* Versiones con prefijo para compatibilidad */
  grid-gap: 20px;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

Consideraciones de diseño responsivo

Al diseñar cuadrículas responsivas, es útil ajustar los valores de gap según el tamaño de la pantalla:

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1200px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
}

En este ejemplo, tanto el número de columnas como el espacio entre ellas aumentan a medida que la pantalla se hace más grande, proporcionando una mejor experiencia visual en diferentes dispositivos.

Alineación de elementos en celdas con justify-items y align-items

Cuando trabajamos con CSS Grid, no solo es importante definir la estructura de nuestra cuadrícula, sino también controlar cómo se alinean los elementos dentro de cada celda. Para esto, CSS Grid nos proporciona las propiedades justify-items y align-items, que nos permiten controlar la alineación horizontal y vertical de los elementos dentro de sus celdas respectivas.

Entendiendo el espacio de alineación

Antes de profundizar en estas propiedades, es importante entender que cada celda de la cuadrícula actúa como un contenedor para su elemento hijo. Por defecto, los elementos ocupan todo el espacio disponible en su celda, pero podemos cambiar este comportamiento y controlar su posición exacta.

La propiedad justify-items

La propiedad justify-items controla la alineación de los elementos a lo largo del eje horizontal (eje de las filas) dentro de sus celdas. Esta propiedad se aplica al contenedor de la cuadrícula y afecta a todos los elementos hijos.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  justify-items: center; /* Alinea horizontalmente todos los elementos al centro */
}

Los valores posibles para justify-items son:

  • start: Alinea los elementos al inicio (izquierda) de la celda.
  • end: Alinea los elementos al final (derecha) de la celda.
  • center: Centra los elementos horizontalmente dentro de la celda.
  • stretch: Estira los elementos para que ocupen todo el ancho disponible (valor por defecto).

Veamos un ejemplo con diferentes valores:

.grid-start {
  justify-items: start;
}

.grid-end {
  justify-items: end;
}

.grid-center {
  justify-items: center;
}

.grid-stretch {
  justify-items: stretch;
}

La propiedad align-items

De manera similar, la propiedad align-items controla la alineación de los elementos a lo largo del eje vertical (eje de las columnas) dentro de sus celdas.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  align-items: center; /* Alinea verticalmente todos los elementos al centro */
}

Los valores posibles para align-items son los mismos que para justify-items:

  • start: Alinea los elementos en la parte superior de la celda.
  • end: Alinea los elementos en la parte inferior de la celda.
  • center: Centra los elementos verticalmente dentro de la celda.
  • stretch: Estira los elementos para que ocupen toda la altura disponible (valor por defecto).

Combinando justify-items y align-items

Podemos usar ambas propiedades juntas para controlar la alineación en ambos ejes:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  justify-items: center;
  align-items: center;
}

Este código centra perfectamente todos los elementos tanto horizontal como verticalmente dentro de sus celdas, creando un efecto de alineación central completa.

Propiedad place-items

CSS Grid también ofrece la propiedad abreviada place-items, que nos permite establecer tanto align-items como justify-items en una sola declaración:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  place-items: center; /* Equivalente a align-items: center; justify-items: center; */
}

Si proporcionamos dos valores, el primero se aplica a align-items y el segundo a justify-items:

.grid-container {
  place-items: start end; /* align-items: start; justify-items: end; */
}

Ejemplo práctico

Veamos un ejemplo completo para entender mejor cómo funcionan estas propiedades:

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-template-rows: repeat(2, 150px);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 20px;
  
  /* Alineación de elementos */
  justify-items: center;
  align-items: center;
}

.item {
  width: 80px;
  height: 80px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

En este ejemplo, creamos una cuadrícula de 2×2 con cuatro elementos. Cada elemento tiene un tamaño fijo de 80×80 píxeles, pero las celdas de la cuadrícula son de 150×150 píxeles. Al usar justify-items: center y align-items: center, los elementos se centran perfectamente dentro de sus celdas, tanto horizontal como verticalmente.

Alineación individual con justify-self y align-self

Además de alinear todos los elementos a la vez, CSS Grid también nos permite controlar la alineación de elementos individuales mediante las propiedades justify-self y align-self:

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

.item-1 {
  justify-self: start;
  align-self: start;
}

.item-2 {
  justify-self: end;
  align-self: start;
}

.item-3 {
  justify-self: start;
  align-self: end;
}

.item-4 {
  justify-self: end;
  align-self: end;
}

En este ejemplo, cada elemento se alinea en una esquina diferente de su celda, anulando cualquier valor de justify-items o align-items que se haya establecido en el contenedor.

Ejemplo de alineación mixta

Podemos combinar la alineación general con alineaciones individuales para crear diseños más complejos:

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item special">3</div>
  <div class="item">4</div>
</div>
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
  justify-items: center;
  align-items: center;
}

.item {
  width: 60px;
  height: 60px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.special {
  background-color: #e74c3c;
  justify-self: stretch;
  align-self: stretch;
}

En este ejemplo, todos los elementos están centrados en sus celdas, excepto el elemento con la clase special, que se estira para ocupar todo el espacio disponible en su celda.

Consideraciones de diseño responsivo

Al diseñar con CSS Grid, es útil ajustar la alineación según el tamaño de la pantalla:

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: start;
  align-items: start;
}

@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
  }
}

En este ejemplo, los elementos se alinean en la esquina superior izquierda en pantallas pequeñas, pero se centran en pantallas más grandes, proporcionando una mejor experiencia visual en diferentes dispositivos.

Alineación de la cuadrícula con justify-content y align-content

Cuando trabajamos con CSS Grid, además de alinear los elementos individuales dentro de sus celdas, también podemos controlar cómo se alinea toda la cuadrícula dentro de su contenedor. Esto es especialmente útil cuando el tamaño total de la cuadrícula es menor que el espacio disponible en el contenedor. Para esto, CSS Grid nos proporciona las propiedades justify-content y align-content.

Diferencia entre alineación de elementos y alineación de cuadrícula

Es importante entender la diferencia entre:

  • justify-items/align-items: Controlan la alineación de los elementos dentro de sus celdas
  • justify-content/align-content: Controlan la alineación de la cuadrícula completa dentro del contenedor

La propiedad justify-content

La propiedad justify-content controla cómo se distribuye el espacio extra a lo largo del eje horizontal (eje de las filas) cuando el tamaño total de la cuadrícula es menor que el contenedor.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px); /* Ancho fijo de columnas */
  grid-template-rows: repeat(2, 100px);
  width: 500px; /* Contenedor más ancho que la cuadrícula */
  justify-content: center; /* Centra la cuadrícula horizontalmente */
}

Los valores posibles para justify-content son:

  • start: Alinea la cuadrícula al inicio (izquierda) del contenedor (valor por defecto).
  • end: Alinea la cuadrícula al final (derecha) del contenedor.
  • center: Centra la cuadrícula horizontalmente dentro del contenedor.
  • stretch: Estira la cuadrícula para ocupar todo el ancho disponible.
  • space-around: Distribuye el espacio uniformemente, con medio espacio en los extremos.
  • space-between: Distribuye el espacio uniformemente entre las columnas, sin espacio en los extremos.
  • space-evenly: Distribuye el espacio uniformemente entre las columnas y en los extremos.

La propiedad align-content

De manera similar, la propiedad align-content controla cómo se distribuye el espacio extra a lo largo del eje vertical (eje de las columnas) cuando el tamaño total de la cuadrícula es menor que el contenedor.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px); /* Altura fija de filas */
  height: 400px; /* Contenedor más alto que la cuadrícula */
  align-content: center; /* Centra la cuadrícula verticalmente */
}

Los valores posibles para align-content son los mismos que para justify-content:

  • start: Alinea la cuadrícula en la parte superior del contenedor (valor por defecto).
  • end: Alinea la cuadrícula en la parte inferior del contenedor.
  • center: Centra la cuadrícula verticalmente dentro del contenedor.
  • stretch: Estira la cuadrícula para ocupar toda la altura disponible.
  • space-around: Distribuye el espacio uniformemente, con medio espacio en los extremos.
  • space-between: Distribuye el espacio uniformemente entre las filas, sin espacio en los extremos.
  • space-evenly: Distribuye el espacio uniformemente entre las filas y en los extremos.

Propiedad place-content

CSS Grid también ofrece la propiedad abreviada place-content, que nos permite establecer tanto align-content como justify-content en una sola declaración:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  width: 500px;
  height: 400px;
  place-content: center; /* Equivalente a align-content: center; justify-content: center; */
}

Si proporcionamos dos valores, el primero se aplica a align-content y el segundo a justify-content:

.grid-container {
  place-content: end space-between; /* align-content: end; justify-content: space-between; */
}

Ejemplos visuales de justify-content

Veamos cómo se comportan los diferentes valores de justify-content en un ejemplo práctico:

<div class="grid-container grid-start">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
  width: 400px; /* Más ancho que la cuadrícula */
  height: 300px;
  background-color: #f0f0f0;
  margin-bottom: 20px;
}

.item {
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

/* Diferentes valores de justify-content */
.grid-start { justify-content: start; }
.grid-end { justify-content: end; }
.grid-center { justify-content: center; }
.grid-space-between { justify-content: space-between; }
.grid-space-around { justify-content: space-around; }
.grid-space-evenly { justify-content: space-evenly; }

Ejemplo práctico combinando alineaciones

Veamos un ejemplo completo que combina justify-content y align-content:

<div class="grid-container">
  <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>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  grid-template-rows: repeat(2, 80px);
  gap: 10px;
  width: 400px;
  height: 300px;
  background-color: #f0f0f0;
  
  /* Alineación de la cuadrícula */
  justify-content: space-evenly;
  align-content: center;
}

.item {
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

En este ejemplo, creamos una cuadrícula de 3×2 con seis elementos. La cuadrícula se centra verticalmente dentro del contenedor, mientras que horizontalmente los elementos se distribuyen uniformemente con el valor space-evenly.

Casos de uso prácticos

Diseño de galería de imágenes

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  justify-content: center;
}

@media (min-width: 768px) {
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

En este ejemplo, creamos una galería de imágenes que se ajusta automáticamente según el ancho disponible. Cuando hay espacio extra, la cuadrícula se centra horizontalmente.

Diseño de página completa

.page-layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  align-content: space-between;
}

.header { grid-row: 1; }
.main-content { grid-row: 2; }
.footer { grid-row: 3; }

En este ejemplo, creamos un diseño de página completa con encabezado, contenido principal y pie de página. El contenido se distribuye verticalmente con space-between, asegurando que el pie de página siempre esté en la parte inferior.

Diseño responsivo con justify-content y align-content

Podemos ajustar la alineación de la cuadrícula según el tamaño de la pantalla:

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 120px);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  width: 100%;
  height: 500px;
  justify-content: center;
  align-content: start;
}

@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(3, 150px);
    grid-template-rows: repeat(2, 120px);
    justify-content: space-around;
    align-content: center;
  }
}

@media (min-width: 1200px) {
  .grid-container {
    grid-template-columns: repeat(4, 180px);
    justify-content: space-between;
  }
}

En este ejemplo, la alineación de la cuadrícula cambia según el tamaño de la pantalla, proporcionando una mejor experiencia visual en diferentes dispositivos.

Combinando justify-content/align-content con justify-items/align-items

Es importante entender que podemos usar ambos conjuntos de propiedades simultáneamente:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
  width: 500px;
  height: 400px;
  
  /* Alineación de la cuadrícula dentro del contenedor */
  justify-content: center;
  align-content: center;
  
  /* Alineación de los elementos dentro de sus celdas */
  justify-items: start;
  align-items: end;
}

En este ejemplo, la cuadrícula completa se centra dentro del contenedor, mientras que cada elemento se alinea en la esquina inferior izquierda de su celda.

Diferencias entre alineación en Grid y en Flexbox

CSS ofrece dos sistemas de layout potentes para crear diseños web modernos: Grid y Flexbox. Aunque ambos comparten algunas similitudes en cuanto a propiedades de alineación, existen diferencias fundamentales en cómo funcionan y cuándo es más apropiado usar cada uno.

Dimensionalidad: el concepto clave

La diferencia más importante entre Grid y Flexbox radica en su dimensionalidad:

  • Flexbox es un sistema unidimensional que trabaja con una sola dimensión a la vez (filas O columnas).
  • Grid es un sistema bidimensional que trabaja simultáneamente con filas Y columnas.

Esta diferencia fundamental afecta directamente a cómo se aplican las propiedades de alineación en cada sistema.

Propiedades de alineación compartidas pero con diferente comportamiento

Tanto Grid como Flexbox utilizan propiedades similares para la alineación, pero su comportamiento varía:

/* Ejemplo de propiedades compartidas */
.container {
  /* Estas propiedades existen en ambos sistemas */
  justify-content: center;
  align-items: center;
}

Sin embargo, el contexto de aplicación de estas propiedades es diferente:

  • En Flexbox, justify-content alinea elementos en el eje principal (que puede ser horizontal o vertical).
  • En Grid, justify-content siempre alinea elementos en el eje horizontal (independientemente de la dirección).

Tabla comparativa de propiedades de alineación

Propósito Flexbox Grid
Alinear elementos en el eje principal justify-content justify-content (eje horizontal)
Alinear elementos en el eje secundario align-items align-items (eje vertical)
Alinear un elemento específico align-self justify-self y align-self
Distribuir espacio entre elementos justify-content justify-content y align-content
Alinear elementos dentro de su área No aplicable justify-items y align-items

Propiedades exclusivas de Grid

Grid introduce propiedades que no existen en Flexbox:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
  /* Propiedades exclusivas de Grid */
  justify-items: center;
  align-items: center;
}

La propiedad justify-items no existe en Flexbox porque en un sistema unidimensional no tiene sentido alinear elementos individualmente en el eje principal.

Alineación de elementos individuales

En Flexbox, solo podemos controlar la alineación individual de elementos en el eje secundario:

.flex-container {
  display: flex;
  align-items: center; /* Alineación predeterminada */
}

.flex-item {
  align-self: flex-start; /* Anula la alineación para este elemento */
}

En Grid, podemos controlar la alineación individual en ambos ejes:

.grid-container {
  display: grid;
  justify-items: center;
  align-items: center;
}

.grid-item {
  justify-self: start; /* Alineación horizontal individual */
  align-self: end;     /* Alineación vertical individual */
}

Distribución del espacio

La forma en que se distribuye el espacio también difiere entre ambos sistemas:

  • Flexbox distribuye el espacio principalmente entre elementos con propiedades como flex-grow y flex-shrink.
.flex-container {
  display: flex;
}

.flex-item {
  flex: 1; /* Distribuye el espacio disponible equitativamente */
}
  • Grid distribuye el espacio mediante fracciones (fr) y funciones como minmax():
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Proporción 1:2:1 */
}

Ejemplo práctico: centrado de elementos

Veamos cómo se centra un elemento en ambos sistemas:

Centrado con Flexbox:

.flex-container {
  display: flex;
  justify-content: center; /* Centrado horizontal */
  align-items: center;     /* Centrado vertical */
  height: 300px;
}

Centrado con Grid:

.grid-container {
  display: grid;
  place-items: center;     /* Shorthand para justify-items y align-items */
  /* Alternativa: justify-items: center; align-items: center; */
  height: 300px;
}

Cuándo usar cada sistema para alineación

La elección entre Grid y Flexbox depende del tipo de diseño que necesites:

  • Usa Flexbox cuando:
  • Necesites alinear elementos en una sola dimensión (fila o columna)
  • Trabajes con diseños más simples o componentes individuales
  • Requieras que el contenido determine el tamaño (content-first)
.navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
  • Usa Grid cuando:
  • Necesites alinear elementos en dos dimensiones (filas y columnas)
  • Trabajes con diseños complejos de página completa
  • Requieras un control preciso sobre la ubicación de los elementos
.dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-content: space-between;
}

Combinando ambos sistemas

Una práctica común y efectiva es combinar Grid y Flexbox en diferentes niveles de tu diseño:

.page-layout {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

.navigation {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

En este ejemplo, usamos Grid para la estructura general de la página y Flexbox para componentes internos como la navegación.

Ejemplo de diseño responsivo combinando ambos sistemas

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  justify-content: center;
}

.product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
  
  .product-card {
    flex-direction: row;
    align-items: flex-start;
  }
}

Este ejemplo muestra cómo Grid maneja la estructura general de una cuadrícula de productos, mientras que Flexbox controla la disposición interna de cada tarjeta de producto.

Consideraciones de rendimiento

En términos de rendimiento, ambos sistemas son eficientes, pero:

  • Flexbox puede ser ligeramente más eficiente para diseños simples unidimensionales.
  • Grid es más eficiente para diseños complejos bidimensionales, evitando anidamientos innecesarios.

La elección correcta depende más de la complejidad del diseño que de preocupaciones de rendimiento.

Compatibilidad con navegadores

Actualmente, tanto Grid como Flexbox tienen excelente soporte en navegadores modernos. Sin embargo, si necesitas compatibilidad con navegadores muy antiguos (como IE10), Flexbox podría tener mejor soporte que Grid.

La comprensión de estas diferencias te permitirá elegir el sistema de alineación más adecuado para cada situación de diseño, aprovechando las fortalezas de cada uno para crear interfaces web modernas y responsivas.

CONSTRUYE TU CARRERA EN IA Y PROGRAMACIÓN SOFTWARE

Accede a +1000 lecciones y cursos con certificado. Mejora tu portfolio con certificados de superación para tu CV.

Plan mensual

19.00 € /mes

Precio normal mensual: 19 €
47 % DE DESCUENTO

Plan anual

10.00 € /mes

Ahorras 108 € al año
Precio normal anual: 120 €
Aprende CSS online

Ejercicios de esta lección Espaciado y Alineación

Evalúa tus conocimientos de esta lección Espaciado y Alineación con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.

Todas las lecciones de CSS

Accede a todas las lecciones de CSS y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.

Introducción A Css

CSS

Introducción Y Entorno

Entorno Para Desarrollar Css

CSS

Introducción Y Entorno

Sintaxis

CSS

Sintaxis De Selectores Y Propiedades

Selectores Básicos

CSS

Sintaxis De Selectores Y Propiedades

Herencia Y Cascada

CSS

Sintaxis De Selectores Y Propiedades

Pseudo-clases Y Pseudo-elementos

CSS

Sintaxis De Selectores Y Propiedades

Colores En Css

CSS

Sintaxis De Selectores Y Propiedades

Unidades De Medida

CSS

Sintaxis De Selectores Y Propiedades

Especificidad

CSS

Sintaxis De Selectores Y Propiedades

Estilos De Fuente

CSS

Estilización De Texto Y Fondo

Propiedades De Texto

CSS

Estilización De Texto Y Fondo

Sombras En Texto Y Cajas

CSS

Estilización De Texto Y Fondo

Propiedades De Fondo

CSS

Estilización De Texto Y Fondo

Fuentes Web

CSS

Estilización De Texto Y Fondo

Efectos De Texto: Gradientes, Recortes

CSS

Estilización De Texto Y Fondo

Tipografía Avanzada

CSS

Estilización De Texto Y Fondo

Modelo De Caja

CSS

Modelo Caja

Propiedades De Posicionamiento

CSS

Modelo Caja

Propiedad 'Display'

CSS

Modelo Caja

Elementos 'Float' Y 'Clear'

CSS

Modelo Caja

Rellenos Y Márgenes

CSS

Modelo Caja

Bordes Y Contornos

CSS

Modelo Caja

Absolute, Fixed, Sticky Y Z-index

CSS

Posicionamiento

Flexbox Para Crear Layouts Y Estructuras

CSS

Flexbox

Css Grid Para Crear Layouts Y Estructuras

CSS

Flexbox

Propiedades Del Contenedor Flex

CSS

Flexbox

Propiedades De Los Items Flex

CSS

Flexbox

Columnas Y Filas En Grid

CSS

Css Grid

Espaciado Y Alineación

CSS

Css Grid

Tipografía Responsive

CSS

Diseño Responsive

Fundamentos Del Diseño Responsive

CSS

Diseño Responsive

Imágenes Responsive

CSS

Diseño Responsive

Funciones Matemáticas

CSS

Variables Y Funciones Css

Transformaciones 2d

CSS

Transformación, Transición, Animación

Transformaciones 3d

CSS

Transformación, Transición, Animación

Animaciones

CSS

Transformación, Transición, Animación

Transiciones

CSS

Transformación, Transición, Animación

Css Para Formularios

CSS

Css Avanzado

Accesibilidad Web Con Css

CSS

Css Avanzado

Container Queries

CSS

Css Avanzado

Selectores Avanzados

CSS

Css Avanzado

Animaciones Y Transiciones

CSS

Técnicas Modernas Y Metodologías

Variables En Css

CSS

Técnicas Modernas Y Metodologías

Diseño Responsive Con Media Queries

CSS

Técnicas Modernas Y Metodologías

Metodologías De Escritura En Css

CSS

Técnicas Modernas Y Metodologías

Accede GRATIS a CSS y certifícate

En esta lección

Objetivos de aprendizaje de esta lección

  • Comprender el uso de las propiedades gap, row-gap y column-gap para gestionar el espacio entre filas y columnas en CSS Grid.
  • Aprender a alinear elementos dentro de las celdas usando justify-items, align-items y la propiedad abreviada place-items.
  • Conocer cómo alinear la cuadrícula completa dentro de su contenedor mediante justify-content, align-content y place-content.
  • Diferenciar entre la alineación de elementos individuales y la alineación de la cuadrícula completa.
  • Entender las diferencias clave entre la alineación en CSS Grid y Flexbox y cuándo usar cada sistema.