Как умещать по 2 элемента, а не по 1 на различных устройствах?

Question

Всем привет! Делаю себе сайт, используя фреймворк Bootstrap, и думаю, как добавить гибкость сайта к разным девайсам.

Здесь всё хорошо

А это на некоторых планшетах, и при масштабировании

Код:

   .wrapper-1 {
  display: inline-block;
  align-items: center;
  min-width: 400px;
  height: 230px;
  width: 400px;
  margin: 10px;
  transition: 0.5s;
  transition-property: all;
  border-radius: 5px;
  background-color: #25252e;
  padding-top: 15px;
  box-shadow: 1px 1px 5px black;
}
.wrapper-1:hover {
  background-color: #2c2d40;
  transition: 0.6s;
}
.middle-text {
  position: absolute;
  top: 53%;
  left: 53%;
  transform: translate(-53%, -53%);
  z-index: 10;
  width: 100%;
}

<section>
              <div class="wrapper-1" style="position: relative;">
                <div class="middle-text">
                <h1>Изменение префикса</h1>
                <p>Если Вам не нравится стандартный префикс бота, то Вы всегда можете его изменить на свой без каких либо проблем!</p>
                </div>
              </div>
              <div class="wrapper-1" style="position: relative;">
                <div class="middle-text">
                <h1>Поиск двойников</h1>
                <p>С помощью Джегги Вы можете поискать пользователей-двойников с Вашим дискриминатором!</p>
                </div>
              </div>
              <div class="wrapper-1" style="position: relative;">
                <div class="middle-text">
                <h1>Множество животных</h1>
                <p>Если Вы любитель посмотреть картинки различных животных, то Джегги Вам в этом тоже поможет!</p>
                </div>
              </div>
            </section>
            <section>
              <div class="wrapper-1" style="position: relative;">
                <div class="middle-text">
                <h1>Модерация</h1>
                <p>С помощью Джегги Вы можете четко и точно модерировать свой сервер, с командами предупреждений, мутов!</p>
                </div>
              </div>
              <div class="wrapper-1" style="position: relative;">
                <div class="middle-text">
                <h1>Переводчик</h1>
                <p>Вы можете не выходя из дискорда перевести нужный Вам текст при помощи Джегги и команды translate!</p>
                </div>
              </div>
              <div class="wrapper-1" style="position: relative;">
                <div class="middle-text">
                <h1>Каналы для команд</h1>
                <p>Вы можете добавить каналы для команд, чтобы Джегги могла писать именно в нужные Вам каналы!</p>
                </div>
              </div>
            </section>

Answer 1

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1000px;
  display: block;
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
}

section {
  padding: 40px 0;
}

.card__container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.card__item {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px;
  border-radius: 5px;
  color: white;
  background-color: #25252e;
  box-shadow: 1px 1px 5px black;
  transition: background-color 0.2s ease-in-out;
}

.card__item:hover {
  background-color: #2c2d40;
}

/* Обратиться ко всем элементам на первой уровне вложенности внутри .card__text и у них найти соседей, которые идут следующими */
.card__text > * + * { 
  margin-top: 10px;
}

@media (max-width: 900px) {
  /* Если размер экрана меньше 900px применить эти стили */
  .card__container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 500px) {
  /* Если размер экрана меньше 500px применить эти стили */
  .card__container {
    grid-template-columns: 1fr;
  }
}

<section>
  <div class="container">

    <div class="card__container">
    
      <div class="card__item">
        <div class="card__text">
          <h1>Изменение префикса</h1>
          <p>
            Если Вам не нравится стандартный префикс бота, то Вы всегда можете его изменить на свой без каких либо проблем!
          </p>
        </div>
      </div>
      
      <div class="card__item">
        <div class="card__text">
          <h1>Поиск двойников</h1>
          <p>
            С помощью Джегги Вы можете поискать пользователей-двойников с Вашим дискриминатором!
          </p>
        </div>
      </div>
      
      <div class="card__item">
        <div class="card__text">
          <h1>Множество животных</h1>
          <p>
            Если Вы любитель посмотреть картинки различных животных, то Джегги Вам в этом тоже поможет!
          </p>
        </div>
      </div>
      
      <div class="card__item">
        <div class="card__text">
          <h1>Модерация</h1>
          <p>
            С помощью Джегги Вы можете четко и точно модерировать свой сервер, с командами предупреждений, мутов!
          </p>
        </div>
      </div>
      
      <div class="card__item">
        <div class="card__text">
          <h1>Переводчик</h1>
          <p>
            Вы можете не выходя из дискорда перевести нужный Вам текст при помощи Джегги и команды translate!
          </p>
        </div>
      </div>
      
      <div class="card__item">
        <div class="card__text">
          <h1>Каналы для команд</h1>
          <p>
            Вы можете добавить каналы для команд, чтобы Джегги могла писать именно в нужные Вам каналы!
          </p>
        </div>
      </div>
      
    </div> <!-- .card__container -->
    
  </div> <!-- .container -->
</section>

БЛОГ НА HUSL

Как умещать по 2 элемента, а не по 1 на различных устройствах?

Ответы (1 шт):