freeCodeCamp/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md

id, title, challengeType, videoUrl, forumTopicId, dashedName

id	title	challengeType	videoUrl	forumTopicId	dashedName
5a94fe5469fb03452672e461	Criar layouts flexíveis usando auto-fill	0	https://scrimba.com/p/pByETK/cmzdycW	301126	create-flexible-layouts-using-auto-fill

--description--

A função de repetição vem com uma opção chamada preenchimento automático. Ela permite que você insira automaticamente tantas linhas ou colunas do tamanho desejado quanto possível, dependendo do tamanho do grid container. Você pode criar layouts flexíveis ao combinar auto-fill com minmax, assim:

repeat(auto-fill, minmax(60px, 1fr));

Quando o tamanho do contêiner muda, esta configuração continua inserindo colunas de 60px e esticando-as até que seja possível inserir outra. Observação: se não for possível ajustar todos os grid items no grid container, os grid items que ficarem de fora do grid container serão movidos para uma nova linha.

--instructions--

No primeiro grid, use auto-fill com repeat para preencher o grid com colunas que tenham uma largura mínima de 60px e máxima de 1fr. Em seguida, redimensione a janela do navegador para ver o preenchimento automático em ação.

--hints--

A classe container deve ter a propriedade grid-template-columns com os valores repeat e auto-fill que devem preencher o grid com colunas de largura mínima de 60px e máxima de 1fr.

assert(
  code.match(
    /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fill\s*?,\s*?minmax\s*?\(\s*?60px\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: 100px;
    width: 100%;
    background: LightGray;
    display: grid;
    /* Only change code below this line */

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

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

  .container2 {
    font-size: 40px;
    min-height: 100px;
    width: 100%;
    background: Silver;
    display: grid;
    grid-template-columns: repeat(3, minmax(60px, 1fr));
    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>
<div class="container2">
  <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>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}

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

    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));

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

  .container2 {
    font-size: 40px;
    min-height: 100px;
    width: 100%;
    background: Silver;
    display: grid;
    grid-template-columns: repeat(3, minmax(60px, 1fr));
    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>
<div class="container2">
  <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>