Guía práctica de layouts y posicionamiento en CSS

Esta nota sirve como referencia rápida para organizar elementos HTML, alinearlos, distribuir espacios, crear columnas, superponer elementos y adaptar interfaces a distintos tamaños de pantalla.

1. ¿Qué herramienta debo utilizar?

Necesidad	Herramienta recomendada
Alinear elementos en una fila	display: flex
Alinear elementos en una columna	display: flex; flex-direction: column
Crear filas y columnas al mismo tiempo	display: grid
Colocar un elemento respecto a su contenedor	position: absolute
Desplazar un elemento conservando su espacio original	position: relative
Fijar un elemento a la ventana del navegador	position: fixed
Mantener un elemento visible al desplazarse	position: sticky
Ocultar elementos	display: none o visibility: hidden
Centrar horizontal y verticalmente	Flexbox o Grid
Crear diseños que se adapten a la pantalla	Flexbox, Grid y media queries
Superponer elementos	position y z-index

Regla general: utiliza Flexbox para distribuir elementos en una dimensión, Grid para organizar filas y columnas, y position cuando necesites controlar la ubicación de un elemento respecto a su contexto.

---

2. Flexbox: distribuir y alinear elementos

Flexbox organiza los elementos en una dimensión: una fila o una columna.

Para activarlo, se utiliza display: flex en el contenedor padre.

.contenedor {
    display: flex;
}

Dirección: flex-direction

Propiedad	Comportamiento
row	Elementos en una fila. Es el valor predeterminado.
column	Elementos en una columna.
row-reverse	Fila en orden inverso.
column-reverse	Columna en orden inverso.

.contenedor {
    display: flex;
    flex-direction: row;
}

Alineación: justify-content

Distribuye los elementos a lo largo del eje principal.

Valor	Resultado
flex-start	Al principio.
flex-end	Al final.
center	En el centro.
space-between	Espacio entre los elementos, sin espacio extra en los extremos.
space-around	Espacio alrededor de cada elemento.
space-evenly	Espacios iguales entre elementos y extremos.

.contenedor {
    display: flex;
    justify-content: space-between;
}

Alineación: align-items

Alinea los elementos en el eje transversal.

Valor	Resultado
stretch	Estira los elementos cuando corresponde. Es el valor predeterminado.
flex-start	Al principio del eje transversal.
flex-end	Al final del eje transversal.
center	Centrado en el eje transversal.
baseline	Alinea las líneas base del texto.

.contenedor {
    display: flex;
    align-items: center;
}

Importante: los ejes dependen de flex-direction. Con row, el eje principal es horizontal; con column, es vertical.

Separación: gap

Define el espacio entre los elementos sin necesitar márgenes individuales.

.contenedor {
    display: flex;
    gap: 16px;
}

También puedes definir separaciones diferentes:

.contenedor {
    display: flex;
    row-gap: 10px;
    column-gap: 20px;
}

Permitir saltos de línea: flex-wrap

.contenedor {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

• nowrap: mantiene los elementos en una sola línea.
• wrap: permite que pasen a otra línea.
• wrap-reverse: permite saltos invirtiendo la dirección de las líneas.

Propiedades de los elementos hijos

Propiedad	Para qué sirve
flex-grow	Controla cuánto puede crecer un elemento para ocupar espacio libre.
flex-shrink	Controla cuánto puede reducirse un elemento.
flex-basis	Define su tamaño base antes de distribuir el espacio disponible.
flex	Atajo para configurar crecimiento, reducción y tamaño base.
align-self	Sobrescribe la alineación transversal de un elemento individual.

.elemento {
    flex: 1;
}

flex: 1 es una forma común de permitir que varios elementos compartan el espacio disponible. Si necesitas un ancho base concreto, puedes usar flex: 0 0 200px.

Ejemplos frecuentes de Flexbox

Centrar un elemento horizontal y verticalmente:

.contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
}

Distribuir elementos a los extremos:

