1.2 KiB
1.2 KiB
| title | localeTitle |
|---|---|
| Limit Item Size Using the minmax Function | Limitar el tamaño del elemento utilizando la función minmax |
El uso de la función minmax junto con la función de repetición es exactamente lo que describe este desafío, pero al principio no fue algo obvio para mí. La forma de superar este desafío es eliminar el valor de ancho máximo dentro de la función de repetición y luego agregar la función minmax en lugar del valor de ancho máximo de repetición .
Aquí hay un ejemplo de cómo se ve usar un enfoque de antes y después :
antes de
grid-template-columns: repeat(3, 1fr);
Después
grid-template-columns: repeat(3, minmax(50px, 2fr));
También puede consultar este bolígrafo incorporado en Codepen para ver el ejemplo en acción, que puede cambiar de tamaño para ver los resultados:
Vea la función Pen limit-item-size-using-the-minmax-function de skywardcode ( @skywardcode ) en CodePen .