Renglones

Los renglones son la parte esencial del sistema de rejilla o grid. Proporcionan la estructura principal sobre la cual se distribuyen los diversos elementos.

Su uso debe darse mediante el establecimiento de una propiedad .row en una etiqueta de división (<div/>) acompañada o no de un modificador de comportamiento.

.row
Renglón normal.
.row .row-sec
Renglón con ancho fijo proporcional no responsivo.
.row .row-flex
Renglón de ancho proporcional responsivo. Se utiliza para aprovechar lo mayor posible el área de trabajo pero sin perder el espaciado a los lados.
.row .row-lock
Renglón de tamaño máximo responsivo. Evita se sobrepase cierta anchura. Generalmente se utiliza en conjunto con la propiedad anterior.

Columnas

Como su nombre lo dice, son las divisiones dentro de un renglón. Se utiliza el estándar de 12 columnas, pudiendo agrupar varias de acuerdo a la longitud deseada y dimensión responsiva buscada. Esto hace que las c clases de este tipo tengan una estructura como la siguiente:

col - dimensión columnas_agrupadas
explicado anteriormente.

Es importante que la dimensión indicada sean acompañadas de la clase .col con el fin de identificarlas como tales.

.col
Ejemplo de tamaño responsivo de columnas.

Modificadores de columna

En conjunto con las anteriores, estas pueden ser apoyadas con valores auxiliares para proporcionar otras funcionalidades. Estos modificadores auxiliares se encuentran al final de la clase, separados por un guión

col - dimensión columnas_agrupadas - auxiliar

Es importante señalar que estas propiedades dado afectan la apariencia visual, es convieniente declarar la siguiente dimensión disponible a fin de cancelar los efectos previos

-push y -push
Sirven para cambiar visualmente el orden de las columnas
-off
Offset. Proporciona un espacio adyacente al lado derecho. Aunque equivaldría a insertar una columna vacía de la misma longitud, es útil en el caso de requerir suprimir columnas intermedias.

Otras segmentaciones

Aunque la segmentación en 12 partes es la más habitual debido a que permite la segmentación en 1, 2, 3, 4 y 6 partes, el primer problema que tuve fué cuando quise dividir el espacio en más columnas. ¿Qué pasa si quería dividirlo en cinco? ¿Debería dejar una celda muerta o colocarles un espaciado lateral para que quedara equilibrado?.
Inicialmente consideré el utilizar el valor de 60 a fin de también poderlo hacer divisible entre 5; pero ya empezaba a ser un poco impráctico. Pocos recuerdan que para dividir entre 5 partes, había que agrupar cada 12 columnas. ¿Qué pasa si quería por ejemplo dividirlo en 11?

Esto me llevó a crear las divisiones n of5 y n of7 donde n es el número de columnas agrupadas, sobre una rejilla de 5 o 7 columnas; respectivamente.

Ver ejecución icon execute code

Modificadores comunes

Como se observó en los ejemplos anteriores, al definir una columna, aunque el ancho es definido de acuerdo al requerimiento del usuario, no ocurre lo mismo con la altura, pues aquellas columnas con mayor contenido tendrán mayor altura que las restantes. Esto aunado al hecho de que las columnas no contienen espaciado interno alguno. Para solventar esta situación, se han establecido dos propiedades de renglón que afectan a las columnas directamente contenidas en este.

Es importante señalar que ambas opciones pueden no ser desplegadas adecuadamente en navegadores antiguos.

.row-eq
Columnas de igual tamaño.
.row-pad
Columnas con espaciado interno