Как сверстать такую корзину на flex или grid?
Есть такая корзина, сверху подписи
Фото, Наименование и т.д.
Пример сверстан на table, думал как на флексах сделать, но как сделать чтоб верхние блоки при адаптиве сжимались синхронно с блоками корзины?
Дополнительно:
это таблица. Незачем ее переделывать на дивы.
Пример сверстан на table, думал как на флексах сделать, но как сделать чтоб верхние блоки при адаптиве сжимались синхронно с блоками корзины?
Согласен с комментом выше, что лучше пусть будет реализовано с помощью table. Если все же хотите флексы/гриды, то придется задавать относительные размеры ячеек в процентах например. Тогда все будет сжиматься как надо.
Это табличные данные. Соответственно, лучше всего их верстать таблицей.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания корзины на flex или grid можно использовать следующий подход:
1. Начнем с HTML разметки, где создадим контейнер для корзины и элементы внутри этого контейнера:
<div class="cart-container"> <div class="item">Product 1</div> <div class="item">Product 2</div> <div class="item">Product 3</div> </div><div class="cart-container"> <div class="item">Product 1</div> <div class="item">Product 2</div> <div class="item">Product 3</div> </div>
2. Теперь добавим стили с использованием flexbox:
.cart-container { display: flex; flex-direction: column; border: 1px solid #ccc; padding: 10px; } .item { padding: 5px; border-bottom: 1px solid #ccc; }
В данном примере у нас создается вертикальная корзина, где каждый элемент будет отображаться один под другим.
3. Для использования grid вместо flexbox, стили будут выглядеть следующим образом:
.cart-container { display: grid; grid-template-columns: 1fr; border: 1px solid #ccc; padding: 10px; } .item { padding: 5px; border-bottom: 1px solid #ccc; }
Теперь элементы будут распределяться в одной колонке, как и в случае с flexbox.
4. Если вы хотите создать горизонтальную корзину, то для flexbox стили будут следующими:
.cart-container { display: flex; border: 1px solid #ccc; padding: 10px; } .item { padding: 5px; border-right: 1px solid #ccc; } .item:last-child { border-right: none; }
Для grid варианта:
.cart-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); border: 1px solid #ccc; padding: 10px; } .item { padding: 5px; border-right: 1px solid #ccc; } .item:last-child { border-right: none; }
Теперь вы можете выбрать подход, который лучше всего подходит для вашего дизайна. Не забудьте также добавить дополнительные стили для украшения и оформления вашей корзины.