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.
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:
Es importante que la dimensión indicada sean acompañadas de la clase .col con el fin de identificarlas como tales.
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
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
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.
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.