将项目分成两列CSS网格

Question

是否有办法通过CSS网格实现以下功能?

1. 如果项数为奇数，则第一列应比第二列多1行。

1 4
2 5
3

2. 如果项数为偶数，则各列的行数应相同

1 3 
2 4

尝试使用grid-template-rows，但每列的行数是固定的。

Answer 1

更新:增加了两个如何通过HTML/CSS处理它的选项。那么使用grid呢?有3个选项，如何做到:

1. 使用默认的物品顺序;
2. 使用CSS变量，你可以在其中定义行号来中断;
3. 使用附加类，添加到子项目，之后它的链接将转到下一列;

/* Option-1. Default */
.container {
display: grid;
grid-template-columns: repeat(2, minmax(50px, 1fr));
grid-gap: 1rem;
width: fit-content;
}
.container > div {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background-color: var(--color, tomato);
aspect-ratio: 1/1;
}
/* End of Option-1. */
/* Option-2. With additional class */
.container--with-break {
grid-auto-flow: column;
}
.container--with-break > div {
grid-column: 1;
}
.container--with-break > .break ~ div {
grid-column: 2;
}
/* End of Option-2. */
/* Option-3. With CSS variable */
.container--with-break-row {
grid-auto-flow: column;
grid-template-rows: repeat(var(--break-row), 1fr);
}
/* End of Option-3. */
/* Example stylings */
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 2rem;
align-items: start;
width: fit-content;
}
hr {
margin-top: 2rem;
margin-bottom: 2rem;
}
/* End of Ex. stylings */

<p>Option with default order</p>
<div class="wrapper">
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<hr />
<p>Option with changing order. Using CSS variables</p>
<div 
class="wrapper"
style="--color: mediumturquoise;"
>
<div 
class="container container--with-break-row"
style="--break-row: 3;"
>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

<div 
class="container container--with-break-row"
style="--break-row: 2;"
>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

<div 
class="container container--with-break-row"
style="--break-row: 3;"
>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>

<div 
class="container container--with-break-row"
style="--break-row: 4;"
>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</div>
<hr />
<p>Option with changing order. Using additional class to child item</p>
<div 
class="wrapper"
style="--color: mediumpurple;"
>
<div class="container container--with-break">
<div>1</div>
<div>2</div>
<div class="break">3</div>
<div>4</div>
<div>5</div>
</div>

<div class="container container--with-break">
<div>1</div>
<div class="break">2</div>
<div>3</div>
<div>4</div>
</div>
</div>

Answer 2

简化Yaro的回答:

<div style="display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, 1fr)">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

是你所需要的。这将导致条目如下:

1    4
2    5
3

不是

1    2
3    4
5

因为我们用repeat(3, 1fr)把它分成3行。

Answer 3

如果条目数总是为4或5，则可以执行以下操作:

.container {
display: grid;
grid-gap: 1rem;
grid-auto-flow: column;
grid-template-rows: repeat(2, 1fr);
grid-auto-rows: 1fr;
justify-content: start;
margin: 10px;
border: 2px solid red;
}
.container>div {
background-color: lightblue;
padding: 20px;
}
/* create the extro row for the case of odd items */
.container>div:nth-child(3):nth-last-child(odd) {
grid-row: 3;
}

<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

对于一般情况，如

.container {
display: grid;
grid-gap: 1rem;
grid-template-rows: repeat(2, 1fr);
grid-auto-rows: 1fr;
grid-auto-flow: dense; /* you need this */
justify-content: start;
margin: 10px;
border: 2px solid red;
}
.container>div {
background-color: lightblue;
padding: 10px;
}
/* create the extro row for the case of odd items */
.container>div:nth-child(3):nth-last-child(odd) {
grid-row: 3;
}
/* all odd items counting from the end at the second row*/
.container > div:nth-last-child(odd) {
grid-row: 2;
}
/* the first and second item should never change*/
.container > div:first-child {
grid-row: 1;
}
.container > div:nth-child(2) {
grid-row: 2;
}

<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>

Answer 4

网格的功劳归@YaroslavTrach，但HTML元素的顺序可以通过将元素分成两个数组，然后在渲染时在它们之间交替来实现。

const elements = [ 1, 2, 3, 4, 5 ];
const half = Math.ceil(elements.length / 2);
const firstHalf = elements.slice(0, half);
const secondHalf = elements.slice(-half + 1);
const toDiv = (i) => i ? `<div>${i}</div>` : ``;
document.getElementById('container').innerHTML = `
${firstHalf.map((el, id) => toDiv(el) + toDiv(secondHalf[id])).join('')}
`;

#container {
display: grid;
grid-template-columns: repeat(2, minmax(50px, 1fr));
grid-gap: 1rem;
width: fit-content;
}
#container>div {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background-color: tomato;
aspect-ratio: 1/1;
}

<div id="container">
</div>