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. Un asección de contenido que es loq ue 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.