.encabezado {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Colocar un elemento debajo de otro:

.formulario {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

Crear tarjetas que ocupen varias filas cuando sea necesario:

.tarjetas {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.tarjeta {
    flex: 1 1 250px;
}

---

3. CSS Grid: organizar filas y columnas

Grid permite construir layouts bidimensionales. Es especialmente útil para paneles administrativos, galerías, dashboards y cuadrículas de tarjetas.

.contenedor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

Definir columnas: grid-template-columns

.contenedor {
    display: grid;
    grid-template-columns: 200px 1fr;
}

Esto crea una primera columna de 200px y una segunda que ocupa el espacio restante.

Valor	Significado
200px 300px	Dos columnas de tamaños fijos.
1fr 1fr	Dos columnas que comparten el espacio disponible.
1fr 2fr	La segunda columna recibe el doble de la fracción disponible.
repeat(3, 1fr)	Tres columnas iguales.
repeat(4, 200px)	Cuatro columnas de 200 px.
minmax(200px, 1fr)	Columna con un mínimo de 200 px y posibilidad de crecer.

Definir filas: grid-template-rows

.contenedor {
    display: grid;
    grid-template-rows: 80px 1fr;
    min-height: 100vh;
}

En este ejemplo, la primera fila tiene 80px y la segunda puede ocupar el espacio restante de la altura disponible.

Crear una cuadrícula adaptable

.tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

Esta combinación permite que las tarjetas se distribuyan automáticamente en tantas columnas como quepan, con un ancho mínimo aproximado de 240px.

• auto-fit: ajusta la cuadrícula al espacio disponible y puede expandir las columnas restantes.
• auto-fill: conserva las pistas disponibles aunque queden espacios para columnas vacías.
• minmax(): define un tamaño mínimo y máximo.
• fr: representa una fracción del espacio disponible en Grid.

Posicionar elementos dentro de Grid

.contenedor {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.destacado {
    grid-column: span 2;
}

.alto {
    grid-row: span 2;
}

• grid-column: span 2: el elemento ocupa dos columnas.
• grid-row: span 2: el elemento ocupa dos filas.

También puedes definir líneas explícitas:

.destacado {
    grid-column: 1 / 3;
}

Esto coloca el elemento desde la línea de columna 1 hasta la línea 3, ocupando dos columnas.

Alinear elementos en Grid

.contenedor {
    display: grid;
    place-items: center;
}

place-items: center centra los elementos en ambos ejes dentro de sus celdas.

Para controlar la distribución de las pistas en el contenedor, puedes utilizar justify-content, align-content o el atajo place-content.

---

4. position: controlar la ubicación de elementos

La propiedad position define cómo se posiciona un elemento. Los valores más utilizados son static, relative, absolute, fixed y sticky.

position: static

Es el comportamiento normal de los elementos y el valor predeterminado.

.elemento {
    position: static;
}

Las propiedades top, right, bottom y left no desplazan un elemento estático.

position: relative

Mantiene el elemento dentro del flujo normal, pero permite desplazarlo desde su posición original.

.elemento {
    position: relative;
    top: 10px;
    left: 20px;
}

El elemento se desplaza visualmente, pero conserva el espacio que ocupaba originalmente.

También se utiliza con frecuencia para crear un contexto de referencia para elementos absolute.

position: absolute

Saca el elemento del flujo normal y lo posiciona respecto a su ancestro posicionado más cercano. Si no existe uno, normalmente se toma el bloque contenedor inicial.

.tarjeta {
    position: relative;
}

.etiqueta {
    position: absolute;
    top: 10px;
    right: 10px;
}

La etiqueta queda en la esquina superior derecha de la tarjeta.

Regla práctica: cuando necesites colocar un icono, una insignia o un botón encima de una tarjeta, normalmente el contenedor lleva position: relative y el elemento superpuesto lleva position: absolute.

position: fixed

Posiciona el elemento respecto al viewport, normalmente la ventana visible del navegador. No conserva su espacio en el flujo normal.

.boton-flotante {
    position: fixed;
    right: 20px;
    bottom: 20px;
}

Útil para botones flotantes, accesos rápidos o controles que deben permanecer visibles durante el desplazamiento.

Ten en cuenta que ciertas propiedades de los ancestros, como transform, pueden cambiar el bloque contenedor de un elemento fixed.

position: sticky

Permite que un elemento se comporte normalmente hasta alcanzar un umbral de desplazamiento, a partir del cual queda adherido dentro de su contenedor de desplazamiento.

.encabezado {
    position: sticky;
    top: 0;
    z-index: 10;
}

Es útil para encabezados o barras de navegación que deben mantenerse visibles al desplazarse.

Para que funcione como esperas, debes definir un umbral como top: 0 y revisar si algún ancestro limita el desplazamiento mediante overflow.

Comparación rápida

Propiedad	Conserva espacio original	Referencia habitual
static	Sí	Flujo normal
relative	Sí	Posición original del elemento
absolute	No	Ancestro posicionado más cercano
fixed	No	Viewport, salvo cambios en el bloque contenedor
sticky	Sí	Contenedor de desplazamiento y umbral

---

5. top, right, bottom y left

Estas propiedades determinan el desplazamiento de elementos posicionados.

.elemento {
    position: absolute;
    top: 0;
    right: 0;
}

El elemento se sitúa en la esquina superior derecha de su bloque contenedor.

.elemento {
    position: absolute;
    inset: 0;
}

inset: 0 equivale a establecer top, right, bottom y left en cero. Si el elemento no tiene un tamaño fijo que lo impida, puede extenderse para cubrir el área disponible de su bloque contenedor.

También puedes usar valores parciales:

.elemento {
    position: absolute;
    inset: 10px 20px;
}

Esto establece top y bottom en 10px, y left y right en 20px.

---

6. z-index: controlar qué elemento aparece encima

z-index determina el orden de apilamiento de los elementos dentro de su contexto de apilamiento.

.modal {
    position: fixed;
    z-index: 1000;
}

.menu {
    position: relative;
    z-index: 10;
}

Cuando los elementos participan en el mismo contexto de apilamiento, un valor mayor suele colocar el elemento por encima de otro con un valor menor.

Importante: un z-index muy alto no siempre permite superar otro elemento. Los contextos de apilamiento creados por propiedades como transform, opacity y otras pueden limitar la comparación entre elementos.

---

7. Tamaños y dimensiones

Propiedad	Función
width	Ancho.
height	Alto.
min-width	Ancho mínimo.
max-width	Ancho máximo.
min-height	Alto mínimo.
max-height	Alto máximo.
box-sizing	Define cómo se calculan las dimensiones.

Evitar que el padding aumente inesperadamente el tamaño

* {
    box-sizing: border-box;
}

Con border-box, el ancho y alto definidos incluyen el contenido, el padding y el borde.

Centrar un contenedor con ancho máximo

.contenedor {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding: 0 20px;
}

Esto permite que el contenido ocupe todo el ancho disponible en pantallas pequeñas, sin superar 1200px y manteniéndose centrado en pantallas grandes.

---

8. display: comportamiento de los elementos

Valor	Comportamiento
block	Ocupa una nueva línea y puede ocupar todo el ancho disponible.
inline	Se integra en el texto; width y height normalmente no controlan sus dimensiones.
inline-block	Se mantiene en línea, pero permite definir dimensiones.
flex	Crea un contenedor Flexbox.
grid	Crea un contenedor Grid.
none	El elemento no se muestra y no ocupa espacio en el layout.

.oculto {
    display: none;
}

.visible {
    display: block;
}

visibility: hidden oculta el elemento, pero normalmente conserva el espacio que ocupaba.

---

9. Márgenes, padding y separación

• margin: espacio exterior al borde del elemento.
• padding: espacio interior entre el contenido y el borde.
• gap: separación entre elementos de Flexbox o Grid.

.tarjeta {
    margin: 20px;
    padding: 16px;
}

.contenedor {
    display: flex;
    gap: 12px;
}

Puedes establecer lados específicos:

.elemento {
    margin-top: 10px;
    padding-inline: 20px;
    padding-block: 12px;
}

padding-inline controla los lados de inicio y fin de la dimensión horizontal en idiomas con escritura horizontal; padding-block controla los lados de inicio y fin de la dimensión vertical.

---

10. Unidades comunes de CSS

Unidad	Uso típico
px	Tamaños fijos en píxeles CSS.
%	Porcentaje relativo a la referencia definida por la propiedad.
rem	Relativo al tamaño de fuente del elemento raíz.
em	Relativo al tamaño de fuente del elemento actual o al contexto aplicable.
vw	Porcentaje del ancho del viewport.
vh	Porcentaje del alto del viewport.
fr	Fracción del espacio disponible en Grid.

.contenedor {
    width: 80%;
    max-width: 1200px;
    padding: 1rem;
}

.titulo {
    font-size: 2rem;
}

Para interfaces adaptables, suele ser útil combinar unidades relativas con límites mediante min-width, max-width, min(), max() o clamp().

.titulo {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
}

clamp() establece un tamaño mínimo, uno preferido y uno máximo.

---

11. Diseño responsive con media queries

Las media queries permiten cambiar el diseño según las características de la pantalla.

.contenedor {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .contenedor {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .contenedor {
        grid-template-columns: 1fr;
    }
}

En este ejemplo:

• En pantallas mayores de 768px, se muestran tres columnas.
• Hasta 768px, se muestran dos columnas.
• Hasta 480px, se muestra una columna.

Los puntos de quiebre deben elegirse según cuándo el contenido deja de verse bien, no solamente por el modelo de dispositivo.

---

12. Patrones listos para reutilizar

A. Encabezado con contenido a ambos extremos

.encabezado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

B. Tarjeta con insignia en una esquina

.tarjeta {
    position: relative;
    padding: 20px;
}

.tarjeta__insignia {
    position: absolute;
    top: 10px;
    right: 10px;
}

C. Layout con barra lateral y contenido

.layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 24px;
}

@media (max-width: 768px) {
    .layout {
        grid-template-columns: 1fr;
    }
}

minmax(0, 1fr) ayuda a permitir que la columna principal se reduzca en lugar de desbordarse por contenido ancho.

D. Centrar un modal

.fondo-modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.modal {
    width: min(100%, 500px);
}

El fondo ocupa el viewport y el modal se centra dentro de él.

E. Barra superior que permanece visible

.barra {
    position: sticky;
    top: 0;
    z-index: 100;
}

F. Galería de tarjetas adaptable

.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 16px;
}

G. Imagen que no desborda su contenedor

img {
    max-width: 100%;
    height: auto;
}

Para imágenes dentro de tarjetas con dimensiones fijas:

.imagen-tarjeta {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

object-fit: cover llena el espacio definido sin deformar la imagen, aunque puede recortar partes de ella.

---

13. Errores frecuentes

1. Usar justify-content esperando alinear en el eje vertical: depende de flex-direction; revisa cuál es el eje principal.
2. Usar position: absolute sin entender el contenedor de referencia: comprueba qué ancestro determina la posición.
3. Usar z-index sin revisar los contextos de apilamiento: el valor por sí solo no resuelve todos los problemas.
4. Usar height: 100% sin una altura definida en el contexto correspondiente: el resultado puede no ser el esperado.
5. Olvidar flex-wrap: los elementos pueden comprimirse o desbordarse en lugar de saltar a otra línea.
6. Crear columnas fijas para móviles: considera minmax(), fracciones y media queries.
7. Usar márgenes para separar todos los elementos: gap suele ser más sencillo en Flexbox y Grid.
8. Confundir display: none con visibility: hidden: el primero elimina el espacio del layout; el segundo normalmente lo conserva.

14. Referencias oficiales

• MDN: Flexbox
• MDN: CSS Grid
• MDN: position
• MDN: display
• MDN: Media queries