Покажите пожалуйста как сделать этот фрагмен в HTML и CSS

Question

У меня не получаеться сделать этот фрагмент. Я всё делаю через грид так что это тоже хотел сделать так, но что то не выходит.

А вот что у меня получилось

Покажите пожалуйста как мне сделать это чтобы было как надо.

Answer 1

Ну как вариант на flex.

.category-block-flex {
  display: flex;
}

.category-block {
  display: block;
  background-color: #1a1716;
  color: white;
  padding: 15px 25px;
  font-family: "Arial";
  margin: 10px;
}

<div class="category-blocks">
<div class="category-block-flex">
    <div class="category-block">
        часы
    </div>
    <div class="category-block">
        браслеты
    </div>
    <div class="category-block">
        ремни
    </div>
</div>
<div class="category-block-flex">
    <div class="category-block">
        ювелирные изделия
    </div>
    <div class="category-block">
        запонки
    </div>
</div>
</div>

Answer 2

Вот так правильнее, по ширине согласно макета:

.category-block-flex {
  display: flex;
  justify-content: space-between;
  max-width:380px;
  flex-wrap:wrap;
}

.category-block {
  background-color: #1a1716;
  color: white;
  padding: 15px 25px;
  font-family: "Arial";
  margin: 10px;
}

<div class="category-blocks">
<div class="category-block-flex">
    <div class="category-block">
        часы
    </div>
    <div class="category-block">
        браслеты
    </div>
    <div class="category-block">
        ремни
    </div>
    <div class="category-block">
        ювелирные изделия
    </div>
    <div class="category-block">
        запонки
    </div>
</div>
</div>

БЛОГ НА HUSL

Покажите пожалуйста как сделать этот фрагмен в HTML и CSS

Ответы (2 шт):