Как правильно написать grid для таких элементов?

Question

[QnaTwitt]

Подскажите как правильно написать адаптивно grid для таких элементов, учитывая что их может быть не три, а 2 или 5...






Пробовал сделать как-то так....

display: grid;
    grid-template-columns: repeat(3, minmax(variables.rem(152px), min-content));
    grid-column-gap: variables.rem(6px);
    grid-row-gap: variables.rem(6px);

Comments

[Сергей delphinpro]

Я здесь вижу просто три кнопки в один ряд. Плюс кнопок, вы сказали, может быть больше или меньше.
Зачем гриды? Зафлексите их и всё.

[Ankhena]

Поддерживаю Сергея

Answer 1

[Сергей delphinpro]

.block {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

Comments

[QnaTwitt]

Смущает что у них у всех то одинаковые размеры, то как на смартфонах разные

[Сергей delphinpro]

QnaTwitt, Meqia Queries в помощь.
на мобилках поменяйте 1fr на min-content

[QnaTwitt]

Сергей delphinpro, Вот это ещё как-то центрировать нужно будет...

[Сергей delphinpro]

QnaTwitt, используйте флексы. тут нет двумерной раскладки, и использование гридов больше создает проблем, чем решает.

[QnaTwitt]

Сергей delphinpro, А как быть с размерами? Как мне задать их правильно, если бы я был уверен что будет три кнопки только, я бы написал что бы кнопка занимала 33% ширины, а на мобильном fit-content, но их может быть разное количество...

[Сергей delphinpro]

QnaTwitt, я не понял, если три кнопки по 33 процента, то как вы их собрались центрировать? они всю ширину занимать будут.

Давайте вы опишете полностью, какое поведение вы ожидаете на разных экранах. Будет проще понять, какой инструмент для реализации выбрать.

[QnaTwitt]

Сергей delphinpro, Сложно объяснить, там есть скрины, то как это нарисовал дизайнер)
На других страницах есть точно такие же кнопки, но где-то их две, где-то три, где-то четыре... И это затрудняет, как правильно это реализовать что бы нормально выглядело при разных экранах, при разном количестве кнопок...

Answer 2

[Юлия]

QnaTwitt, если допустимо использовать flex (судя по комментариям), то может быть такое решение.
На мобильных устройствах за счет flex-wrap будет перенос кнопок на новую строку. Если кнопок будет больше 3-х этого все равно не избежать на маленьких экранах.

<div class="flex">
  <button class="btn btn--primary">Log in</button>
  <button class="btn btn--outline">Registration</button>
  <button class="btn btn--outline">Forgot password</button>
  <button class="btn btn--outline">Forgot password</button>
</div>

*{
  box-sizing: border-box;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  border: none;
  background-color: transparent;
  font-family: inherit;
  padding: 10px 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
 
}

.btn--primary {
  color: #fff;
  background-color: #000;
}

.btn--outline {
  color: #000;
  background-color: #fff;
  border: 1px solid #000;
}