0

Возможно ли сделать выравнивание типа justify-content: space-between; (flexbox/grid), но при этом чтобы по высоте автоматически выставлялся аналогичный отступ между элементами и при этом последние элементы выравнивались в порядке очереди а не растягивались по всей ширине.

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

1 ответ 1

1

Может то что вы искали

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

body {
    font-family: Arial, Helvetica, sans-serif;
}
.container {
    max-width: 1200px;
    height: auto;
    background-color: whitesmoke;
    margin: 0 auto;
    gap: 40px;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fill, 200px);
}

.box {
    max-width: 200px;
    height: 200px;
    background-color: aquamarine;
}
<div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>    
</div>

2
  • Спасибо, это уже лучше чем то как я делал до этого, но всё равно здесь отступ нужно выставлять через gap для того чтобы дочерние элементы вплотную прилегали к краям родительского и при этом был равный отступ как по ширине так и по высоте блока, я думал возможно есть способ чтобы это делалось автоматически.
    – MAX GOLD
    1 июл 2022 в 13:19
  • @MAX GOLD , автоматический отступ строки нельзя задать в css, для этого надо скрипт писать с вычислениями
    – Qwerty Q
    2 июл 2022 в 4:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.