Я пытаюсь быстро показать список элементов на всех размерах экрана.Я проиллюстрирую именно то, что имею в виду:
# on a screen with enough real estate to fit all items:
[ 1 2 3 4 5 6 7 8 ]
# on a screen that can fit 4 to 7 items:
[ 1 2 3 4 ]
[ 5 6 7 8 ]
# on a screen that can only fit 3 items:
[ 1 2 3 ]
[ 4 5 6 ]
[ 7 8 ]
# OR better
[ 1 2 3 ]
[ 4 5 6 ]
[ 7 8 ]
И так далее, и тому подобное.
Я пытался добиться этого, используя flexbox: flex-flow: row wrap и используя grid: grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); но не смотря ни на что, результат примерно такой:
# Using flex box
[ 1 2 3 4 5 6 ]
[ 7 8 ]
# Using grid
[ 1 2 3 4 5 6 ]
[ 7 8 ]
Можете ли вы, ребята, придумать решение ??Спасибо
РЕДАКТИРОВАТЬ Вот фрагмент для самых любопытных.Обратите внимание, что для полного понимания того, что я имею в виду, измените размер окна, чтобы 5 и только 5 элементов помещались в один ряд.В этих двух примерах первая строка содержит 5 столбцов, вторая строка содержит 3 столбца.Я хочу иметь 4 и 4 столбца, пока 5 элементов помещаются в первый ряд.
div.using-flex ul {
background: #fc0;
display: flex;
flex-direction: row;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
padding: 10px;
margin: 0;
}
div.using-flex li {
background: rgba(120, 0, 200, 0.5);
list-style: none;
flex: 1;
margin: 4px;
line-height: 40px;
text-align: center;
border-radius: 7px;
min-width: 80px;
}
div.using-grid ul {
background: #fc0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
padding: 10px;
margin: 20px 0;
}
div.using-grid li {
background: tomato;
list-style: none;
flex: 1;
margin: 4px;
line-height: 40px;
text-align: center;
border-radius: 7px;
min-width: 80px;
}
<body>
<div class="using-flex">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
<li>Item8</li>
</ul>
</div>
<div class="using-grid">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
<li>Item8</li>
</ul>
</div>
</body>