¿Cómo crear un diseño de cuadrícula o grids adaptable o responsivo en CSS? (sin frameworks)

Cuando hablamos de grids en CSS, solemos meter en el mismo saco conceptos que no son exactamente iguales. Y entender esta diferencia es clave para no complicarte la vida desde el minuto uno.

Un grid adaptable es aquel que se ajusta de forma fluida al espacio disponible. Normalmente se apoya en medidas relativas, como porcentajes (%), para que las columnas crezcan o se encojan según el ancho del contenedor. No necesita romperse en puntos concretos.

Un grid responsivo, en cambio, reacciona a distintos tamaños de pantalla. Aquí entran en juego media queries, cambios de estructura y, en enfoques más modernos, CSS Grid con auto-fit, auto-fill o minmax().

Diferencias entre grid adaptable y grid responsive

• Adaptable: fluye continuamente, ideal para layouts simples.
• Responsivo: cambia de comportamiento según el dispositivo.

Cuándo usar uno u otro según el proyecto

• Landings sencillas → grid adaptable
• Webs con layouts complejos → grid responsivo
• Proyectos grandes → combinación de ambos

¿Por qué crear un sistema de grids en CSS sin frameworks?

Existen una gran cantidad de frameworks CSS que ya traen sistemas de rejillas preparados. Bootstrap y Tailwind son ejemplos conocido. El problema es que muchas veces los usamos sin entender qué hay debajo.

Muchas veces optamos por crear mi propio sistema porque quería control total y evitar dependencias innecesarias. Además, cuando construyes un grid desde cero, luego puedes adaptarlo a cualquier proyecto.

Limitaciones de los frameworks CSS tradicionales

• Estructuras rígidas
• Sobrecarga de clases
• Cálculos mentales constantes (12 columnas, offsets, etc.)

Ventajas de entender y construir tu propio grid

• Código más ligero
• Mayor flexibilidad
• Aprendizaje real de CSS

Diseñando un sistema de grids sencillo en CSS

Antes de escribir una sola línea de código, hay que tomar decisiones.

Por qué usar 10 columnas en lugar de 12

La mayoría de frameworks usan 12 columnas. Yo preferí 10 columnas por una razón muy simple: evitar decimales. Trabajar con 10, 20, 30% es mucho más directo y reduce errores.

Este sistema se puede adaptar fácilmente si el proyecto lo necesita, pero para aprender y reutilizar, simplifica muchísimo el proceso.

Cómo definir el contenedor base del grid

El grid se compone de filas y columnas. Cada columna tendrá un ancho relativo y compartirá unas reglas comunes.

Diseñando nuestras rejillas

Optaremos por crear un máximo de diez columnas por filas en vez de las doce columnas que cuentan como máximo la mayoría de los frameworks CSS en la actualidad en su core como en el caso de Bootstrap simplemente por el hecho de contener medidas sin parte decimal y ayudará a simplificar el ejercicio; sin embargo, puede ser fácilmente adaptado a las necesidades que se tenga; veamos:

Grid tamaño uno (1).

Además crearemos los distintos tamaños para abordar todas las necesidades:

Grid tamaño uno (1) a diez (10).

Una de las preguntas que se nos pueden ocurrir hasta el momento es:

Grids adaptables en CSS usando porcentajes (%)

Una de las medidas más empleadas en la actualidad para la creación de sites modernos responsives son los porcentajes (%); los porcentajes son medidas relativas al tamaño de su contenedor y al ser medidas relativas permiten que los elementos que la empleen en la definición de su anchura o altura puedan ser fácilmente adaptados al tamaño que se disponga:

.e_mitad{
 width: 50%;
}

.e_mitad{
 width: 50%;
}

A su vez contaremos con diez tipos de tamaños para mostrar un máximo de 10 columnas por fila; los tamaños podrás verlos referenciados en el siguiente código CSS:

Definición de columnas del 1 al 10 en CSS

.col-1{
 width: 10%;
}
.col-2{
 width: 20%;
}
.col-3{
 width: 30%;
}
.col-4{
 width: 40%;
}
.col-5{
 width: 50%;
}
.col-6{
 width: 60%;
}
.col-7{
 width: 70%;
}
.col-8{
 width: 80%;
}
.col-9{
 width: 90%;
}
.col-10{
 width: 100%;
}

Los porcentajes se calculan respecto al tamaño del contenedor. Eso permite que el diseño se adapte automáticamente al espacio disponible. Cuando probé este enfoque por primera vez, entendí por qué el responsive no necesita ser complicado.

Alineación de columnas y modelo de caja

Con el código anterior no es suficiente para mostrar las rejillas de una forma alineada; debemos de tener un código CSS común a todas las columnas:

[class^=col]{
 float:left;
 height:auto;
 box-sizing: border-box;
}

¿Sabías que? La propiedad box-sizing con el valor border-box permite romper el modelo que tiene por defecto CSS al alterar el tamaño del contenedor al variar el grosor de los bordes y el padding; lo que es una tremenda ventaja para crear un sistema de grids o rejillas de forma fácil y sin mucho esfuerzo como vimos en esta entrada.

 

Con estas clases puedes construir combinaciones muy rápidas sin depender de ningún framework externo.

Cómo hacer responsive un grid en CSS

Una vez que tienes un grid adaptable sólido, hacerlo responsive es mucho más sencillo.

• Medidas relativas vs medidas fijas
  • Las medidas fijas limitan el diseño. Las relativas permiten que el layout respire y se adapte.
• Adaptando el grid a distintos tamaños de pantalla
  • Aquí es donde entran las media queries para reorganizar columnas cuando el espacio ya no es suficiente.

Evolución natural: grids responsivos con CSS Grid

• Cuando el proyecto crece, CSS Grid se vuelve una herramienta muy potente.
  • Cuándo dar el salto de porcentajes a CSS Grid
• Si necesitas control bidimensional (filas y columnas), CSS Grid es la mejor opción.
  • auto-fit, auto-fill y minmax() explicados fácil
• Estas funciones permiten que el navegador calcule automáticamente cuántas columnas caben según el espacio disponible, sin romper el diseño.

¿Porcentajes, CSS Grid o media queries?

No hay una única respuesta correcta.

• Comparativa práctica entre enfoques
  • Porcentajes: simples y rápidos
  • CSS Grid: layouts complejos
  • Media queries: ajustes finos
• Qué solución elegir según el tipo de layout
  • Usualmente, combinar enfoques suele dar los mejores resultados.

Errores comunes al crear grids responsivos en CSS

• Sobrecargar el sistema desde el inicio
  • Empezar con algo demasiado complejo suele generar más problemas que soluciones.
• No pensar en mobile first
  • Diseñar primero para pantallas grandes es uno de los errores más comunes.

Preguntas frecuentes sobre grids adaptables y responsivos en CSS

• ¿Se puede hacer un grid responsive sin Bootstrap?
  • Sí, y además entenderás mejor cómo funciona CSS.
• ¿Cuántas columnas debería tener un grid?
  • Las necesarias para tu proyecto. No hay un número mágico.
• ¿CSS Grid reemplaza a los grids clásicos?
  • No los reemplaza, los complementa.

Conclusión: cómo crear grids adaptables y responsivos que realmente funcionen

Crear grids adaptables o responsivos en CSS no va de copiar código, sino de entender el sistema. Cuando dominas las bases, puedes escalar desde un grid sencillo con porcentajes hasta layouts complejos con CSS Grid sin perder el control.