Content Grid

Hasta hace poco para lo que eran aspectos del layout de secciones y contenedores usabamos flexbox para su diseño, no obstante el uso de grid CSS dota de ciertas ventajas a la hora de crear secciones y posicionar el contenido a través de esta.

Cómo funciona

Según se observa en la imagen inferior, la sección quedará divida en tres secciones una mas externa que puede llegar a ser el ancho completo, si la sección no tiene padding y que es la que mas variara su anchura dependiendo del ancho de pantalla, ya que toma todo el espacio sobrante. Una sección de contenido que es lo que habitualmente llamamos container y es del ancho del contenido tal como lo conocemos. Por último hay una sección extra entre ambas de forma que podamos ubicar elementos por fuera del contenedor pero sin llegar a tener un ancho completo. las dimensiones de este espacio se definen a traves de una variable y es totalmente configurable.

@layer base {
    :root {
       ...   
        //Variables para definir el tamaño del content-grid y el espacio adicional (content-wide)
        --ft-container:         80rem;
        --ft-content-space:     min(var(--ft-container), 90%);
        --ft-wide-space:        min(var(--ft-space-jumbotron), 5%);
        --ft-padding-content-x: 1rem;
        --ft-padding-content-y: 1rem;
      ...
    }
}

Como podemos observar en las variables enumeradas arriba, estas cinco variables podemos usarlas para configurar el ancho del contenedor, por defecto 80rem (1280px), la segunda variable define como se calcula el espacio para distintos dispositivos a partir del –ft-container.

La tercera varible se usa para definir el tamaño del espacio extra que comentabamos a ambos lados y como queremos que se comporte de forma responsiva, por defecto esta puesto el ancho maximo de la variable –ft-space-jumbotron (entre 144px y 240px según el ancho del viewport).

Adicionalmente podemos aplicar un padding horizontal y vertical al contenido según los valores de las dos últimas variables.

Cómo su usa

Tal como se puede ver en la imagen posterior es necesario utilizar una capa extra ya que pondirmaos la clase content-grid en el container, y necesitamos esta última capa extra para posicionar el contenido en la cuadricula.

Como podemos observar en la imagen superior la clase content-grid se aplica sobre el container y hace necesario al menos añadir un div adicional para poder posicionar los elementos, este tercer div, por defecto adopta el ancho del content-area, por lo que si queremos usarlo de forma tradicional no deberemos añadir ninguna clase adicional.

Como comentábamos más arriba al principio del documento la sección tiene un padding tanto horizontal como vertical por lo que el ancho full-width no llegara hasta los bordes de la pantalla a no ser que eliminemos este padding horizontal añadiendo px-0 en la sección

Asi pues a nivel básico en esta primera versión podemos añadir clases atendiendo a la region o area que queremos que ocupe, o bien haciendo combinaciones atendiendo a las columnas.

Definiendo el ancho del contendor

de forma sencilla podemos establecer el ancho que queremos que ocupe el container y sus elementos anidados poniendo las clases content-full para el ancho completo, content-wide para que ocupe el ancho extra del contendor, o nada para que funcione al ancho definido del contendor.

Definiendo el ancho de las columnas y su posición

Como segunda opción podemos modificar el ancho y su posición con la clase content-x-y donde x e y son valores numericos que van del uno al seis tal como se puede ver en la primera imagen y definen el inicio y fin del contenedor.

Próximamente