@dsntmttr

Как сделать, чтобы все блоки были одного размера?

<style>
#grid { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 2vw;
  }

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 350px;
  margin: auto;
  text-align: center;
  font-family: arial;
}

h4 {
  background: #EEEEEE;
  padding: 5px;
}
</style>

<div id="grid">

  <div class="card">
    <h4>Премьер</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2018/11/prezident-pg-492x1024.png" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: Плёнка ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Премьер ПО</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2018/11/premier-po-490x1024.png" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: Плёнка ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Президент ПО</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2018/10/prezidentpo.png" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: Плёнка ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Президент ПГ</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2018/11/prezident-pg-492x1024.png" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: Плёнка ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Парламент</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2018/11/parlament-pg-475x1024.png" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: Плёнка ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Парламент ПО</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2018/11/parlament-po-479x1024.png" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: Плёнка ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Министр</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2018/11/senator-po-488x1024.png" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: Плёнка ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Сенатор</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2018/11/ministr-po-494x1024.png" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: Плёнка ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Канцлер</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2018/11/kancler-pg-472x1024.png" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: Плёнка ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Канцлер ПО</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2018/11/kancler-po-467x1024.png" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: Плёнка ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Герцог</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2018/11/gercog-pg-478x1024.png" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: Плёнка ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Герцог ПО</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2018/11/gercog-po-460x1024.png" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: Плёнка ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Лорд</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2018/11/lider-453x1024.png" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: Плёнка ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Лидер</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2018/11/gercog-pg-478x1024.png" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: Плёнка ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Монарх</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2018/11/monarh-pg-472x1024.png" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: Плёнка ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Монарх ПО</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2018/11/monarh-po-475x1024.png" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: Плёнка ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Лондон</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2018/11/london-550x1024.png" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: Плёнка ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Лондон 2 Ампир</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2018/11/london-2-512x1024.png" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: Плёнка ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Лондон 4 Ампир</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2018/11/london-4-509x1024.png" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: Плёнка ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>

  <div class="card">
    <h4>Лондон 3 Ампир</h4>
    <img src="http://dveri-familiya.ru/wp-content/uploads/2018/11/london-3-525x1024.png" style="width:100%">
    <p>
Толщина полотна: 38 мм<br>
Покрытие: Плёнка ПВХ<br>
Конструкция: Щитовая<br>
Цены в зависимости от остекления:<br>
-Стекло черный "Лакобель"<br>
-Стекло "Мателюкс"<br>
    </p>
  </div>
</div>
  • Вопрос задан
  • 87 просмотров
Решения вопроса 1
kryamk
@kryamk
убрать у .card свойство margin: auto;
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы