Início / coding / Perguntas / 78608927
Accepted
xkeshav
Asked: 2024-06-12 01:10:17 +0800 CST

Consultas @container não alteram o valor grid-template-columns

  • 772

Ter uma página onde exigimos que, se a largura do contêiner estiver abaixo do tamanho da visualização, altere 5 colunas para 2 colunas e tente abaixo:

.list {
  background-color: grey;
  display: grid;
  grid-gap: 4px;
  grid-template-columns: repeat(5, 1fr);
  container-type: inline-size;
}

.letter {
  display: grid;
  grid-auto-flow: row;
  justify-items: center;
  align-content: center;
  color: white;
}

@container (max-width:500px) {
  .list {
    grid-template-columns: repeat(2, 1fr);
  }
  .letter {
    background-color: green;
  }
}
<div class="list">
  <div class="letter">A</div>
  <div class="letter">B</div>
  <div class="letter">C</div>
  <div class="letter">D</div>
  <div class="letter">E</div>
</div>

Mas não funciona; verificado no Chrome e Firefox no Ubuntu.

html

2 respostas

  1. Best Answer

    Eu acho que você está um contêiner fora.

    Este trecho apresenta um wrapper que é definido como um 'contêiner' para que o elemento .list tenha um contêiner a ser testado.

    .wrapper {
  container-type: inline-size;
}

.list {
  background-color: grey;
  display: grid;
  grid-gap: 4px;
  grid-template-columns: repeat(5, 1fr);
}

.letter {
  display: grid;
  grid-auto-flow: row;
  justify-items: center;
  align-content: center;
  color: white;
}

@container (max-width:500px) {
  .list {
    grid-template-columns: repeat(2, 1fr);
  }
  .letter {
    background-color: green;
  }
}
    <div class="wrapper">
  <div class="list">
    <div class="letter">A</div>
    <div class="letter">B</div>
    <div class="letter">C</div>
    <div class="letter">D</div>
    <div class="letter">E</div>
  </div>
</div>

    • 2

  2. O que você precisa fazer é mudar @container para @media, o resto do código está bom.

        .list {
        background-color: grey;
        display: grid;
        grid-gap: 4px;
        grid-template-columns: repeat(5, 1fr);
        container-type: inline-size;
      }
      
      .letter {
        display: grid;
        grid-auto-flow: row;
        justify-items: center;
        align-content: center;
        color: white;
      }
      
      @media (max-width:500px) {
        .list {
          grid-template-columns: 1fr 1fr;
          
        }
        .letter {
          background-color: green;
        }
      }
      <div class="list">
      <div class="letter">A</div>
      <div class="letter">B</div>
      <div class="letter">C</div>
      <div class="letter">D</div>
      <div class="letter">E</div>
    </div>

    • -2

relate perguntas