CodePen Embed - Grid catalog

<div class="main_text">
  <h1>Каталог автомобилей</h1>
</div>
<div class="main_cards">
  <div class="main_cards_wrapper">
    <div class="cards_pon">
      <div class="pon">Фото</div>
      <div class="pon">Марка и Модель</div>
      <div class="pon">Год</div>
      <div class="pon">Дата осмотра</div>
      <div class="pon">Госномер</div>
      <div class="pon">VIN</div>
      <div class="pon">Цена</div>
    </div>
    <div class="card_item">
      <div class="card_item_svg">
        <img src="/images/reno.svg" alt="Рено логан">
      </div>
      <div class="card_item_model">
        Renault Logan
      </div>
      <div class="card_item_year">
        2021
      </div>
      <div class="card_item_date">
        17-05-2022
      </div>
      <div class="card_item_number">
        Т931ВС790
      </div>
      <div class="card_item_vin">
        X7L4SRLTB66955553
      </div>
      <div class="card_item_price">
        от 999 000
      </div>
    </div>
    <div class="card_item">
      <div class="card_item_svg">
        <img src="/images/reno.svg" alt="Рено логан">
      </div>
      <div class="card_item_model">
        Renault Logan
      </div>
      <div class="card_item_year">
        2021
      </div>
      <div class="card_item_date">
        17-05-2022
      </div>
      <div class="card_item_number">
        Т931ВС790
      </div>
      <div class="card_item_vin">
        X7L4SRLTB66955553
      </div>
      <div class="card_item_price">
        от 999 000
      </div>
    </div>
    <div class="card_item">
      <div class="card_item_svg">
        <img src="/images/reno.svg" alt="Рено логан">
      </div>
      <div class="card_item_model">
        Renault Logan
      </div>
      <div class="card_item_year">
        2021
      </div>
      <div class="card_item_date">
        17-05-2022
      </div>
      <div class="card_item_number">
        Т931ВС790
      </div>
      <div class="card_item_vin">
        X7L4SRLTB66955553
      </div>
      <div class="card_item_price">
        от 999 000
      </div>
    </div>
    <div class="card_item">
      <div class="card_item_svg">
        <img src="/images/reno.svg" alt="Рено логан">
      </div>
      <div class="card_item_model">
        Renault Logan
      </div>
      <div class="card_item_year">
        2021
      </div>
      <div class="card_item_date">
        17-05-2022
      </div>
      <div class="card_item_number">
        Т931ВС790
      </div>
      <div class="card_item_vin">
        X7L4SRLTB66955553
      </div>
      <div class="card_item_price">
        от 999 000
      </div>
    </div>
    <div class="card_item">
      <div class="card_item_svg">
        <img src="/images/reno.svg" alt="Рено логан">
      </div>
      <div class="card_item_model">
        Renault Logan
      </div>
      <div class="card_item_year">
        2021
      </div>
      <div class="card_item_date">
        17-05-2022
      </div>
      <div class="card_item_number">
        Т931ВС790
      </div>
      <div class="card_item_vin">
        X7L4SRLTB66955553
      </div>
      <div class="card_item_price">
        от 999 000
      </div>
    </div>
    <div class="card_item">
      <div class="card_item_svg">
        <img src="/images/reno.svg" alt="Рено логан">
      </div>
      <div class="card_item_model">
        Renault Logan
      </div>
      <div class="card_item_year">
        2021
      </div>
      <div class="card_item_date">
        17-05-2022
      </div>
      <div class="card_item_number">
        Т931ВС790
      </div>
      <div class="card_item_vin">
        X7L4SRLTB66955553
      </div>
      <div class="card_item_price">
        от 999 000
      </div>
    </div>
    <div class="card_item">
      <div class="card_item_svg">
        <img src="/images/reno.svg" alt="Рено логан">
      </div>
      <div class="card_item_model">
        Renault Logan
      </div>
      <div class="card_item_year">
        2021
      </div>
      <div class="card_item_date">
        17-05-2022
      </div>
      <div class="card_item_number">
        Т931ВС790
      </div>
      <div class="card_item_vin">
        X7L4SRLTB66955553
      </div>
      <div class="card_item_price">
        от 999 000
      </div>
    </div>
    <div class="card_item">
      <div class="card_item_svg">
        <img src="/images/reno.svg" alt="Рено логан">
      </div>
      <div class="card_item_model">
        Renault Logan
      </div>
      <div class="card_item_year">
        2021
      </div>
      <div class="card_item_date">
        17-05-2022
      </div>
      <div class="card_item_number">
        Т931ВС790
      </div>
      <div class="card_item_vin">
        X7L4SRLTB66955553
      </div>
      <div class="card_item_price">
        от 999 000
      </div>
    </div>
    <div class="card_item">
      <div class="card_item_svg">
        <img src="/images/reno.svg" alt="Рено логан">
      </div>
      <div class="card_item_model">
        Renault Logan
      </div>
      <div class="card_item_year">
        2021
      </div>
      <div class="card_item_date">
        17-05-2022
      </div>
      <div class="card_item_number">
        Т931ВС790
      </div>
      <div class="card_item_vin">
        X7L4SRLTB66955553
      </div>
      <div class="card_item_price">
        от 999 000
      </div>
    </div>
    <div class="card_item">
      <div class="card_item_svg">
        <img src="/images/reno.svg" alt="Рено логан">
      </div>
      <div class="card_item_model">
        Renault Logan
      </div>
      <div class="card_item_year">
        2021
      </div>
      <div class="card_item_date">
        17-05-2022
      </div>
      <div class="card_item_number">
        Т931ВС790
      </div>
      <div class="card_item_vin">
        X7L4SRLTB66955553
      </div>
      <div class="card_item_price">
        от 999 000
      </div>
    </div>
    <div class="card_item">
      <div class="card_item_svg">
        <img src="/images/reno.svg" alt="Рено логан">
      </div>
      <div class="card_item_model">
        Renault Logan
      </div>
      <div class="card_item_year">
        2021
      </div>
      <div class="card_item_date">
        17-05-2022
      </div>
      <div class="card_item_number">
        Т931ВС790
      </div>
      <div class="card_item_vin">
        X7L4SRLTB66955553
      </div>
      <div class="card_item_price">
        от 999 000
      </div>
    </div>
    <div class="card_item">
      <div class="card_item_svg">
        <img src="/images/reno.svg" alt="Рено логан">
      </div>
      <div class="card_item_model">
        Renault Logan
      </div>
      <div class="card_item_year">
        2021
      </div>
      <div class="card_item_date">
        17-05-2022
      </div>
      <div class="card_item_number">
        Т931ВС790
      </div>
      <div class="card_item_vin">
        X7L4SRLTB66955553
      </div>
      <div class="card_item_price">
        от 999 000
      </div>
    </div>
  </div>
</div>

.main_cards_wrapper {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cards_pon,
.card_item {
  display: contents;
}
.card_item > *{
  padding: 0.5rem;
}

.pon {
  padding: 0.5rem;
  border-bottom: 2px solid;
}

This Pen is owned by Sergey on CodePen.

See more by @delphinpro on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.