Básicamente, una cuadrícula le ahorra tiempo al reducir la cantidad de cálculos matemáticos que debe realizar al crear su archivo CSS, y al garantizar que los anchos de columna tengan proporciones decentes.
Imaginemos que está creando un sitio de 960 px de ancho que tiene un banner horizontal, una sección principal con una barra lateral izquierda y un pie de página horizontal. Con una cuadrícula de 12 columnas, puede hacer que la barra lateral tenga 3 columnas (240 px) y el área principal 9 columnas (720 px). Entonces, también querrá incluir relleno o márgenes, probablemente en incrementos de 20px.
Por ejemplo, si quisieras 20 px de relleno a la izquierda y a la derecha en la barra lateral izquierda, deberías establecer un ancho de 200 px para el div, esto más 20 px a la izquierda y 20 a la derecha totalizarían 240. Harías algo similar en el área de la derecha. Las matemáticas son bastante fáciles para esto. Si, en cambio, decidiera hacer su barra lateral de 283 px de ancho con márgenes de 13 px, las matemáticas serían menos elegantes. Por supuesto, si usa algo como el 960 Grid – 960 Grid System, puede descargar los archivos relevantes y no necesita calcular las cosas por sí mismo.
- Cómo agregar paginación a mi sitio web usando PHP
- ¿Puedo usar más de un contenedor de fluido div en un sitio web con TWB?
- ¿Es realmente requerido por ley que cada sitio web incluya una ventana emergente que declare que usan cookies?
- ¿Cómo haces que un sitio web funcione rápido?
- ¿Qué es el desarrollo web moderno?
También proporciona archivos que puede usar en el proceso de diseño, como una cuadrícula que puede agregar a un archivo de Photoshop. Esto le ayuda a asegurarse de que está diseñando algo que luego se puede codificar fácilmente. Esta foto muestra una muestra con una cuadrícula de 12 columnas superpuesta en la parte superior. A tamaño completo, cada columna tiene 60 px con 10 px en cada lado (un total de 80 px)
Como recién estás comenzando, comenzaría con la cuadrícula 960. Ese ancho funciona bien en la mayoría de las computadoras. Para un sitio de ancho fijo, generalmente me mantengo lo suficientemente pequeño como para servir a la mayoría. A medida que la tecnología avanza, los números aumentan. Hace 12 años usé un ancho máximo de 800px.
En estos días, diseñamos en porcentajes cada vez más a menudo, para crear diseños receptivos que funcionen en dispositivos de diferentes tamaños, pero le resultará más fácil comenzar con un ancho fijo, luego aprender el diseño receptivo más adelante.
