Сетка "автоматической подгонки" не переносит элемент при уменьшении размера

#html #css #grid

#HTML #css #сетка

Вопрос:

Я пытаюсь добиться «автоматической подгонки» с grid помощью макета. Но не работает. как заставить его работать?

требование: когда размер экрана становится меньше, ссылки должны переноситься на несколько столбцов.

вот мой html:

 <div class="wrapper">
      <div class="container">
        <a href="#">Link1</a>
        <a href="#">Link2</a>
        <a href="#">Link3</a>
        <a href="#">Link4</a>
        <a href="#">Link5</a>
        <p>@copyright goes here</p>
      </div>
    </div>

css:

 .wrapper{
  max-width: 480px;
  border: 1px solid green;
}

.container{
  border: 1px solid red;
  display: grid;
  grid-gap: 0 20px;
  grid-template-columns:  repeat(auto-fit, auto);
  justify-content: center;
  align-content: center;
}

a{
  border: 1px solid green;
}

p{
  border: 1px solid red;
  grid-column: span 5;
  text-align: center;
}

Живая демонстрация

1. я могу это сделать … но вам нужно p убрать сторону .container …. это означает, что вам нужно поместить p тег в .wrapper div

2. @noo — он выйдет из сетки. в случае, если я хочу добавить больше столбцов во второй строке, как это сделать?

3. вы помещаете текст copy right как новый в одну строку (из вашей ссылки на демонстрационную версию)… также вы можете использовать display:grid; для .wrapper класса

4. значение недопустимо, вам что-то нравится repeat(auto-fit, minmax(100px,1fr)) .. вы не можете использовать auto

5. @TemaniAfif — не могли бы вы поделиться демонстрацией? Я не могу создать

Ответ №1:

Вместо этого вы можете использовать display flex для переноса ваших ссылок при уменьшении размера экрана.

 .container{
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

Добавление flex-wrap: wrap в ваш .container класс после добавления display flex позволит переносить ваши ссылки при уменьшении размера экрана.

1. Я не использовал какой-либо гибкий контейнер.

2. Будет намного проще, если вы конвертируете в display flex для переноса вашего содержимого

3. если вы выберете больший экран, все это будет в одну строку. пожалуйста, поймите