主页 / coding / 问题 / 78608927
Accepted
xkeshav
Asked: 2024-06-12 01:10:17 +0800 CST

@container 查询不会改变 grid-template-columns 值

  • 772

有一个页面，我们要求如果容器宽度低于视图大小，则将 5 列更改为 2 列，并尝试如下：

.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>

但它不起作用；在 Ubuntu 中的 Chrome 和 Firefox 中进行了检查。

html

2 个回答

  1. Best Answer

    我认为你是一个“出局”的容器。

    此代码片段引入了一个设置为“容器”的包装器，因此 .list 元素有一个要测试的容器。

    .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. 您要做的是将@container 更改为@media，其余代码就没问题。

        .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

相关问题