Как это сверстать без миллиона классов?

Question

каждый элемент имеет разный паддинг, а контейнер стоит не по сетке. код не пишите, просто в общих чертах

Answer 1

Не получилось код не написать, мои общие черты вылились в код

Всё происходит, за счёт того, что есть флексовый(display: flex) контейнер .buttons, каждому элементу которого задано:

.buttons__link {
  text-align: center;
  flex: 1;
  max-width: 200px;
}

выравнивание текста по центру text-align: center, а также flex: 1, это растягивает элемент на всю доступную ширину, также для удобства можно задать max-width, чтобы ограничить максимальную ширину. Если это не указывать, то при переходе элемента на новую линию, он будет на всю ширину доступного места в линии.

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
}

.section {
  padding: 40px 0;
}

.section_grey {
  background-color: rgba(0, 0, 0, 0.05);
}

.buttons {
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn {
  --colorBtn: grey;
  text-decoration: none;
  user-select: none;
  border: 1px solid var(--colorBtn);
  padding: 7px 14px;
  border-radius: 3px;
  color: inherit;
  transition-timing-function: ease;
  transition-duration: 0.15s;
  transition-property: background-color, color;
}

.btn:hover {
  background-color: var(--colorBtn);
  color: white;
}

.buttons__link {
  text-align: center;
  flex: 1;
  max-width: 200px;
}

<section class="section section_grey">
  <div class="buttons">
    <a class="btn buttons__link" href="https://css-tricks.com/">Ссылка</a>
    <a class="btn buttons__link" href="https://css-tricks.com/">Ссылка</a>
    <a class="btn buttons__link" href="https://css-tricks.com/">Ссылка</a>
    <a class="btn buttons__link" href="https://css-tricks.com/">Ссылка</a>
    <a class="btn buttons__link" href="https://css-tricks.com/">Ссылка</a>
  </div>
</section>

БЛОГ НА HUSL

Как это сверстать без миллиона классов?

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