Relaciones de aspecto para elementos de cuadrícula | Programar Plus

Hemos cubierto los cuadros de relación de aspecto antes. Se trata de trucos con el relleno de modo que el ancho y la altura de un elemento estén en proporción a su gusto. No es una necesidad muy común, ya que arreglar la altura de un elemento es buscar problemas, pero surge.

Una forma de reducir el riesgo es la táctica del elemento Psuedo, en la que un pseudo elemento empuja su elemento principal a la relación de aspecto, pero si el contenido interior lo empuja más alto, se volverá más alto, maldita relación de aspecto.

¡Puede usar esa técnica en la cuadrícula CSS con elementos de cuadrícula! Aunque hay un par de formas diferentes de aplicarlo en las que vale la pena pensar.

Recuerde que las áreas de la cuadrícula y el elemento que las ocupa no son necesariamente del mismo tamaño.

Acabamos de cubrir esto. Ese artículo comenzó como una sección de este artículo, pero se sintió lo suficientemente importante como para dividirse en su propio concepto.

Sabiendo esto, conduce a: ¿necesita que el área de la cuadrícula tenga una relación de aspecto y el elemento se estirará dentro? ¿O el elemento solo necesita una relación de aspecto independientemente del área de la cuadrícula en la que se encuentre?

Escenario 1) Solo el elemento interior debe tener una relación de aspecto.

Frio. Podría decirse que esto es más fácil. Asegúrese de que el elemento sea 100% tan ancho como el área de la cuadrícula, luego aplique un pseudo elemento para manejar la relación de aspecto de estiramiento de altura.

<div class="grid">
  <div style="--aspect-ratio: 2/1;">2/1</div>
  <div style="--aspect-ratio: 3/1;">3/1</div>
  <div style="--aspect-ratio: 1/1;">1/1</div>
</div>
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  place-items: start;
}
.grid > * {
  background: orange;
  width: 100%;
}
.grid > [style^='--aspect-ratio']::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0;
  padding-bottom: calc(100% / (var(--aspect-ratio)));
}

Lo que conduce a esto:

Tenga en cuenta que no es necesario que aplique relaciones de aspecto a través de propiedades personalizadas. Puede ver dónde el fondo acolchado está haciendo el trabajo pesado y ese valor podría estar codificado o cualquier otra cosa.

Escenario 2) Extienda tantas columnas como sea necesario para el ancho

Apuesto a que es más probable que lo que necesite sea una forma de hacer, digamos, un elemento de relación de aspecto de 2 a 1, que abarque dos columnas, no que quede atrapado en una. Hacer esto es muy parecido a lo que hicimos anteriormente, pero agregando reglas para hacer esa extensión de columna.

[style="--aspect-ratio: 1/1;"] {
  grid-column: span 1;
}
[style="--aspect-ratio: 2/1;"] {
  grid-column: span 2;
}
[style="--aspect-ratio: 3/1;"] {
  grid-column: span 3;
}

Si tiramos grid-auto-flow: dense; allí también, podemos conseguir artículos con una variedad de relaciones de aspecto empaquetados como mejor les parezca.

Ahora es un buen momento para mencionar que hay pequeñas formas de arruinar las relaciones de aspecto exactas aquí. El line-height en algún texto puede empujar un cuadro más alto de lo que desea. Si quieres usar grid-gap, eso podría hacer que las proporciones se salgan de control. Si necesita ser súper exacto con las proporciones, es posible que tenga más suerte codificando valores.

Hacer la división de columnas también se vuelve complicado si está en una cuadrícula que no tiene un número establecido de filas. Quizás estás haciendo un repeat/auto-fill cosa. Puede terminar en un escenario con columnas desiguales que no serán compatibles con las relaciones de aspecto. Quizás podamos sumergirnos en eso en otro momento.

Escenario 3) Forzar cosas

La cuadrícula tiene una capacidad de diseño bidimensional y, si lo deseamos, podríamos obtener nuestras relaciones de aspecto simplemente forzando las áreas de la cuadrícula a la altura y el ancho que deseamos. Por ejemplo, nada le impide codificar alturas y anchos en columnas y filas:

.grid {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-template-rows: 100px 200px 300px;
}

Normalmente no pensamos de esa manera, porque queremos que los elementos sean flexibles y fluidos, de ahí las técnicas basadas en porcentajes utilizadas anteriormente para las relaciones de aspecto. Aún así, es algo que puedes hacer.

Vea el relleno de las cajas de relación de aspecto del lápiz por Chris Coyier (@chriscoyier) en CodePen.

Este ejemplo obliga a las áreas de la cuadrícula a tener el tamaño que tienen y los elementos se estiran para llenarse, pero también puede corregir los tamaños de los elementos.

Ejemplo del mundo real

Ben Goshow me escribió tratando de lograr esto, que es lo que impulsó esto:

Parte del problema no era solo conseguir que las cajas tuvieran relaciones de aspecto, sino que además tuvieran la capacidad de alineación en su interior. Hay un par de formas de abordar eso, pero yo diría que la forma más fácil son las cuadrículas anidadas. Haz el elemento de la cuadrícula display: grid; y utilizar las capacidades de alineación de esa nueva cuadrícula interna.

Consulte los elementos de la cuadrícula CSS del lápiz con relación de aspecto y alineación interna de Chris Coyier (@chriscoyier) en CodePen.

Tenga en cuenta que en esta demostración, en lugar de abarcar filas, los elementos se colocan explícitamente (no es obligatorio, un ejemplo de método de diseño alternativo).