En esta demostración, se aprovecha la función minmax() para los diseños de cuadrícula. En la demostración, se usa esta función para establecer el tamaño mínimo de la barra lateral en 100px
, pero en pantallas más grandes, lo que permite extenderlo a 25%
. La barra lateral siempre ocupará el 25%
del espacio horizontal del elemento superior hasta que el elemento 25%
sea más pequeño que 100px
.
Para agregar esto, usa la propiedad grid-template-columns
con el siguiente valor: minmax(100px, 25%) 1fr
. El elemento de la primera columna (en este caso, la barra lateral) obtiene un minmax
de 100px
en 25%
, y el segundo elemento (aquí la sección main
) ocupa el resto del espacio como una sola pista 1fr
.
.parent {
display: grid;
grid-template-columns: minmax(100px, 25%) 1fr;
}
<div class="parent">
<div class="section yellow" contenteditable>
Min: 100px / Max: 25%
</div>
<div class="section blue" contenteditable>
This element takes the second grid position (1fr), meaning
it takes up the rest of the remaining space.
</div>
</div>
.parent {
display: grid;
grid-template-columns: minmax(100px, 25%) 1fr;
}