¿Es posible determinar cuántas columnas tiene una cuadrícula de diseño web?

Hay algunos problemas aquí.

1. No todo el mundo usa un sistema de cuadrícula e incluso si lo hacen, no hay garantía de que las cuadrículas sean consistentes. Tal vez su ejemplo use una cuadrícula de cuatro columnas con una columna izquierda más ancha.

2. Las cuadrículas son una herramienta. Una pauta. No significan necesariamente que esté atado a su cuadrícula el 100% del tiempo. A menudo, si las personas están diseñando utilizando un marco prefabricado que utiliza un sistema de cuadrícula establecido, se apegarán a las cuadrículas disponibles para ellos, pero eso no está garantizado. Hago mis propios sistemas de cuadrícula y, a menudo, salgo de esas cuadrículas.

3. Si el diseño se realizó inicialmente en Photoshop o similar usando una cuadrícula pero se codificó sin el uso de un marco o un sistema de cuadrícula CSS explícito, puede ser imposible saber qué sistema de cuadrícula se usó sin ver el archivo de Photoshop.

El sistema de cuadrícula más común utilizado en la web (por lo que he visto) es probablemente una cuadrícula de 12 columnas, seguida tal vez por 16 columnas. Entonces, aunque puede parecer 4 columnas, es más probable que en realidad se base en una mayor cantidad de columnas: cada columna se compone de una cantidad de columnas más pequeñas. Digamos 10 columnas divididas en 4 columnas como 4-2-2-2.

En cuanto a que es difícil ver cómo se usa la cuadrícula, viene con la práctica. Cuanto más use las cuadrículas y más vea que se usan las cuadrículas, más las reconocerá.

No fue fácil ver un sistema de cuadrícula sólido en su imagen de ejemplo, así que eché un vistazo rápido y parece que el número más pequeño de columnas que pude hacer encajar fue 21, ¡con canales más anchos que las columnas reales! ^* También vale la pena mencionar que tiene un ancho de 1200 px y no de 960 px, lo cual se puede ver fácilmente al abrirlo en un editor de imágenes.

^* Consejo rápido: Hice esto abriendo la imagen en Illustrator, dibujando un rectángulo semitransparente sobre el área de contenido y usando la función Dividir en cuadrícula y cambiando el número de columnas hasta que encajen.