0

Нужно растянуть блоки .card на всю ширину родительского блока .container и при этом нужно, что бы они так же были по 2 блока в строку.

https://codepen.io/realHikkan/pen/qBaBjwz?editors=1100

1
  • так каждый блок у вас должен быть 50% от родительского блока и тогда влезет 2 блока в строке или 100% и тогда влезет 1 блок в строке. Что именно надо получить?
    – Zhihar
    27 ноя 2020 в 9:55

2 ответа 2

1

Вам нужен свойство box-sizing: border-box http://htmlbook.ru/css/box-sizing

.container {
   width: 100%;
   max-width: 1300px;
   min-width: 768px;
   box-sizing: 'border-box'
}

.card {
   width: calc(50% - 60px);
   padding: 30px 20px;
   border: 1px solid #d5d4d4;
   margin-bottom: 20px;
}

.card:nth-child(even) {
   margin-left: 10px;
}

.card:nth-child(odd) {
   margin-right: 10px;
}
1

предлагаю как вариант ознакомиться с css-grid. С его помощью легко верстать такие блоки. С его помощью можно верстать сразу адаптивные блоки без использования медиа запросов

.parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 30px;
}

.card {
  padding: 30px 20px;
  border: 1px solid #d5d4d4;
}
<div class="parent">
  <article class="card">
    <h3 class="card__title">Даже сам Мозгов не справится с магией «Орландо»</h3>
    <div class="card__description">
      <p>Даже сам Мозгов не справится с магией «Орландо»</p>
    </div>
  </article>
  <article class="card">
    <h3 class="card__title">9 серьёзных тренеров, которые хотят работать в КХЛ. Но нет мест</h3>
    <div class="card__description">
      <p>А что будет, когда количество клубов в КХЛ сократится до 24? И это ещё без учёта Вячеслава Быкова.</p>
    </div>
  </article>
  <article class="card">
    <h3 class="card__title">«Почему все такие грустные? Из-за того что «Зенит» на втором месте?»</h3>
    <div class="card__description">
      <p>Уткин возмущён игрой «Зенита», а Сёмин недоумевает, почему все такие грустные – в лучших фразах 14-го тура РФПЛ!</p>
    </div>
  </article>
  <article class="card">
    <h3 class="card__title">Забег без границ: бежим в поддержку паралимпийцев</h3>
    <div class="card__description">
      <p>В Москве пройдёт единственный в России официальный забег в поддержку спортсменов-инвалидов страны «Паралимпийский сезон».</p>
    </div>
  </article>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.