Capitulo 6. Grid Layout

6.1. EL DISEÑO WEB ESTÁ AQUÍ

La aparición del diseño de cuadrícula no fue como la de otras características de CSS, como flexbox. A medida que los navegadores implementaron las primeras versiones de flexbox, lo hicieron disponible mediante el uso de prefijos de proveedores. La intención original de los prefijos de proveedores era permitir a los desarrolladores experimentar con la tecnología antes de usarla en producción. Sin embargo, no es así como se desarrollaron las cosas.

Se necesitaron varios años para desarrollar la especificación de flexbox hasta un punto estable. Mientras tanto, los desarrolladores se entusiasmaron con la nueva función y comenzaron a usarla, con prefijos y todo. Luego, a medida que evolucionó la especificación, los navegadores actualizaron sus implementaciones. Los desarrolladores tuvieron que actualizar su código para que coincida, pero también tuvieron que dejar el código anterior en su lugar para admitir también los navegadores más antiguos. Fue una introducción aproximada de flexbox al mundo.

Para evitar que esto vuelva a suceder, los proveedores de navegadores abordaron el diseño de grid de manera diferente. En lugar de implementarlo con prefijos de proveedor, lo implementaron como una característica que el usuario debe optar explícitamente. Los desarrolladores podían experimentar con él para aprender cómo funcionaba y para informar errores, pero en lo que respecta al usuario medio, la compatibilidad con el navegador era prácticamente nula. Al mismo tiempo, los navegadores habían implementado casi por completo el diseño de cuadrícula.

En lugar de una implementación larga y prolongada de desarrollo y depuración, todos los navegadores principales pudieron activar una implementación de grid con todas las funciones, en su mayoría depurada, prácticamente de la noche a la mañana. En marzo de 2017, comenzaron a accionar el interruptor. En el lapso de tres semanas, Firefox, Chrome, Opera y Safari lanzaron actualizaciones para sus navegadores, habilitando el diseño de cuadrícula. Microsoft Edge hizo lo mismo en junio de 2017. En el lapso de tres meses, el soporte del navegador creció del 0% a casi el 70% de los usuarios. Esto no tiene precedentes en el mundo de CSS.

El nivel 1 de la especificación de cuadrícula es estable y todos los navegadores modernos ahora se ajustan a él. Esto significa que el diseño de la cuadrícula está listo para su uso en producción ahora, siempre que haga un poco de trabajo para garantizar un diseño alternativo razonable. Cubriré esto cerca del final del capítulo.

Microsoft implementó una versión anterior del diseño de cuadrícula utilizando prefijos de proveedores. Esto significa que IE10 e IE11 tienen soporte parcial para el diseño de cuadrícula usando un prefijo -ms-. Para admitir estos navegadores, utilice Autoprefixer como se explica en el capítulo 5 (consulte la barra lateral "Prefijos de proveedores").

Antes de que los navegadores admitieran el diseño de cuadrícula de forma predeterminada, permitían a los desarrolladores habilitarlo. Aunque la cuadrícula ahora está habilitada, es importante saber cómo acceder a otras funciones experimentales si desea aprenderlas en el futuro.

6.1.1. Construyendo una cuadrícula básica

Ahora, creemos un diseño de cuadrícula simple para asegurarnos de que funcione en su navegador. Colocará seis cajas en tres columnas como se muestra en la figura 6.2. El marcado para esta cuadrícula se muestra en el listado 6.1.

Cree una nueva página y vincúlela a una nueva hoja de estilo. Agregue el código en la siguiente lista a su página. En el código, agregué las letras de la a a la f para que sea evidente dónde termina cada elemento en la cuadrícula.

          
  <div class="grid">             1
    <div class="a">a</div> 2
    <div class="b">b</div> 2
    <div class="c">c</div> 2
    <div class="d">d</div> 2
    <div class="e">e</div> 2
    <div class="f">f</div> 2
  </div>
          
          Listado 6.1. Una cuadrícula con seis elementos.
        

1. El contenedor de cuadricula
2. Los hijos del contenedor se convierten en elementos de la cuadrícula.

Al igual que con flexbox, el diseño de la cuadrícula se aplica a dos niveles de la jerarquía DOM. Un elemento con display: grid se convierte en un grid container. A continuación, sus elementos secundarios se convierten en grid items.

A continuación, aplicará algunas propiedades nuevas para definir los detalles de la cuadrícula. Agregue los estilos de este listado a su hoja de estilo.

          
.grid {
  display: grid;                           1
  grid-template-columns: 1fr 1fr 1fr;      2
  grid-template-rows: 1fr 1fr;             3
  grid-gap: 0.5em;                         4
}
  
.grid > * {
  background-color: darkgray;
  color: white;
  padding: 2em;
  border-radius: 0.5em;
}
          
          Listado 6.2. Trazar una cuadrícula básica
        

1. Hace que el elemento sea un contenedor de cuadrícula
2. Define tres columnas de igual ancho
3. Define dos filas de igual altura
4. Aplica un medianil entre cada celda de la cuadrícula

Si su navegador admite el diseño de cuadrícula, este código representará seis cuadros del mismo tamaño en tres columnas (figura 6.2). Aquí están sucediendo varias cosas nuevas. Echemos un vistazo más de cerca.

Primero, ha aplicado display: grid para definir un grid-container. El contenedor se comporta como un elemento de visualización en block, llenando el 100% del ancho disponible. Aunque no se muestra en esta lista, también puede usar el valor inline-grid; en cuyo caso, el elemento fluirá en línea y solo será tan ancho como sea necesario para contener a sus hijos. Lo más probable es que no utilice inline-grid con tanta frecuencia.

Luego vienen las nuevas propiedades: grid-template-column y grid-template-rows. Estos definen el tamaño de cada una de las columnas y filas de la cuadrícula. Este ejemplo usa una nueva unidad, fr, que representa la unidad de fracción de cada columna (o fila). Esta unidad se comporta esencialmente igual que el factor de flex-grow en flexbox. La declaración grid-template-column: 1fr 1fr 1fr declara tres columnas con el mismo tamaño.

No es necesario que utilice unidades de fracción para cada columna o fila. También puede utilizar otras medidas como px, em o porcentaje. O puedes mezclar y combinar. Por ejemplo, grid-template-column: 300px 1fr definiría una columna de tamaño fijo de 300px seguida de una segunda columna que crecerá para llenar el resto del espacio disponible. Una columna de 2fr tendría el doble de ancho que una columna de 1fr.

Finalmente, la propiedad grid-gap define la cantidad de espacio que se agregará al canal entre cada celda de la cuadrícula. Opcionalmente, puede proporcionar dos valores para especificar el espaciado vertical y horizontal individualmente (por ejemplo, grid-gap: 0.5em 1em).

Te animo a experimentar con estos valores para ver cómo afectan el diseño final. Agregue nuevas columnas o cambie sus anchos. Agregue o elimine elementos de la cuadrícula. Continúe experimentando con los otros diseños a lo largo de este capítulo. Esta será la mejor manera de dominar las cosas.

6.2. ANATOMÍA DE UN GRID

Es importante comprender las distintas partes de una cuadrícula. Ya mencioné grid containers y grid items, que son los elementos que componen la cuadrícula. En la figura 6.3 se ilustran otros cuatro términos importantes que debe conocer.

• Grid line: Estos forman la estructura de la cuadrícula. Una línea de cuadrícula puede ser vertical u horizontal y estar a ambos lados de una fila o columna. El grid-gap, si se define, se encuentra sobre las líneas de la cuadrícula.
• Grid track: Un grid track es el espacio entre dos líneas de cuadrícula adyacentes. Una cuadrícula tiene pistas horizontales (filas) y pistas verticales (columnas).
• Grid cell: Un solo espacio en la cuadrícula, donde se superponen un grid track de cuadrícula horizontal y un grid track de cuadrícula vertical.
• Grid area: Un área rectangular en la cuadrícula formada por una o más grid cells. El área está entre dos líneas de cuadrícula verticales y dos líneas de cuadrícula horizontales.

Hará referencia a estas partes de la cuadrícula cuando cree diseños de cuadrícula. Por ejemplo, al declarar grid-template-columns: 1fr 1fr 1fr define tres grid tracks verticales de igual ancho. También define cuatro grid lines verticales: una en el borde izquierdo de la cuadrícula, dos más entre cada grid track y una más a lo largo del borde derecho.

En el capítulo anterior, creaste una página usando flexbox. Echemos otro vistazo a ese diseño y consideremos cómo podría implementarlo utilizando la cuadrícula. El diseño se muestra en la figura 6.4. Agregué líneas discontinuas para indicar la ubicación de cada celda de la cuadrícula. Observe que algunas de las secciones abarcan varias celdas, llenando un grid area más grande.

Esta cuadrícula tiene dos columnas y cuatro filas. Las dos pistas superiores de la cuadrícula horizontal están dedicadas al título de la página (Ink) y al menú de navegación principal. El área principal llena las dos celdas restantes en la primera pista vertical, y los dos mosaicos de la barra lateral se colocan en una de las celdas restantes en la segunda pista vertical.

Su diseño no necesita llenar todas las celdas de la cuadrícula. Deje una celda vacía donde desee agregar espacios en blanco.

Es importante tener en cuenta que el uso de la cuadrícula aquí no hace que flexbox sea inútil. A medida que avanzamos en la página, verá que flexbox sigue siendo una parte importante del diseño. Señalaré lugares en la página donde tiene sentido usar flexbox.

Cuando construyó esta página usando flexbox, tuvo que anidar los elementos de cierta manera. Usó un flexbox para definir columnas y anidó otra flexbox dentro de ella para definir filas (listado 5.1). Para crear este diseño con cuadrícula se requiere una estructura HTML diferente: deberá acoplar el HTML. Cada elemento que coloque en la cuadrícula debe ser un elemento secundario del contenedor de la cuadrícula principal. El nuevo marcado se muestra a continuación. Cree una nueva página (o modifique su página del capítulo 5) para que coincida con esta lista.

          
<body>
  <div class="container">                     1
    <header>                                  2
      <h1 class="page-heading">Ink</h1>
    </header>
  
    <nav>                      2
      <ul class="site-nav">
        <li><a href="/">Home</a></li>
        <li><a href="/features">Features</a></li>
        <li><a href="/pricing">Pricing</a></li>
        <li><a href="/support">Support</a></li>
        <li class="nav-right">
          <a href="/about">About</a>
        </li>
      </ul>
    </nav>
  
    <main class="main tile">                 3
      <h1>Team collaboration done right</h1>
      <p>Thousands of teams from all over the
        world turn to <b>Ink</b> to communicate
        and get things done.</p>
    </main>
  
    <div class="sidebar-top tile">       3
      <form class="login-form">
        <h3>Login</h3>
        <p>
          lt;label for="username">Username</label>
          <input id="username" type="text"
            name="username"/>
        </p>
        <p>
          <label for="password">Password</label>
          <input id="password" type="password"
            name="password"/>
        </p>
        <button type="submit">Login</button>
      </form>
    </div>
  
    <div class="sidebar-bottom tile centered">    3
      <small>Starting at</small>
      <div class="cost">
        <span class="cost-currency">$</span>
        <span class="cost-dollars">20</span>
        <span class="cost-cents">.00</span>
      </div>
      <a class="cta-button" href="/pricing">
        Sign up
      </a>
    </div>
  </div>
</body>
          
          Listado 6.3. Estructura HTML para un diseño de cuadrícula
        

1. El "contenedor" se convierte en su contenedor de rejilla.
2. Cada elemento de la cuadrícula debe ser un elemento secundario del contenedor de la cuadrícula.
3. Cada elemento de la cuadrícula debe ser un elemento secundario del contenedor de la cuadrícula.

Esta versión de la página ha colocado cada sección de la página como un elemento de cuadrícula: el encabezado, el menú (nav), la principal y las dos barras laterales. También agregué la clase de tile a la barra principal y a las dos barras laterales, ya que esta clase proporciona el color de fondo blanco y el relleno que estos elementos tienen en común.

Apliquemos un diseño de cuadrícula a la página y coloquemos cada sección en su lugar. Por un momento, introduciremos muchos estilos de la versión del capítulo 5, pero primero veamos una forma general de la página. (Encuentro que generalmente es más fácil construir una página desde afuera hacia adentro). Después de construir la cuadrícula básica, la página aparecerá como en la figura 6.5.

Cree una hoja de estilo vacía y vincúlela desde la página. Agregue este listado a la nueva hoja de estilo. Este código presenta algunos conceptos nuevos, que le explicaré en un momento.

          
:root {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}

body {
  background-color: #709b90;
  font-family: Helvetica, Arial, sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 2fr 1fr;               1
  grid-template-rows: repeat(4, auto);          2
  grid-gap: 1.5em;
  max-width: 1080px;
  margin: 0 auto;
}

header,
nav {
  grid-column: 1 / 3;                           3
  grid-row: span 1;                             4
}

.main {
  grid-column: 1 / 2;                           5
  grid-row: 3 / 5;                              5
}

.sidebar-top {
  grid-column: 2 / 3;                           5
  grid-row: 3 / 4;                              5
}

.sidebar-bottom {
  grid-column: 2 / 3;                           5
  grid-row: 4 / 5;                              5
}

.tile {
  padding: 1.5em;
  background-color: #fff;
}

.tile > :first-child {
  margin-top: 0;
}
.tile * + * {
  margin-top: 1.5em;
}
          
          Listado 6.4. Aplicar un diseño de página de nivel superior usando cuadrícula
        

1. Define dos pistas de cuadrícula verticales
2. Define cuatro pistas de cuadrícula horizontales de tamaño automático
3. Se extiende desde la línea de cuadrícula vertical 1 hasta la línea de cuadrícula 3
4. Abarca exactamente una pista de cuadrícula horizontal
5. Coloca otros elementos de la cuadrícula entre varias líneas de cuadrícula

Esta lista proporciona una serie de conceptos nuevos. Vamos a tomarlos uno a la vez.

Establece el contenedor de la cuadrícula y define sus pistas de cuadrícula utilizando grid-template-columns y grid-template-rows. Las columnas se definen utilizando las unidades de fracción 2fr y 1fr, por lo que la primera columna crecerá el doble que la segunda. Las filas usan algo nuevo, la función repeat(). Esta función proporciona una forma abreviada de declarar varias pistas de cuadrícula.

La declaración, grid-template-rows: repeat (4, auto); define cuatro tracks de cuadrícula horizontales de altura automática. Es equivalente a grid-template-rows: auto auto auto auto. El tamaño de la pista de auto aumentará según sea necesario para el tamaño de su contenido.

También puede definir un patrón repetido con la notación repeat(). Por ejemplo, repeat (3, 2fr 1fr) define seis pistas de cuadrícula repitiendo el patrón tres veces, lo que da como resultado 2fr 1fr 2fr 1fr 2fr 1fr. La figura 6.6 ilustra las columnas resultantes.

O puede usar repeat() como parte de un patrón más largo. grid-template-column: 1fr repeat (3, 3fr) 1fr, por ejemplo, define una columna 1fr seguida de tres columnas 3fr y luego otra columna 1fr (o 1fr 3fr 3fr 3fr 1fr). Como puede ver, la taquigrafía es un poco complicada de analizar visualmente, por lo que la taquigrafía repeat() es útil.

6.2.1. Numeración de líneas de cuadrícula

Con las pistas de la cuadrícula definidas, la siguiente parte del código coloca cada elemento de la cuadrícula en una ubicación específica en la cuadrícula. El navegador asigna números a cada línea de la cuadrícula en una cuadrícula, como se muestra en la figura 6.7. El CSS usa estos números para indicar dónde debe colocarse cada elemento.

Puede utilizar los números de la cuadrícula para indicar dónde colocar cada elemento de la cuadrícula utilizando las propiedades de grid-column y grid-row. Si desea que un elemento de la cuadrícula se extienda desde la línea 1 de la cuadrícula hasta la línea 3 de la cuadrícula, aplicará grid-column: 1 / 3 al elemento. O bien, puede aplicar grid-row: 3 / 5 a un elemento de cuadrícula para que se extienda desde la línea de cuadrícula horizontal 3 hasta la línea de cuadrícula 5. Estas dos propiedades juntas especifican el área de cuadrícula que desea para un elemento.

En su página, varios elementos de la cuadrícula se colocan de esta manera:

          
.main {
  grid-column: 1 / 2;
  grid-row: 3 / 5;
}
  
.sidebar-top {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}
  
.sidebar-bottom {
  grid-column: 2 / 3;
  grid-row: 4 / 5;
}
          
        

Este código coloca el principal en la primera columna (entre las líneas de cuadrícula 1 y 2), abarcando la tercera y cuarta filas (entre las líneas de cuadrícula 3 y 5). Coloca cada mosaico de la barra lateral en la columna derecha (entre las líneas de cuadrícula 2 y 3), apilados uno encima del otro en la tercera y cuarta filas.

Estas propiedades son de hecho propiedades abreviadas: grid-column es la abreviatura de grid-column-start y grid-column-end; grid-row es la abreviatura de grid-row-start y grid-row-end. La barra diagonal solo es necesaria en la versión abreviada para separar los dos valores. El espacio antes y después de la barra es opcional.

El conjunto de reglas que coloca el header y el nav en la parte superior de la página es un poco diferente. Aquí utilicé el mismo conjunto de reglas para orientar los anuncios a ambos:

          
header,
nav {
  grid-column: 1 / 3;
  grid-row: span 1;
}
          
        

Este ejemplo usa grid-column como viste anteriormente, haciendo que el elemento de cuadrícula abarque todo el ancho de la cuadrícula. También puede especificar grid-row y grid-column usando una palabra clave especial, span (usada en este ejemplo para grid-row). Esto le dice al navegador que el elemento abarcará una pista de cuadrícula. No especifiqué una fila explícita con la que comenzar o terminar, por lo que el elemento de la cuadrícula se colocará automáticamente utilizando el algoritmo de ubicación de elementos de la cuadrícula. El algoritmo de ubicación colocará los elementos para llenar el primer espacio disponible en la cuadrícula donde encajen; en este caso, la primera y segunda filas. Veremos más de cerca la colocación automática más adelante en este capítulo.

6.2.2. Trabajando junto con flexbox

Después de aprender sobre grid, los desarrolladores a menudo preguntan sobre flexbox. Específicamente, ¿compiten estos dos métodos de diseño? La respuesta es no; son complementarios. Fueron desarrollados en gran parte en conjunto. Aunque existe cierta superposición en lo que cada uno puede lograr, cada uno brilla en diferentes escenarios. La elección entre flexbox y grid para una pieza de un diseño dependerá de sus necesidades particulares. Los dos métodos de diseño tienen dos distinciones importantes:

• Flexbox es básicamente unidimensional, mientras que grid es bidimensional.
• Flexbox funciona desde el contenido hacia afuera, mientras que grid funciona desde el diseño hacia adentro.

Debido a que flexbox es unidimensional, es ideal para filas (o columnas) de elementos similares. Es compatible con el ajuste de líneas mediante flex-wrap, pero no hay forma de alinear los elementos de una fila con los de la siguiente. La cuadrícula, por el contrario, es bidimensional. Está diseñado para usarse en situaciones en las que desee alinear elementos de una pista con los de otra. Esta distinción se ilustra en la figura 6.8.

La segunda gran distinción, según lo expresado por Rachel Andrew, miembro del CSS WG, es que flexbox funciona desde el contenido hacia afuera, mientras que una cuadrícula funciona desde el diseño hacia adentro. Flexbox le permite organizar una serie de elementos en una fila o columna, pero sus tamaños no No es necesario establecerlo explícitamente. En cambio, el contenido determina cuánto espacio necesita cada elemento.

Sin embargo, con la cuadrícula, primero y más importante está describiendo un diseño y luego colocando elementos en esa estructura. Si bien el contenido de cada elemento de la cuadrícula tiene la capacidad de influir en el tamaño de su track de cuadrícula, esto afectará el tamaño de toda el track y, por lo tanto, el tamaño de otros elementos de la cuadrícula en el track.

Hemos posicionado las regiones principales de la página utilizando una cuadrícula porque queremos que el contenido se adhiera a la cuadrícula tal como está definida. Pero para algunos otros elementos de la página, como el menú de navegación, podemos permitir que el contenido tenga una mayor influencia en el resultado; es decir, los elementos con más texto pueden ser más anchos y los elementos con menos texto pueden ser más estrechos. También es un diseño horizontal (unidimensional). Por estas razones, flexbox es una solución más apropiada para estos artículos. Diseñemos estos elementos usando flexbox para terminar la página.

La figura 6.9 muestra la página con un menú de navegación superior que consta de una lista de enlaces alineados horizontalmente. También usaremos flexbox para el número de precio estilizado en la parte inferior derecha. Después de agregar estos y algunos otros estilos, llegaremos al aspecto final de la página.

Los estilos para hacer esto son idénticos a los de los estilos en el capítulo 5, menos el diseño de alto nivel que ha aplicado usando la cuadrícula (lista 6.4). Los he repetido en la siguiente lista. Agregue esto a su hoja de estilo.

          
.page-heading {
  margin: 0;
}

.site-nav {
  display: flex;                           1
  margin: 0;
  padding: .5em;
  background-color: #5f4b44;
  list-style-type: none;
  border-radius: .2em;
}

.site-nav > li {
  margin-top: 0;
}

.site-nav > li > a {
  display: block;
  padding: .5em 1em;
  background-color: #cc6b5a;
  color: white;
  text-decoration: none;
}

.site-nav > li + li {
  margin-left: 1.5em;
}

.site-nav > .nav-right {
  margin-left: auto;
}

.login-form h3 {
  margin: 0;
  font-size: .9em;
  font-weight: bold;
  text-align: right;
  text-transform: uppercase;
}

.login-form input:not([type=checkbox]):not([type=radio]) {
  display: block;
  margin-top: 0;
  width: 100%;
}

.login-form button {
  margin-top: 1em;
  border: 1px solid #cc6b5a;
  background-color: white;
  padding: .5em 1em;
  cursor: pointer;
}

.centered {
  text-align: center;
}

.cost {
  display: flex;                         2
  justify-content: center;
  align-items: center;
  line-height: .7;
}

.cost > span {
  margin-top: 0;
}

.cost-currency {
  font-size: 2rem;
}
.cost-dollars {
  font-size: 4rem;
}
.cost-cents {
  font-size: 1.5rem;
  align-self: flex-start;
}

.cta-button {
  display: block;
  background-color: #cc6b5a;
  color: white;
  padding: .5em 1em;
  text-decoration: none;
}
          
          Listado 6.5. Estilo restante para la página
        

1. El menú de flexbox
2. "Cost" estilizado con flexbox

Cuando su diseño requiera una alineación de elementos en dos dimensiones, use la cuadrícula. Cuando solo le preocupe un flujo unidireccional, use flexbox. En la práctica, esto a menudo (pero no siempre) significará que la cuadrícula tiene más sentido para un diseño de alto nivel de la página, y flexbox tiene más sentido para ciertos elementos dentro de cada área de la cuadrícula. A medida que continúe trabajando con ambos, comenzará a tener una idea de cuál es apropiado en varios casos.

6.3. SINTAXIS ALTERNATIVAS

Hay otras dos sintaxis alternativas para diseñar elementos de cuadrícula: líneas de cuadrícula con nombre y áreas de cuadrícula con nombre. Elegir entre ellos es una cuestión de preferencia. En algunos diseños, una sintaxis puede ser más fácil de leer y comprender que las demás. Veamos ambos.

6.3.1. Nombrar líneas de cuadrícula

A veces puede ser un poco complicado realizar un seguimiento de todas las líneas de cuadrícula numeradas, especialmente cuando se trabaja con muchas pistas de cuadrícula. Para hacerlo más fácil, puede nombrar las líneas de la cuadrícula y usar los nombres en lugar de números. Al declarar pistas de cuadrícula, coloque un nombre entre corchetes para nombrar una línea de cuadrícula entre dos pistas:

          
grid-template-columns: [start] 2fr [center] 1fr [end];
          
        

Esta declaración define una cuadrícula de dos columnas con tres líneas de cuadrícula verticales denominadas inicio, centro y final. Luego, puede hacer referencia a estos nombres en lugar de a los números cuando coloque elementos de cuadrícula en su cuadrícula. Por ejemplo:

          
grid-column: start / center;
          
        

Esta declaración coloca un elemento de cuadrícula de modo que se extienda desde la línea de cuadrícula 1 (inicio) hasta la línea de cuadrícula 2 (centro). También puede proporcionar varios nombres para la misma línea de cuadrícula como se muestra en este ejemplo (agregué saltos de línea para facilitar la legibilidad):

          
grid-template-columns:  [left-start] 2fr
                        [left-end right-start] 1fr
                        [right-end];
          
        

En esta declaración, la línea 2 de la cuadrícula se denomina tanto a la izquierda como a la derecha. A continuación, puede utilizar cualquiera de estos nombres al colocar un elemento. Esta declaración también permite otro truco aquí: al nombrar las líneas de la cuadrícula left-start y left-end, ha definido un área llamada izquierda que se extiende entre ellas. Los sufijos -start y -end actúan como una especie de palabra clave que define un área intermedia. Si aplica grid-column: left a un elemento, se extenderá desde left-start hasta left-end.

El CSS de la siguiente lista utiliza líneas de cuadrícula con nombre para diseñar la página. Esto produce el mismo resultado que el enfoque del listado 6.4. Actualice esta parte de su hoja de estilo para que coincida.

          
.container {
  display: grid;
  grid-template-columns:[left-start] 2fr               1
                        [left-end right-start] 1fr     1
                        [right-end];                   1
  grid-template-rows: repeat(4, [row] auto);            2
  grid-gap: 1.5em;
  max-width: 1080px;
  margin: 0 auto;
}

header,
nav {
  grid-column: left-start / right-end;
  grid-row: span 1;
}

.main {
  grid-column: left;                                    3
  grid-row: row 3 / span 2;                             4
}

.sidebar-top {
  grid-column: right;                                   5
  grid-row: 3 / 4;
}

.sidebar-bottom {
  grid-column: right;                                   5
  grid-row: 4 / 5;
}
          
          Listado 6.6. Diseño de cuadrícula usando líneas de cuadrícula con nombre
        

1. Nombra cada línea de cuadrícula vertical
2. Nombra las líneas horizontales de la cuadrícula "fila"
3. Tramos desde el principio de la izquierda hasta el final de la izquierda
4. Coloca el elemento comenzando en la línea de cuadrícula de la tercera fila y abarcando dos pistas de cuadrícula
5. Tramos desde el principio derecho al final derecho

Este ejemplo coloca cada elemento en las columnas de la cuadrícula apropiadas usando las líneas de cuadrícula nombradas. También declara una línea de cuadrícula horizontal con nombre dentro de la función repeat(). Hacer esto nombra cada fila de línea de cuadrícula horizontal (excepto la última). Esto puede parecer peculiar, pero es perfectamente válido usar el mismo nombre repetidamente. Luego coloque el elemento principal de modo que comience en la fila 3 (la tercera línea de la cuadrícula llamada fila) y se extienda por dos pistas de la cuadrícula desde allí.

Puede utilizar líneas de cuadrícula con nombre de innumerables formas. La forma en que los usa puede variar de una cuadrícula a la siguiente, dependiendo de la estructura particular de cada cuadrícula. Un posible ejemplo se muestra en la figura 6.10.

Este escenario presenta un patrón repetido de dos columnas de la cuadrícula, nombrando la línea de la cuadrícula antes de cada par de pistas de la cuadrícula (grid-template-column: repeat (3, [col] 1fr 1fr)). Luego, puede usar líneas de cuadrícula con nombre para colocar un elemento en el segundo conjunto de columnas (grid-column: col 2 / span 2).

6.3.2. Nombrar áreas de la cuadrícula

Otro enfoque que puede tomar es nombrar las áreas de la cuadrícula. En lugar de contar o nombrar las líneas de la cuadrícula, puede usar estas áreas con nombre para colocar elementos en la cuadrícula. Esto se hace con la propiedad grid-template en el contenedor de cuadrícula y una propiedad grid-area en los elementos de cuadrícula.

El código del listado 6.7 muestra un ejemplo de esto. Nuevamente, este código produce exactamente el mismo resultado que el diseño anterior (listados 6.4 y 6.6). Es una sintaxis alternativa que se puede utilizar en su lugar. Actualice su hoja de estilo para que coincida con estos estilos.

          
.container {
  display: grid;
  grid-template-areas:"title title"          1
                      "nav   nav"            1
                      "main  aside1"         1
                      "main  aside2";        1
  grid-template-columns: 2fr 1fr;             2
  grid-template-rows: repeat(4, auto);        2
  grid-gap: 1.5em;
  max-width: 1080px;
  margin: 0 auto;
}

header {
  grid-area: title;                           3
}

nav {
  grid-area: nav;                             3
}

.main {
  grid-area: main;                            3
}

.sidebar-top {
  grid-area: aside1;                          3
}

.sidebar-bottom {
  grid-area: aside2;                          3
}
          
          Listado 6.7. Usar áreas de cuadrícula con nombre
        

1. Asigna cada celda de la cuadrícula a un área de cuadrícula con nombre
2. Define los tamaños de las pistas de la cuadrícula como antes
3. Coloca cada elemento de la cuadrícula en un área de cuadrícula con nombre

La propiedad grid-template-areas le permite dibujar una representación visual de la cuadrícula directamente en su CSS, usando una especie de sintaxis de “arte ASCII”. Esta declaración proporciona una serie de cadenas entre comillas, cada una de las cuales representa una fila de la cuadrícula, con espacios en blanco entre cada columna.

En este ejemplo, la primera fila se asigna por completo al title del área de la cuadrícula. La segunda fila está asignada a nav. La columna izquierda de las dos filas siguientes se asigna a main, y cada mosaico de la barra lateral se asigna a aside1 y aside2. Luego, cada elemento de la cuadrícula se coloca en estas áreas nombradas utilizando la propiedad de grid-area.

Cada área de la cuadrícula nombrada debe formar un rectángulo. No puede crear formas más complejas como una L o una U.

También puede dejar una celda vacía usando un punto como nombre. Por ejemplo, este código define cuatro áreas de cuadrícula que rodean una celda de cuadrícula vacía en el medio:

          
grid-template-areas:  "top  top    right"
                      "left .      right"
                      "left bottom bottom";
          
        

Cuando cree una cuadrícula, use la sintaxis que le resulte más cómoda, dado el diseño: líneas de cuadrícula numeradas, líneas de cuadrícula con nombre o áreas de cuadrícula con nombre. Es probable que este último sea el favorito de muchos desarrolladores, y brilla cuando sabes exactamente dónde quieres colocar cada elemento de la cuadrícula.

6.4. REJILLA EXPLÍCITA E IMPLÍCITA

En algunos casos, es posible que no sepa exactamente dónde desea colocar cada elemento en la cuadrícula. Quizás esté trabajando con una gran cantidad de elementos de la cuadrícula y colocar cada uno de forma explícita es difícil de manejar. Incluso puede tener una cantidad desconocida de elementos poblados por una base de datos. En estos casos, probablemente tenga más sentido definir libremente una cuadrícula y luego permitir que el algoritmo de ubicación de elementos de la cuadrícula la llene por usted.

Esto requerirá que confíe en una cuadrícula implícita. Cuando usa las propiedades grid-template- * para definir pistas de cuadrícula, está creando una cuadrícula explícita. Pero los elementos de la cuadrícula aún se pueden colocar fuera de estas pistas explícitas; en cuyo caso, las pistas implícitas se generarán automáticamente, expandiendo la cuadrícula para que contenga estos elementos.

La figura 6.11 ilustra una cuadrícula con solo una pista de cuadrícula explícita en cada dirección. Cuando se coloca un elemento de cuadrícula en la segunda pista (entre las líneas de cuadrícula dos y tres), se agregan pistas adicionales para incluirlo.

De forma predeterminada, las pistas de cuadrícula implícitas tendrán un tamaño de auto, lo que significa que crecerán hasta el tamaño necesario para contener el contenido del elemento de la cuadrícula. Las propiedades grid-auto-columns y grid-auto-rows se pueden aplicar al contenedor de la cuadrícula para especificar un tamaño diferente para todas las pistas de cuadrícula implícitas (por ejemplo, grid-auto-columnas: 1fr).

Las pistas de cuadrícula implícitas no cambian el significado de los números negativos cuando se hace referencia a líneas de cuadrícula. La numeración de líneas de cuadrícula negativa todavía comienza en la parte inferior derecha de la cuadrícula explícita.

Diseñemos otra página usando una cuadrícula implícita. Este será un portafolio de fotografías, como se muestra en la figura 6.12. Para este diseño, establecerá pistas de cuadrícula para las columnas, pero las filas de la cuadrícula estarán implícitas. De esta forma, la página no está estructurada para un número específico de imágenes; será adaptable a cualquier número de elementos de la cuadrícula. Cada vez que las imágenes necesiten ajustarse a una nueva fila, se agregará otra fila implícitamente.

Este es un diseño divertido porque sería difícil de lograr con flexbox o floats. Muestra el poder único de las redes.

Para crear esto, necesitará una página nueva. Cree una página en blanco y una nueva hoja de estilo y vincúlelas. El marcado para esto se muestra aquí. Agréguelo a la página.

          
<div class="portfolio">
  <figure class="featured">                             1 
    <img src="images/monkey.jpg" alt="monkey" />
    <figcaption>Monkey</figcaption>
  </figure>
  <figure>
    <img src="images/eagle.jpg" alt="eagle" />          2 
    <figcaption>Eagle</figcaption>                2       
  </figure>
  <figure class="featured">                             3 
    <img src="images/bird.jpg" alt="bird" />
    <figcaption>Bird</figcaption>
  </figure>
  <figure>
    <img src="images/bear.jpg" alt="bear" />
    <figcaption>Bear</figcaption>
  </figure>
  <figure class="featured">                             3
    <img src="images/swan.jpg" alt="swan" />
    <figcaption>Swan</figcaption>
  </figure>
  <figure>
    <img src="images/elephants.jpg" alt="elephants" />
    <figcaption>Elephants</figcaption>
  </figure>
  <figure>
    <img src="images/owl.jpg" alt="owl" />
    <figcaption>Owl</figcaption>
  </figure>
</div>
          
          Listado 6.8. Marcado para una cartera
        

1. Cada <figure> será un elemento de cuadrícula.
2. Encierra la imagen y su título dentro del elemento <figure>
3. La clase destacada ampliará ciertas imágenes.

Este marcado es un portafolio (que será el contenedor de la cuadrícula) y una serie de figuras (que serán los elementos de la cuadrícula). Cada figura contiene una imagen y una leyenda. Agregué la clase featured a algunos elementos, que usará para hacerlos más grandes que las otras imágenes.

Lo guiaré a través de esto en algunas fases. Primero, dará forma a las pistas de la cuadrícula y verá las imágenes en una formación de cuadrícula básica (figura 6.13). Después de eso, ampliará las imágenes "destacadas" y aplicará algunos otros toques finales.

Los estilos para esto se muestran en el listado 6.9. Utiliza grid-auto-rows para especificar un tamaño de 1fr para todas las filas de la cuadrícula implícitas, por lo que cada fila tendrá la misma altura. También presenta dos conceptos nuevos: auto-fill y la función minmax(), que explicaré en un momento. Agregue estos estilos a su hoja de estilo.

          
body {
  background-color: #709b90;
  font-family: Helvetica, Arial, sans-serif;
}

