代码之家 › 专栏 › 技术社区 › xkeshav

@容器查询不会更改网格模板列的值

container-queries css-grid css html

2

xkeshav · 技术社区 · 6 月前

有一个页面,我们要求如果容器宽度低于视图大小,则将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中进行了检查。

2 回复 | 直到 6 月前

1

2

A Haworth 6 月前

我认为你是一个集装箱。

此代码段引入了一个包装器,该包装器被设置为“容器”,因此.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

-1

Bilaylos 6 月前

您所要做的是将@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>