¿Cuál es el punto de los canales en los marcos de cuadrícula CSS?

grid blueprint-css

Question

Estoy adentrándome en el desarrollo web y estoy jugando con el marco Blueprint CSS, que incluye un sistema de cuadrícula, y tengo algunas preguntas.

1. ¿Cuál es el punto de las canaletas? Seguramente no están acostumbrados a incluir espacio entre las columnas porque puedes usar la propiedad de margen de CSS para eso, ¿verdad? ¿O son los canales simplemente una forma elegante de administrar los márgenes?
2. No quiero ningún espacio entre mis columnas y me gustaría generar un diseño de cuadrícula que no incluya canales, pero todas las herramientas del generador me impiden tener canales de ancho cero. ¿Porqué es eso?
3. Parece que el generador de Blueprint CSS sugerido ya no es compatible. ¿Alguien puede sugerir un generador Blueprint CSS para modificar la cuadrícula para incluir canales de ancho cero?

Muchas gracias por tu sabiduría!

Answer 1

La motivación detrás de un sistema CSS Grid es automatizar completamente el diseño. Las canaletas son generalmente deseables porque el espacio en blanco entre columnas permite una mejor legibilidad, por lo que tiene sentido incluirlas como parte de la automatización.

La razón de ser de un Generador es aliviarlo de los cálculos ligeramente tediosos necesarios para implementarlos, pero sin los canales, tanto la matemática como la CSS no son en absoluto complicadas.

Debería ser muy sencillo hacer una cuadrícula sin canaletas sin un generador. p.ej

( column width X nº of columns ) + left margin + right margin = content width

.span-1 {width:100px}
.span-2 {width:200px}
.span-3 {width:300px}
.span-4 {width:400px}

etc...

Answer 2

Los canales no tienen absolutamente nada que ver con CSS per se. Son un concepto de diseño de la publicación impresa: están destinados a proporcionar espacios en blanco entre columnas, lo que facilita la lectura del contenido.

Las columnas sin canaletas son muy fáciles de calcular. Solo establece el mismo ancho en píxeles para cada columna.