.portfolio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));     1
  grid-auto-rows: 1fr;                                              2
  grid-gap: 1em;
}

.portfolio > figure {
  margin: 0;                                                        3
}

.portfolio img {
  max-width: 100%;
}

.portfolio figcaption {
  padding: 0.3em 0.8em;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: right;
}
          
          Listado 6.9. Una cuadrícula con filas de cuadrícula implícitas
        

1. Establece un ancho de columna mínimo de 200 px y llena automáticamente la cuadrícula
2. Establece un tamaño de pista de cuadrícula horizontal implícita de 1 fr
3. Anula los márgenes del agente de usuario

A veces, no querrá establecer un tamaño fijo en una pista de cuadrícula, pero querrá restringirlo dentro de ciertos valores mínimos y máximos. Aquí es donde entra en juego la función minmax(). Especifica dos valores: un tamaño mínimo y un tamaño máximo. El navegador se asegurará de que la pista de la cuadrícula se encuentre entre estos valores. (Si el tamaño máximo es menor que el tamaño mínimo, el máximo se ignora). Al especificar minmax(200px, 1fr), el navegador asegura que todas las pistas tengan al menos 200px de ancho.

La palabra clave auto-fill es un valor especial que puede proporcionar para la función repeat(). Con este conjunto, el navegador colocará tantas pistas en la cuadrícula como pueda caber, sin violar las restricciones establecidas por el tamaño especificado (el valor minmax()).

Juntos, auto-fill y minmax(200px, 1fr) significan que su cuadrícula colocará tantas columnas de cuadrícula como pueda contener el espacio disponible, sin permitir que ninguna de ellas sea menor a 200px. Y debido a que ninguna pista puede ser mayor que 1fr (nuestro valor máximo), todas las pistas de la cuadrícula tendrán el mismo tamaño.

En la figura 6.13, la ventana gráfica tiene espacio para cuatro columnas de 200 px, así que esa es la cantidad de pistas que se agregaron. Si la pantalla es más ancha, es posible que quepan más. Si es más estrecho, se crearán menos.

Tenga en cuenta que el auto-fill también puede resultar en algunas pistas de cuadrícula vacías, si no hay suficientes elementos de cuadrícula para llenarlas todas. Si no desea pistas de cuadrícula vacías, puede utilizar la palabra clave auto-fit en lugar de autocompletar. Esto hace que las pistas no vacías se estiren para llenar el espacio disponible. Consulte https://gridbyexample.com/examples/example37/ para ver un ejemplo de la diferencia.

El uso de auto-fill o auto-fit depende de si desea asegurarse de obtener el tamaño de pista de cuadrícula esperado o si desea asegurarse de que se llene la longitud de todo el contenedor de cuadrícula. Normalmente encuentro que prefiero el auto-fit.

6.4.1. Añadiendo variedad

A continuación, agreguemos interés visual a su cuadrícula aumentando el tamaño de las imágenes destacadas (el pájaro y el cisne en este ejemplo). Cada elemento de la cuadrícula ocupa actualmente un área de 1 x 1 en la cuadrícula. Aumentará el tamaño de las imágenes destacadas para llenar un área de cuadrícula de 2 x 2. Puede orientar estos elementos con la clase featured y hacer que abarquen dos pistas de cuadrícula en cada dirección.

Sin embargo, esto presenta un problema. Dependiendo del orden de los elementos, el aumento del tamaño de algunos elementos de la cuadrícula podría generar espacios en la cuadrícula. La figura 6.14 ilustra estas brechas. El pájaro de esta figura es el tercer elemento de la cuadrícula. Pero debido a que es un elemento más grande, no cabe en el espacio a la derecha de la segunda imagen, el águila. En cambio, se ha reducido a la siguiente pista de la cuadrícula.

Cuando no coloca elementos específicamente en una cuadrícula, el algoritmo de ubicación de elementos de la cuadrícula los coloca automáticamente. De forma predeterminada, este algoritmo coloca los elementos de la cuadrícula columna por columna, fila por fila, de acuerdo con el orden de los elementos en el marcado. Cuando un elemento no cabe en una fila (es decir, ocupa demasiadas pistas de cuadrícula), el algoritmo pasa a la siguiente fila, buscando un espacio lo suficientemente grande para acomodar el elemento. En este caso, el pájaro se mueve hacia la segunda fila, debajo del águila.

El módulo de diseño de cuadrícula proporciona otra propiedad, grid-auto-flow, que se puede utilizar para manipular el comportamiento del algoritmo de ubicación. Su valor inicial, row, se comporta como he descrito. Con el valor column, en cambio, coloca los elementos en las columnas primero, moviéndose a la siguiente fila solo después de que una columna está llena.

También puede agregar la palabra clave dense (por ejemplo, grid-auto-flow: column dense). Esto hace que el algoritmo intente llenar los espacios en la cuadrícula, incluso si eso significa cambiar el orden de visualización de algunos elementos de la cuadrícula. Si aplica esto a su página, los elementos de cuadrícula más pequeños "rellenarán" los espacios creados por los elementos de cuadrícula más grandes. El resultado se muestra en la figura 6.15.

Con la opción de dense auto-flow, los elementos de cuadrícula más pequeños llenan los espacios que dejan los elementos más grandes. El orden de origen aquí sigue siendo el mono, el águila, el pájaro y luego el oso, pero el oso se coloca en posición antes que el pájaro, llenando así el espacio.

Agregue la siguiente lista a su hoja de estilo. Esto amplía las imágenes destacadas para llenar dos pistas de cuadrícula en cada dirección y aplica un flujo automático denso.

          
.portfolio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 1em;
  grid-auto-flow: dense;               1
}

.portfolio .featured {
  grid-row: span 2;                    2
  grid-column: span 2;                 2
}
          
          Listado 6.10. Ampliación de imágenes destacadas
        

1. Habilita el algoritmo de ubicación de cuadrícula densa
2. Amplía las imágenes destacadas para abarcar dos pistas de cuadrícula en cada dirección

Este listado utiliza la declaración grid-auto-flow: dense, que es equivalente a grid-auto-flow: row dense. (En la primera parte del valor, la fila está implícita porque es el valor inicial). Luego, apunta a los elementos destacados y los configura para que abarquen dos pistas de cuadrícula en cada dirección. Tenga en cuenta que este ejemplo utiliza solo la palabra clave span y no coloca expresamente ningún elemento de cuadrícula en una pista de cuadrícula específica. Esto permite que el algoritmo de ubicación de elementos de la cuadrícula coloque los elementos de la cuadrícula donde lo crea conveniente.

Dependiendo del tamaño de su ventana gráfica, es posible que su pantalla no coincida exactamente con la figura 6.12. Eso se debe a que utilizó el auto-fill para determinar el número de pistas de cuadrícula vertical. Una pantalla más grande tendrá espacio para más pistas; una pantalla más pequeña tendrá menos. Tomé esta captura de pantalla con una ventana gráfica de aproximadamente 1,000px de ancho, produciendo cuatro pistas de cuadrícula. Cambie el tamaño del ancho de su navegador a varios tamaños para ver cómo la cuadrícula responde automáticamente, llenando el espacio disponible.

