Блоки одинаковой ширины в несколько столбцов

Question

Необходимо расположить блоки в несколько столбцов, при этом ширина блоков должна быть одинаковой, а количество столбцов выбираться автоматически в зависимости от ширины окна браузера. Пытался использовать CSS Grid, но там необходимо указывать минимальную ширину блока в абсолютных единицах, а проблема как раз и состоит в том что минимальная ширина неизвестна. С запасом ширину указывать тоже нельзя, т.к. она может варьироваться в весьма широких пределах. Есть ли вариант решения данной задачи чтобы ширина всех столбцов выбиралась как максимальная ширина блока? Желательно решить задачу без использования JS.

body {
    display: grid;
    grid-gap: 0.25em;
    grid-template-columns: repeat(auto-fit, 10em);
}

.card {
    padding: 0.5em;
    border: 1px solid #faa;
}

<div class="card">Карточка №0</div>
<div class="card">Карточка №1</div>
<div class="card">Карточка №2</div>
<div class="card">Карточка №3</div>
<div class="card">Карточка №4</div>
<div class="card">Карточка №5</div>
<div class="card">Карточка №6</div>
<div class="card">Карточка №7</div>
<div class="card">Карточка №8</div>
<div class="card">Карточка №9</div>
<div class="card">Карточка №10</div>
<div class="card">Карточка №11</div>
<div class="card">Карточка №12</div>
<div class="card">Карточка №13</div>
<div class="card">Карточка №14</div>
<div class="card">Карточка №15</div>
<div class="card">Карточка №16</div>
<div class="card">Карточка №17</div>
<div class="card">Карточка №18</div>
<div class="card">Карточка №19</div>
<div class="card">Карточка №20</div>
<div class="card">Карточка №21</div>
<div class="card">Карточка №22</div>
<div class="card">Карточка №23</div>
<div class="card">Карточка №24</div>
<div class="card">Карточка №25</div>
<div class="card">Карточка №26</div>
<div class="card">Карточка №27</div>
<div class="card">Карточка №28</div>
<div class="card">Карточка №29</div>

БЛОГ НА HUSL

Блоки одинаковой ширины в несколько столбцов

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