Как правильней будет сверстать такой каталог?

Ссылка скопирована
CSS HTML PHP
20 апреля 2026 1 ответ

Как правильней будет сверстать такой каталог?

Как сверстать такой каталог? Верстаю на флексах , сколько бы не пытался - то картинка не под текстом "фото"
то сайт вообще бабахнет
Если это чем то поможет - вот код:
HTML

<main>         <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>                 <hr class="pon_hr" noshade="noshade">                 <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>

<main> <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> <hr class="pon_hr" noshade="noshade"> <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>

CSS

.pon{     font-family: 'Montserrat';     font-style: normal;     font-weight: 500;     font-size: 14px;     line-height: 17px;     color: #040628;     opacity: 0.6; } .main_cards_wrapper {     display: flex;     justify-content: center;     flex-direction: column;     flex-wrap: wrap; } .cards_pon {     display: flex;     justify-content: flex-start;     gap: 50px;     padding-bottom: 20px;     flex-wrap: wrap; } .pon_hr{     background: #003FFF;     opacity: 0.2;     width: 100%;     height: 1px;     }

.pon{ font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-size: 14px; line-height: 17px; color: #040628; opacity: 0.6; } .main_cards_wrapper { display: flex; justify-content: center; flex-direction: column; flex-wrap: wrap; } .cards_pon { display: flex; justify-content: flex-start; gap: 50px; padding-bottom: 20px; flex-wrap: wrap; } .pon_hr{ background: #003FFF; opacity: 0.2; width: 100%; height: 1px; }

Дополнительно:

Табличкой, но и можно параграфом а внутри span как ячейка

https://codepen.io/topicstarter/pen/NWOmRww - вот примерно, на скорую руку

  • "флексами" вполне комфортно такое сделать. Вы конкретно скажите что не получается.
  • Если на флексах, то вы должны задать ширину элементам флекс-контейнера, ибо в зависимости от контента, каждая последующая строчка может "поплыть".
    Если вас устроит одинаковая ширина для всех, то просто задайте дочерним элементам флекс-контейнера свойства: 
    .pon, .card_item > div {     flex-basis: 0;     flex-grow: 1; }

    .pon, .card_item > div { flex-basis: 0; flex-grow: 1; }

  • Если табличные данные верстать таблицами, то такой проблемы не будет.

    Если всё же флексами, то придется задавать ширину ячейкам.

    Если гридами, то ждать поддержки subgrid.

    Либо помогать себе на js.

  • Ankhena, без сабгридов в принципе можно грид+display:contents
  • Сергей delphinpro, ага

    • Как сверстать такой каталог?

    Таблицей, и не парится.
    Либо гриды. Флексы здесь вообще плохо вписываются.

    snippet

    • Спасибо, Сергей. Иногда мне кажется что вы Джимми Нейтрон в мире IT.
    • Levott, и почему же вы тогда не отметили ответ решением? Ну и там лайк всякий? )))
    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Максим Павлов Ответ

    Для верстки каталога на сайте можно использовать HTML, CSS и JavaScript. Ниже приведу пример кода, который поможет вам создать каталог с товарами.

    Для начала нужно создать основную структуру HTML документа, включая блок для каталога и товаров:

     
 
 
    <title>Каталог товаров</title>
 
 
 
    <div class="catalog">
        <div class="product">
            <img src="product1.jpg" alt="Product 1">
            <h3>Product 1</h3>
            <p>Description of Product 1</p>
            <button>Add to Cart</button>
        </div>
        <div class="product">
            <img src="product2.jpg" alt="Product 2">
            <h3>Product 2</h3>
            <p>Description of Product 2</p>
            <button>Add to Cart</button>
        </div>
        <!-- Добавьте сколько угодно блоков с товарами -->
    </div>

    <title>Каталог товаров</title> <div class="catalog"> <div class="product"> <img src="product1.jpg" alt="Product 1"> <h3>Product 1</h3> <p>Description of Product 1</p> <button>Add to Cart</button> </div> <div class="product"> <img src="product2.jpg" alt="Product 2"> <h3>Product 2</h3> <p>Description of Product 2</p> <button>Add to Cart</button> </div> <!-- Добавьте сколько угодно блоков с товарами --> </div>

    Затем стилизуем каталог с помощью CSS:

    .catalog {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
 
.product {
    width: 200px;
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
}
 
img {
    max-width: 100%;
    height: auto;
}
 
button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

    .catalog { display: flex; flex-wrap: wrap; justify-content: space-around; } .product { width: 200px; margin: 10px; padding: 10px; border: 1px solid #ccc; text-align: center; } img { max-width: 100%; height: auto; } button { background-color: #007bff; color: #fff; border: none; padding: 5px 10px; cursor: pointer; }

    Теперь добавим функциональность с помощью JavaScript, например, чтобы при нажатии на кнопку "Add to Cart" товар добавлялся в корзину:

    document.querySelectorAll('.product button').forEach(button =&gt; {
    button.addEventListener('click', () =&gt; {
        // Добавление товара в корзину
        alert('Product added to cart!');
    });
});

    document.querySelectorAll('.product button').forEach(button =&gt; { button.addEventListener('click', () =&gt; { // Добавление товара в корзину alert('Product added to cart!'); }); });

    Это базовый пример верстки каталога товаров на сайте. Вы можете дополнить его дополнительными стилями, анимациями, фильтрами и другими функциями в зависимости от ваших потребностей.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