Autocompletar red CSS con número máximo de columnas con tamaño mínimo trucos CSS

Dentro de Drupal 10 core, estamos implementando una nueva técnica de autocompletado de CSS Grid que creo que es lo suficientemente genial como para compartirla con el mundo.

Los requisitos son:

• El usuario establece el número máximo de columnas Este es el estado "natural" de la red de autocompletar.
• Si una celda de la cuadrícula cae por debajo del ancho definido por el usuario, la cuadrícula de Autocompletar se reconfigurará y se reducirá el número de columnas.
• Las celdas de malla siempre se deben estirar para que se ajusten al ancho del contenedor de autocompletar, independientemente del número de columnas.
• Todo esto debería funcionar independientemente del ancho de la vista y no debería requerir JavaScript.

La red CSS de autocompletar en acción

Así es como se comporta la red CSS de autocompletar resultante cuando se comprime con el elemento div deslizante de la izquierda.

Aquí está el código

Si no está buscando la teoría detrás de la red de autocompletar y solo quiere copiar/pegar código, ¡aquí está!

.grid-container {
  /**
   * User input values.
   */
  --grid-layout-gap: 10px;
  --grid-column-count: 4;
  --grid-item--min-width: 100px;

  /**
   * Calculated values.
   */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
}

Teoría y herramientas detrás de la red CSS de autocompletar

El código anterior utiliza varias herramientas modernas de CSS, incluida CSS Grid. repeat(), auto-fill()y minmax() funciones así como CSS max()y calc() funciones Así es como funciona.

Cuadrícula CSS auto-fill() función

La clave de todo esto es auto-fill()Necesitamos llenar cada fila con tantas columnas como sea posible. Para más información sobre auto-fillver el gran artículo de Sara Soueidan sobre la diferencia entre auto-fill y auto-fitque incluye este útil video que muestra cómo funciona.

Pero, ¿cómo asegurarse de que no esté lleno? demasiado columnas?

CSS max() función

Aquí es donde max() ¡La característica está llegando! Queremos que el ancho de cada celda en la red alcance un máximo en un cierto porcentaje, digamos 25% para una red de cuatro columnas, pero no podemos dejarlo por debajo del ancho mínimo especificado por el usuario.

Entonces, si asumimos una cuadrícula con cuatro columnas y un ancho de celda mínimo de 100pxen max() la función se verá así: max(25%, 100px).

lo que 25% el valor aún no es del todo correcto porque no tiene en cuenta las brechas de red. Lo que realmente necesitamos es algo como esto:

max(calc(25% - <grid-gap-for-one-cell>), 100px)

Podemos calc()-especifique esto en CSS! (¿Quién dice que CSS no programa?)

--gap-count: calc(var(--grid-column-count) - 1);
--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
--grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

¡Ahora tenemos otra clave para hacer este trabajo! Esto le indicará a la celda de la cuadrícula que alcance su ancho máximo (que tiene en cuenta las columnas definidas por el usuario), pero nunca irá por debajo 100px.

max(100px, var(--grid-item--max-width))

Aprender más sobre max() función con el artículo de Chris Coyier sobre CSS min(),max()y clamp() funciones

Cuadrícula CSS minmax() función

Nos estamos acercando, pero falta un ingrediente clave: la red no siempre se extiende hasta el ancho del contenedor principal.

Eso es exactamente lo que es minmax() la función está diseñada para hacer. El siguiente CSS establecerá el ancho mínimo en <grid-item-width>y si hay espacio, estirará todas las celdas de manera uniforme para adaptarse al ancho del padre.

minmax(<grid-item-width>, 1fr)

¡Pongámoslo todo junto y hagamos un poco de magia!

¡Usando las herramientas anteriores, podemos armar este código mágico que hace exactamente lo que queremos!

--gap-count: calc(var(--grid-column-count) - 1);
--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
--grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));

¡CSS es divertido!

CSS ha recorrido un largo camino. Me divertí mucho trabajando en esto y estoy muy feliz de que ahora sean posibles usos como este sin usar JavaScript.

Un agradecimiento especial a Andy Bloom quien sugirió auto-fill() sobre auto-fit()Además, un agradecimiento especial a todos los implementadores y autores de especificaciones que hacen que funciones avanzadas como esta estandaricen y sean posibles.