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ícateEspacio 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 celdasjustify-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
yflex-shrink
.
.flex-container {
display: flex;
}
.flex-item {
flex: 1; /* Distribuye el espacio disponible equitativamente */
}
- Grid distribuye el espacio mediante fracciones (
fr
) y funciones comominmax()
:
.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.
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.
Reto modelo caja CSS
Propiedades de posicionamiento
Modelo de caja
Sombras en texto y cajas
Reto implementación de fuentes web
Sintaxis básica
Estilos de fuente
Diseño responsive con media queries
Animaciones y transiciones
Proyecto CSS Landing page simple
Reto unidades de medida
Propiedades de texto
Metodologías BEM, SMACSS, OOCSS
Herencia y cascada
Sintaxis avanzada
Reto fondos background CSS
Reto sintaxis CSS
Flexbox en diseños modernos
Elementos 'float' y 'clear'
Pseudo-clases y pseudo-elementos
Reto grid de columnas en CSS
Selectores avanzados
Reto componente responsive
Reto formulario estilizado
Proyecto CSS crear una navbar
Proyecto CSS Dashboard Responsive
Reto Flexbox Hero
Propiedades de fondo
Introducción a CSS
Reto selectores básicos CSS
Reto Flexbox Card
Reto propiedades texto
Modelo de caja
Propiedad 'display'
Variables en CSS
Grid en diseños de cuadrícula
Selectores básicos
Reto tema claro/oscuro con variables
Reto especificidad y cascada
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
Introducción Y Entorno
Entorno Para Desarrollar Css
Introducción Y Entorno
Sintaxis
Sintaxis De Selectores Y Propiedades
Selectores Básicos
Sintaxis De Selectores Y Propiedades
Herencia Y Cascada
Sintaxis De Selectores Y Propiedades
Pseudo-clases Y Pseudo-elementos
Sintaxis De Selectores Y Propiedades
Colores En Css
Sintaxis De Selectores Y Propiedades
Unidades De Medida
Sintaxis De Selectores Y Propiedades
Especificidad
Sintaxis De Selectores Y Propiedades
Estilos De Fuente
Estilización De Texto Y Fondo
Propiedades De Texto
Estilización De Texto Y Fondo
Sombras En Texto Y Cajas
Estilización De Texto Y Fondo
Propiedades De Fondo
Estilización De Texto Y Fondo
Fuentes Web
Estilización De Texto Y Fondo
Efectos De Texto: Gradientes, Recortes
Estilización De Texto Y Fondo
Tipografía Avanzada
Estilización De Texto Y Fondo
Modelo De Caja
Modelo Caja
Propiedades De Posicionamiento
Modelo Caja
Propiedad 'Display'
Modelo Caja
Elementos 'Float' Y 'Clear'
Modelo Caja
Rellenos Y Márgenes
Modelo Caja
Bordes Y Contornos
Modelo Caja
Absolute, Fixed, Sticky Y Z-index
Posicionamiento
Flexbox Para Crear Layouts Y Estructuras
Flexbox
Css Grid Para Crear Layouts Y Estructuras
Flexbox
Propiedades Del Contenedor Flex
Flexbox
Propiedades De Los Items Flex
Flexbox
Columnas Y Filas En Grid
Css Grid
Espaciado Y Alineación
Css Grid
Tipografía Responsive
Diseño Responsive
Fundamentos Del Diseño Responsive
Diseño Responsive
Imágenes Responsive
Diseño Responsive
Funciones Matemáticas
Variables Y Funciones Css
Transformaciones 2d
Transformación, Transición, Animación
Transformaciones 3d
Transformación, Transición, Animación
Animaciones
Transformación, Transición, Animación
Transiciones
Transformación, Transición, Animación
Css Para Formularios
Css Avanzado
Accesibilidad Web Con Css
Css Avanzado
Container Queries
Css Avanzado
Selectores Avanzados
Css Avanzado
Animaciones Y Transiciones
Técnicas Modernas Y Metodologías
Variables En Css
Técnicas Modernas Y Metodologías
Diseño Responsive Con Media Queries
Técnicas Modernas Y Metodologías
Metodologías De Escritura En Css
Técnicas Modernas Y Metodologías
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.