Tenga cuidado con un dense auto-flow porque es posible que los elementos no se muestren en el mismo orden en que aparecen en el HTML. Esto puede causar cierta confusión a los usuarios que navegan a través del teclado (tecla Tab) o un lector de pantalla, ya que esos métodos navegan según el orden de origen, no el orden de visualización.

Una limitación de la cuadrícula es la estructura DOM específica requerida, es decir, todos los elementos de la cuadrícula deben ser hijos directos del contenedor de la cuadrícula. Por lo tanto, no es posible alinear elementos profundamente anidados en la cuadrícula.

Puede mostrar el elemento de la cuadrícula display: grid para crear una cuadrícula interna dentro de la externa. Pero los elementos de la cuadrícula de la cuadrícula interior no se alinearán necesariamente con las pistas de la cuadrícula de la cuadrícula exterior. El tamaño de los elementos de una cuadrícula tampoco afectará al tamaño de las pistas de la cuadrícula en la otra cuadrícula.

En el futuro, la solución a esto serán las subcuadrículas. Al aplicar display: subgrid a un elemento de cuadrícula, se convierte en su propio contenedor de cuadrícula interior, con pistas de cuadrícula que se alinean con las pistas de cuadrícula de la cuadrícula exterior. Desafortunadamente, esta función aún no está implementada en ningún navegador y se ha retrocedido a la versión de Nivel 2 de la especificación.

Esta característica es muy esperada. Esté atento a ello.

6.4.2. Ajustar grid items para llenar el grid track

Ahora tiene un diseño bastante complejo. No tuvo que hacer mucho trabajo para colocar cada elemento en una ubicación precisa, sino que permitió que el navegador lo averiguara por usted.

Queda un último problema: las imágenes más grandes no llenan completamente las celdas de la cuadrícula, lo que deja un pequeño espacio debajo de ellas. Idealmente, los bordes superior e inferior de cada elemento de la cuadrícula deben alinearse con otros en la misma pista de la cuadrícula. Nuestros bordes superiores se alinean, pero los bordes inferiores no como se muestra en la figura 6.16.

Arreglemos esa brecha. Si recuerda, cada elemento de la cuadrícula es una <figure> que contiene dos elementos secundarios: una imagen y un título:

          
<figure class="featured">
  <img src="images/monkey.jpg" alt="monkey" />
  <figcaption>Monkey</figcaption>
</figure>
          
        

De forma predeterminada, cada elemento de la cuadrícula se estira para llenar toda el área de la cuadrícula, pero sus elementos secundarios no se extienden para llenarla, por lo que el área de la cuadrícula tiene una altura no utilizada. Una forma fácil de solucionar este problema es con flexbox. En la lista 6.11, hará que cada <figure> sea un contenedor flexible con una dirección de columna para que los elementos se apilen verticalmente, uno encima del otro. Luego puede aplicar un flex-grow a la imagen, obligándola a estirarse para llenar el espacio.

Sin embargo, estirar una imagen es problemático. Esto cambiará su relación de altura a ancho, distorsionando la imagen. Afortunadamente, CSS proporciona una propiedad especial para controlar este comportamiento, object-fit. De forma predeterminada, un <img> tiene un valor de object-fill de fill, lo que significa que se cambiará el tamaño de toda la imagen para llenar el elemento <img>. También puede establecer otros valores para cambiar esto.

Por ejemplo, la propiedad de object-fit acepta los valores cover y contain (ilustrado en la figura 6.17). Estos valores le dicen al navegador que cambie el tamaño de la imagen dentro del cuadro renderizado, sin distorsionar su relación de aspecto.

• Para expandir la imagen para llenar el cuadro (lo que resulta en que parte de la imagen se corte), use cover.
• Para cambiar el tamaño de la imagen para que quepa completamente en el cuadro (lo que da como resultado un espacio vacío dentro del cuadro), use contain.

Hay una distinción importante que hacer aquí: está el cuadro (determinado por la altura y el ancho del elemento <img>) y está la imagen renderizada. Por defecto, son del mismo tamaño. La propiedad object-fit le permite manipular el tamaño de la imagen renderizada dentro de ese cuadro, pero el tamaño del cuadro en sí permanece sin cambios.

Debido a que usará la propiedad flex-grow para estirar las imágenes, también debe aplicar object-fit: cover para evitar que las imágenes se distorsionen. Esto recortará una pequeña parte del borde de las imágenes, lo cual es un compromiso que tendrá que hacer. El resultado final se muestra en la figura 6.18. Para obtener una visión más detallada de esta propiedad, consulte https://css-tricks.com/on-object-fit-and-object-position/.

Ahora, los bordes superior e inferior de todas las imágenes y sus leyendas se alinean en cada pista de la cuadrícula. El código para esto se muestra aquí. Agréguelo a su hoja de estilo.

          
.portfolio > figure {
  display: flex;                         1
  flex-direction: column;                1
  margin: 0;
}

.portfolio img {
  flex: 1;                               2
  object-fit: cover;                     3
  max-width: 100%;
}
          
          Listado 6.11. Usando un flexbox de columna para estirar imágenes para llenar el área de la cuadrícula
        

1. Hace que cada elemento de la cuadrícula sea una caja flexible vertical
2. Utiliza flex grow para hacer que la imagen llene el espacio disponible en el contenedor flexible
3. 3 Permite que la imagen llene el cuadro sin estirarse (recortando los bordes)

Esto completa el diseño de su portafolio fotográfico. Todo se alinea en una cuadrícula ordenada, y el navegador toma decisiones por usted con respecto al número y tamaño de cada pista de cuadrícula vertical. El uso de un flujo automático denso permite que el navegador llene los huecos de forma ordenada.

6.5 FEATURE QUERIES

Ahora que tiene una comprensión general del diseño de la cuadrícula, es posible que se pregunte: ¿Tiene que esperar hasta que todos los navegadores admitan la cuadrícula antes de poder comenzar a usarla? La respuesta es no. Puede comenzar a usarlo hoy si lo desea. Deberá considerar lo que desea que haga el navegador para su diseño si no es compatible con la cuadrícula y proporcionar esos estilos como respaldo.

CSS ha agregado recientemente algo llamado consulta de características que puede ayudar con esto. Se parece a esto:

          
@supports (display: grid) {
  ...
}
          
        

La regla @supports va seguida de una declaración entre paréntesis. Si el navegador comprende la declaración (en este caso, es compatible con la cuadrícula), aplica los conjuntos de reglas que aparecen entre llaves. Si no entiende esto, no los aplicará.

Esto significa que puede proporcionar un conjunto de estilos utilizando tecnologías de diseño más antiguas, como floats. Estos no serán necesariamente estilos ideales (tendrás que hacer algunos compromisos), pero harán el trabajo. Luego, usando una consulta de características, aplique el diseño con todas las funciones usando la cuadrícula.

Usemos esto en el portafolio. Puede proporcionar un diseño más básico para navegadores más antiguos utilizando elementos block-inline, luego poner todo el código relacionado con el diseño de la cuadrícula dentro de una consulta de características. Los navegadores que no admiten la cuadrícula mostrarán la página como se muestra en la figura 6.19.

