Изменение количество grid

Question

Изменение количество grid

Рейтинг: 0Ответов: 1Опубликовано: 27.03.2023

По задумке должно быть 2 grid

В мобильной версии должна быть 1 grid.

Как изменять количество grid медиа запросами ? Если использовать этот код. Из за разных ширин, grid делает разные отступы. Выглядит примерно так

.wrapper {
  display: grid;
  grid-template-columns: 
    minmax(auto, 1fr)  /* 1 колонка */
    minmax(auto, 1fr); /* 2 колонка */
  width: fit-content; /* ширина всего грида */  
  background: #212a5f;
  color: white;
}
.wrapper div {
  padding: 5px; /* отступы от краев */
}
.wrapper div:nth-child(odd) {
  font-weight: bold; /* первая колонка жирнее */
}

<div style="display:flex">

<div class="wrapper">
   <div>Звание</div>
   <div>Мин. командир</div>
   <div>Рейтинг (ММР)</div>
   <div>3000ММР</div>
   <div>Роль</div>
   <div>Актив</div>
   <div>Звание</div>
   <div>Солдат</div>
   <div>Статус</div>
   <div>Prime</div>
</div>
<div class="wrapper">
   <div>Позиция</div>
   <div>6</div>
   <div>Класс героя</div>
   <div>Хил</div>
   <div>Часов в игре</div>
   <div>567 часов</div>
   <div>Режим игры</div>
   <div>Аркада</div>
</div>
</div>

css

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Попробуйте такой вариант.

.wrapper {
  display: grid;
  grid-template-columns: 
    minmax(auto, 1fr)  /* 1 колонка */
    minmax(auto, 1fr); /* 2 колонка */
  width: fit-content; /* ширина всего грида */  
  background: #212a5f;
  color: white;
}
.wrapper div {
  padding: 5px; /* отступы от краев */
}
.wrapper div:nth-child(odd) {
  font-weight: bold; /* первая колонка жирнее */
}

.container
{
  display: flex;
}

@media (max-width: 677px)
{
  .container
  {
    flex-direction: column;
    width: fit-content;
  }
  .wrapper
  {
    width: 100%;
  }
}

<div class="container">
  <div class="wrapper">
     <div>Звание</div>
     <div>Мин. командир</div>
     <div>Рейтинг (ММР)</div>
     <div>3000ММР</div>
     <div>Роль</div>
     <div>Актив</div>
     <div>Звание</div>
     <div>Солдат</div>
     <div>Статус</div>
     <div>Prime</div>
  </div>
  <div class="wrapper">
     <div>Позиция</div>
     <div>6</div>
     <div>Класс героя</div>
     <div>Хил</div>
     <div>Часов в игре</div>
     <div>567 часов</div>
     <div>Режим игры</div>
     <div>Аркада</div>
  </div>
</div>

Изменение количество grid

Ответы