Можно ли так сверстать без JS?

Question

[sorry_i_noob]

Здравствуйте.
Есть такая верстка (прикладываю изображение). Нужно сделать так, чтобы расстояние между карточками и между началом и концом контейнера, в котором они содержатся, было одинаковым (Сейчас так и есть, но только для каждой строки карточек отдельно - на второй строке расстояние больше, чем на первой. А нужно для всех строк сразу. То есть, чтобы на всех строках оно было одинаковым).
И чтобы второй ряд карточек выстроился по левому краю, а не посередине.

У родителя ширина резиновая (она меняется в зависимости от ширины окна браузера).
У карточек ширина определена. Как и высота.

Comments

[Brad9aga]

код дай

[Brad9aga]

https://jsfiddle.net

Answer 1

[Антон]

https://jsfiddle.net/7ryfvd5h/2/

Comments

[sorry_i_noob]

У вас отступ между карточками больше, чем от начала контейнера, в котором они содержатся до первой карточки в строке. Или от конца контейнера - до последней.

[Антон]

sorry_i_noob, Ааа, ваше описание было тяжело прочитать.
к list добавьте margin: 0 20px, будет одинаковое
https://jsfiddle.net/7ryfvd5h/3/

[Антон]

sorry_i_noob, по какой причине?

[sorry_i_noob]

Антон, я старую версию открыл, извиняюсь. Большое спасибо, кажется, все работает :-)

[Антон]

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

[Rustam Bainazarov]

sorry_i_noob, наверное, потому что знает, как работают свойства CSS и умеет применять их на практике?

[alex-1917]

sorry_i_noob,

Гениальное решение, как вы до него додумались?

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

[sorry_i_noob]

alex-1917, "Всё гениальное просто, и всё простое гениально."

Answer 2

[азаза]

<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

.container{width:100%; display:grid; grid-template-columns:repeat(4, 1fr); grid-gap:30px;}
.item{background:red; padding:10px;}

Comments

[sorry_i_noob]

Можно без grid?

[азаза]

sorry_i_noob,
чем грид не подходит?
https://codepen.io/natojezlo/pen/gVoZzm

можно на флексах сделать

[litash]

лучше флексы используйте пока еще

[alex-1917]

natojezlo, он его боится,я вот тоже, когда был лютым нубом,боялся грида, думал, что это какой-то чувак по типу Франкенштейна.

[alex-1917]

sorry_i_noob, Грид Евлампий Йошкаролович

Answer 3

[Andrew]

Сейчас flex и space-around?
Кроме как процентной ширины карточек и процентного margin ничего в голову не приходит

Comments

[sorry_i_noob]

space-evenly