2.2 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
5a94fe4469fb03452672e460	Limita el tamaño del elemento usando la función minmax	0	https://scrimba.com/p/pByETK/cD97RTv	301131	limit-item-size-using-the-minmax-function

--description--

Hay otra función integrada para usar con grid-template-columns y grid-template-rows llamada minmax. Se usa para limitar el tamaño de los elementos cuando el contenedor de la cuadrícula (grid) cambia de tamaño. Para hacer esto, necesitas especificar el rango de tamaño aceptable para tu elemento. A continuación un ejemplo:

grid-template-columns: 100px minmax(50px, 200px);

En el código anterior, grid-template-columns se configuró para crear dos columnas; la primera tiene 100px de ancho y la segunda tiene un ancho mínimo de 50px y máximo de 200px.

--instructions--

Usando la función minmax, reemplaza 1fr en la función repeat con un tamaño de columna que tenga como mínimo de ancho 90px y máximo de 1fr, y cambia el tamaño del panel de la vista previa para ver el efecto.

--hints--

La clase container debe tener una propiedad grid-template-columns que repita 3 columnas con un mínimo de ancho de 90px y máximo de 1fr.

assert(
  code.match(
    /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?minmax\s*?\(\s*?90px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
  )
);

--seed--

--seed-contents--

<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}

  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    /* Only change code below this line */

    grid-template-columns: repeat(3, 1fr);

    /* Only change code above this line */
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
</style>

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

--solutions--

<style>.container {grid-template-columns: repeat(3, minmax(90px, 1fr));}</style>

2.2 KiB Raw Blame History