Как сверстать такую корзину на flex или grid?

Конечно! Для сверстывания корзины с использованием flexbox или grid вы можете использовать следующий подход.

1. Настройка HTML-разметки:

<div class="cart-container">
  <div class="cart-header">
    <h2>Корзина</h2>
  </div>
  <div class="cart-items">
    <!-- Вставьте элементы товара здесь -->
  </div>
  <div class="cart-total">
    <!-- Вставьте сумму заказа и кнопку оформления здесь -->
  </div>
</div>

2. CSS-стилизация с использованием flexbox:

.cart-container {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 10px;
}

.cart-header {
  padding: 10px;
  background-color: #f2f2f2;
}

.cart-items {
  flex-grow: 1;
  overflow-y: auto;
}

.cart-total {
  padding: 10px;
  background-color: #f2f2f2;
}

3. CSS-стилизация с использованием grid:

.cart-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid #ccc;
  padding: 10px;
}

.cart-header {
  padding: 10px;
  background-color: #f2f2f2;
}

.cart-items {
  overflow-y: auto;
}

.cart-total {
  padding: 10px;
  background-color: #f2f2f2;
}

Оба подхода создают контейнер корзины (cart-container), который содержит заголовок (cart-header), список товаров (cart-items) и общую сумму заказа (cart-total).

С использованием flexbox (display: flex) мы устанавливаем вертикальное направление основной оси (flex-direction: column). Это означает, что элементы будут располагаться вертикально друг под другом. Свойство flex-grow: 1 указывает, что элементы списка товаров должны занимать все доступное вертикальное пространство.

С использованием grid (display: grid) мы задаем сетку с помощью свойства grid-template-rows: auto 1fr auto. Это означает, что первая и третья строки должны автоматически регулироваться по содержимому (auto), а вторая строка должна разрастаться на все доступное вертикальное пространство (1fr).

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