Запросы @container не меняют значение Grid-template-columns

Имея страницу, на которой мы требуем, чтобы, если ширина контейнера меньше размера представления, измените 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>

Но это не работает; проверено в Chrome и Firefox в Ubuntu.

Я могу ошибаться, но я думаю, что на самом деле вы не можете стилизовать контейнер только с помощью @container этого дочернего элемента. Контейнерный запрос будет применять стили к элементам в зависимости от размера ближайшего предка с контекстом включения.

— 11.06.2024 19:46

Йепперс — codepen.io/Paulie-D/pen/WNBZJQv

— 11.06.2024 19:48

html css css-grid container-queries

11.06.2024 19:10

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я думаю, что у тебя один контейнер «вышел».

В этом фрагменте представлена оболочка, которая настроена как «контейнер», поэтому элемент .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>

ой. это работает. но когда я пишу (max-width>=500px) ничего не работает. is >= не является допустимым выражением для запросов контейнера?

— 11.06.2024 19:53

Это так, но я думаю, что ваша проблема в max-width, поскольку (width >= 500px) работает нормально

— 11.06.2024 20:05

11.06.2024 19:44

Что вам нужно сделать, так это изменить @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>

@container не заменяет медиа, они относятся к разным вещам. См. developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/… , где есть пример, подчеркивающий разницу.

— 11.06.2024 23:49

11.06.2024 20:45