Las cuadrículas de maquetación

1. Los principales términos

En el diseño de maquetaciones en cuadrícula con el módulo CSS Grid, se utiliza toda una serie de términos específicos que conviene definir bien. Los dos primeros elementos, el contenedor de cuadrícula y sus elementos hijos, están directamente relacionados con elementos HTML.

Al igual que en las maquetaciones flexibles, se necesita un contenedor padre para definir la cuadrícula. En inglés se denomina Grid Container; en español, contenedor de cuadrícula. Para que un elemento HTML se convierta en un contenedor de cuadrícula, basta con aplicarle la propiedad display: grid. En una misma página web puede haber tantos contenedores de cuadrícula como se necesiten. También es posible anidar unas cuadrículas dentro de otras.

En un contenedor de cuadrícula, el elemento o los elementos directos incluidos serán elementos hijos de la cuadrícula. Estos hijos se llaman Grid Items en inglés o elementos de cuadrícula en español. Es importante señalar que solo los elementos directos se consideran elementos de la cuadrícula; los nietos del contenedor de cuadrícula no forman parte de la cuadrícula y conservan, por tanto, sus propiedades del modelo de cajas.

Los parámetros estructurales de la cuadrícula no se asignan directamente a elementos HTML concretos. La cuadrícula...

1. El contenedor de la cuadrícula

Para que un elemento HTML se considere un contenedor de cuadrícula, basta con usar la propiedad y el valor display: grid. Con este valor, la cuadrícula utiliza un modo de visualización de tipo block.

Para disponer de un contexto de cuadrícula de maquetación, el segundo valor posible para la propiedad display es inline-grid. En ese caso, si hay varios contenedores que usan este valor, se mostrarán uno al lado del otro.

2. La declaración de columnas

Para declarar columnas en la cuadrícula, hay que usar la propiedad grid-template-columns. Esta propiedad acepta dos valores: el número y la anchura de las columnas. Su valor inicial es none.

El número de valores especificados determina el número de columnas y los valores definen sus respectivas anchuras. Es perfectamente posible utilizar cualquier unidad e incluso especificar varias unidades diferentes dentro de la misma cuadrícula.

He aquí la estructura HTML de este ejemplo:

<div id="contenedor">   
  <p><b>Uno</b>.Maecenas faucibus mollis interdum...</p>   
  <p><b>Dos</b>. Fusce dapibus, tellus ac cursus commodo...</p>  
  <p><b>Tres</b>. Duis mollis, est non commodo luctus...</p>   
  <p><b>Cuatro</b>.Nulla vitae elit libero, a pharetra augue...</p> 
  <p><b>Cinco</b>.Cras Parturient Dolor Magna. Vestibulum id ligula...</p> 
  <p><b>Seis</b>. Vestibulum id ligula porta felis euismod semper...</p> 
</div> 

Esta es la regla CSS aplicada a este contenedor:

#contenedor {   
  /* Cuadrícula de maquetación */   
  display: grid;   
  grid-template-columns: 60% 40%;   
  /* Formato */   
  width: 800px;   
  border: 1px solid #000;   
} 

La propiedad grid-template-columns tiene dos valores, por lo que habrá dos columnas. El primer valor indica una anchura relativa del 60 % de la anchura del contenedor de la cuadrícula padre y el segundo valor usa el 40 % de la anchura de dicho contenedor.

He aquí...

1. Las posiciones de los elementos hijos en la cuadrícula

Conviene saber ahora cómo posicionan los navegadores los elementos hijos en una maquetación en cuadrícula. Pues bien: son algoritmos integrados en los propios navegadores los que colocan automáticamente los elementos hijos dentro del contenedor de cuadrícula padre.

He aquí la estructura HTML de un ejemplo sencillo:

<div id="contenedor">   
 <p>Uno</p>   
  <p>Dos</p>   
  <p>Tres</p>   
</div> 

Estas son las reglas CSS aplicadas al contenedor de cuadrícula padre y a los párrafos hijos:

#contenedor {   
  /* Cuadrícula de maquetación */   
  display: grid;   
  grid-template-columns: repeat(3,100px);   
  /* Formato */   
  width: 450px;   
  border: 1px solid #000;   
}   
p {   
  margin: 0;   
} 

Se indica explícitamente que hay tres columnas de 100 píxeles de anchura: grid-template-columns: repeat(3,100px)

Esta es la pantalla resultante:

El contenedor padre tiene 450 píxeles de anchura, por lo que puede contener perfectamente tres elementos hijos de 100 píxeles de anchura cada uno.

Ahora se añade un cuarto elemento hijo: <p>Cuatro</p>; queda espacio, 150 píxeles para ser precisos, para colocar este nuevo elemento en la misma fila. Pero la pantalla que obtenemos es la siguiente:

El nuevo elemento hijo se sitúa en una nueva fila porque se ha indicado explícitamente que solo debe haber tres columnas. El navegador respeta esta elección y muestra el elemento adicional en una fila nueva.

Si se quiere cancelar este posicionamiento predeterminado, debe usar la propiedad grid-auto-flow. Esta propiedad acepta los siguientes valores:

He aquí la regla CSS modificada aplicada al contenedor:

#contenedor {   
  /* Cuadrícula de maquetación...

1. Las visualizaciones responsivas

Para este ejemplo de aplicación de diseño con el módulo Grid, la página se creará con una cuadrícula de una columna en teléfonos inteligentes, de dos columnas en tabletas y de tres columnas en pantallas de ordenador.

He aquí la visualización obtenida en los teléfonos inteligentes, con una cuadrícula de una sola columna: 

Esta es la visualización obtenida en una tableta, con una cuadrícula de dos columnas:

Y esta, la visualización obtenida en una pantalla grande, con una cuadrícula de tres columnas:

2. La estructura HTML de la cuadrícula

He aquí la estructura HTML de este ejemplo:

<div id="contenedor">   
 <header>  
    <h1>Justo Mollis Ornare Pellentesque Inceptos</h1>   
  </header>   
  <section>   
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus...</p> 
  </section>   
  <article>   
    <h2>Duis mollis, est non commodo luctus...</h2>   
    <p>Vestibulum id ligula porta felis euismod semper...</p>   
    <p>Maecenas faucibus mollis interdum. Cum sociis natoque...</p> 
  </article>   
  <aside>   
    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia...</p> 
  </aside>   
  <footer>   
    <p>Amet Tellus Vulputate Ligula Fusce</p>   
  </footer>   
</div> 

El contenedor de cuadrícula es el contenedor <div id="contenedor">. Dentro de él aparece, en primer lugar, una cabecera con el elemento <header>.

A continuación, el elemento <section> se muestra debajo de la cabecera en teléfonos inteligentes y a la izquierda en tabletas y pantallas grandes.

En cuanto al elemento <article>, se mostrará en el centro vertical en los teléfonos inteligentes y en el centro horizontal en tabletas y pantallas grandes....