Tutorial CSS: Espaciado y Alineación

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

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.