Este diseño tiene un par de compromisos: las imágenes destacadas no se mostrarán en un tamaño mayor y las columnas serán de 300px fijos en lugar de estirarse para llenar el ancho de pantalla disponible. Debido a que las figuras se muestran en inline-block, se ajustarán normalmente. Esto permite más imágenes por fila cuando hay suficiente espacio en la pantalla para ellas.

El código para esto (incluida una consulta de características) se muestra en el listado 6.12. Actualice su hoja de estilo para que coincida.

          
.portfolio > figure {
  display: inline-block;                                       1
  max-width: 300px;                                            1
  margin: 0;
}

.portfolio img {
  max-width: 100%;
  object-fit: cover;
}

.portfolio figcaption {
  padding: 0.3em 0.8em;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: right;
}

@supports (display: grid) {                                    2
  .portfolio {
    display: grid;                                             3
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 1fr;
    grid-gap: 1em;
    grid-auto-flow: dense;
  }

  .portfolio > figure {
    display: flex;
    flex-direction: column;
    max-width: initial;                                        4
  }

  .portfolio img {
    flex: 1;
  }

  .portfolio .featured {
    grid-row: span 2;
    grid-column: span 2;
  }
}
          
          Listado 6.12. Usar una consulta de características para una mejora progresiva
        

1. Utiliza bloque en línea para el diseño de reserva
2. Consulta de funciones para soporte de cuadrícula
3. Coloca todos los estilos de diseño de cuadrícula dentro del bloque de consulta de características
4. Anula los estilos alternativos

El respaldo y otros estilos básicos, como los colores, están fuera del bloque de consulta de funciones, por lo que siempre se aplicarán. Si abre la página en un navegador que no es compatible con la cuadrícula, verá el diseño alternativo (figura 6.19). Todos los estilos relacionados con el diseño basado en cuadrículas se encuentran dentro del query block de características, por lo que solo se aplicarán si el navegador es compatible con la cuadrícula.

La regla @supports se puede utilizar para consultar todo tipo de funciones CSS. Utilice @supports (display: flex) para consultar la compatibilidad con flexbox, o @supports (mix-blend-mode: overlay) para consultar la compatibilidad con el modo de fusión (consulte el capítulo 11 para obtener más información sobre los modos de fusión).

IE no es compatible con la regla @supports. Ese navegador ignora las reglas dentro del query block de funciones, independientemente de la compatibilidad real de las funciones. Por lo general, esto está bien, ya que querrá que el navegador anterior represente el diseño de respaldo.

Las consultas de características también se pueden construir de otras formas:

• @supports not (<declaration>): solo se aplican reglas en el query block de funciones si la declaración consultada no es compatible
• @supports (<declaration>) o (<declaration>): aplique las reglas si se admite alguna de las declaraciones consultadas
• @supports (<declaration>) y (<declaration>): aplique las reglas solo si se admiten ambas declaraciones consultadas

Estos también se pueden combinar para consultar situaciones más complejas. La palabra clave or puede ser útil para realizar consultas de soporte utilizando propiedades con prefijo:

          
@supports (display: grid) or (display: -ms-grid)
          
        

Esta declaración se dirigirá a los navegadores que admitan la versión sin prefijo de la propiedad, así como a versiones anteriores de MS Edge, que requieren el prefijo -ms-. Advierto que el soporte de cuadrícula parcial en versiones anteriores de Edge no es tan robusto como los navegadores modernos. Lo más probable es que sea más problemático de lo que vale la pena intentar hacer que la consulta con el prefijo @supports funcione, y será mejor que la omita. Esto dejará que las versiones anteriores de Edge representen su diseño alternativo.

6.6. ALINEACIÓN

El módulo de cuadrícula hace uso de varias de las mismas propiedades de alineación que usa flexbox, así como un par de nuevas. He cubierto la mayoría de estos en el capítulo anterior, pero veamos cómo se aplican a una cuadrícula. Si necesita más control sobre varios aspectos de un diseño de cuadrícula, estas propiedades pueden resultar útiles.

CSS proporciona tres propiedades de justificación: justify-content, justify-items, justify -self. Estas propiedades controlan la ubicación horizontal. Recuerdo esto al pensar en justificar el texto en un procesador de textos, que distribuye el texto horizontalmente.

Y hay tres propiedades de alineación: align-content, align-items, align -self. Estos controlan la ubicación vertical. Recuerdo esto al pensar en la propiedad de vertical-align de los diseños de tabla. Cada una de estas propiedades se ilustra en la figura 6.20.

Puede utilizar justify-content y align-content para colocar las pistas de la cuadrícula horizontal y verticalmente dentro del contenedor de la cuadrícula. Esto se vuelve necesario si el tamaño total de la cuadrícula no llena el tamaño del contenedor. Considere este código:

          
.grid {
  display: grid;
  height: 1200px;
  grid-template-rows: repeat(4, 200px);
}
          
        

Establece explícitamente la altura de un contenedor de cuadrícula en 1,200px, pero solo define 800px de pistas de cuadrícula horizontales. La propiedad align-content especifica cómo distribuir los 400px restantes de espacio. Los valores admitidos son los siguientes:

• start: coloca las pistas de la cuadrícula en la parte superior izquierda del contenedor de la cuadrícula (use flex-start en un flexbox)
• end: coloca las pistas de la cuadrícula en la parte inferior derecha del contenedor de la cuadrícula (use flex-end en un flexbox)
• center: coloca las pistas de la cuadrícula en el medio del contenedor de la cuadrícula
• stretch: cambia el tamaño de las pistas para llenar el tamaño del contenedor de la cuadrícula
• space-between: distribuye uniformemente el espacio restante entre cada pista de la cuadrícula (anulando efectivamente cualquier espacio de la cuadrícula)
• space-around: distribuye el espacio entre cada pista de la cuadrícula, con un espacio de la mitad del tamaño en cada extremo
• space-evenly: distribuye el espacio entre cada pista de la cuadrícula, con la misma cantidad de espacio en cada extremo (no es compatible con flexbox)

Para obtener ejemplos detallados de todas estas propiedades de justificación y alineación, visite https://gridby-example.com/. Este es un excelente recurso. Es una gran colección de ejemplos de cuadrículas reunidos por Rachel Andrew, desarrolladora y miembro del W3C.

Debido a que hay mucho en el diseño de la cuadrícula, lo he guiado a través de los conceptos esenciales que necesitará saber. Te animo a experimentar más con las cuadrículas. Hay muchas más formas de mezclarlas y combinarlas de las que podría cubrir en un capítulo, así que desafíate a ti mismo para probar cosas nuevas. Cuando encuentre un diseño de página interesante en la web, vea si puede replicarlo usando cuadrículas.

RESUMEN

• Grid es excelente para un diseño de alto nivel de la página web (pero no se limita a eso).
• Puede usar grid junto con flexbox para un sistema de diseño completo.
• Debe usar cualquier sintaxis (líneas de cuadrícula numeradas, líneas de cuadrícula con nombre o áreas de cuadrícula con nombre) que sea más intuitiva para usted y de acuerdo a la situación dada.
• Puede utilizar auto-fill / auto-fit y la implicit grid para diseños con un número grande o desconocido de elementos de cuadrícula.
• Puede utilizar feature queries para una mejora progresiva.