css-grid 2x2 或 2x3 布局,取决于项目数量
css-grid 2x2 or 2x3 layout, depending on number of items
考虑一个项目数量可变的时间表,项目数量在 1 到 6 之间。
如果有 1 - 4 个项目,它们应该覆盖 2x2 布局,例如:
ONE TWO
THREE FOUR
如果有 5 - 6 个项目,它们应该覆盖 2x3 布局,例如:
ONE TWO THREE
FOUR FIVE SIX
但是我需要以编程方式将 x22
或 x23
类 应用于项目,具体取决于项目的数量。我更喜欢在我的模板中不需要额外逻辑的解决方案。
.grid {
border: 1px solid gray;
width: 400px;
height: 200px;
grid-gap: 5px;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 50%);
overflow: hidden;
}
.grid .x22,
.grid .x23 {
background-color: #1c1c1c;
color: white;
font-weight: bold;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.grid .x22 {
grid-column: span 3;
}
.grid .x23 {
grid-column: span 2;
}
<h2>2x3</h2>
<div class="grid">
<div class="x23">first</div>
<div class="x23">second</div>
<div class="x23">third</div>
<div class="x23">fourth</div>
<div class="x23">fifth</div>
<div class="x23">sixth</div>
</div>
<h2>2x2</h2>
<div class="grid">
<div class="x22">first</div>
<div class="x22">second</div>
<div class="x22">third</div>
<div class="x22">fourth</div>
</div>
如果不使用 Javascript,您可以使用 Flexbox
和几个 quantity queries 在纯 CSS
中实现此行为,以了解您有多少 children .
标记
<section>
<div>1</div>
...
<div>6</div>
</section>
<section>
<div>1</div>
...
<div>5</div>
</section>
<section>
<div>1</div>
...
<div>4</div>
</section>
CSS
section {
margin-bottom: 4rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between; }
/* by default assign flex-basis to 49.75% (2 boxes per row)
* the gap between box is .5%
*/
div {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 49.75%;
margin-bottom: .5%; }
/* if parent element contains at maximum 5 or 6 children we set their
* flex-basis to 33% (3 boxes per row, gap is still .5%)
*/
div:nth-last-child(n+5):first-child,
div:nth-last-child(n+5):first-child ~ *,
div:nth-last-child(n+6):first-child,
div:nth-last-child(n+6):first-child ~ * {
flex-basis: 33%; }
/* since we're setting space-around to `justify-content` we need to
* remove the extra space on the last row when we have exactly 5
* children, by adjusting the margin on the last child
*/
div:nth-child(5):last-child {
margin-right: auto;
margin-left: .5%; }
最终结果
您将需要使用 querySelectorAll
查找网格项目的数量,然后您可以 运行 循环以根据元素数量添加所需的 class。
堆栈片段
var div = document.querySelectorAll(".grid div");
for (let i = 0; i < div.length; i++) {
div.length <= 4 ? div[i].classList.add("x22") : div[i].classList.add("x23")
}
.grid {
border: 1px solid gray;
width: 400px;
height: 200px;
grid-gap: 5px;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 50%);
overflow: hidden;
}
.grid .x22,
.grid .x23 {
background-color: #1c1c1c;
color: white;
font-weight: bold;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.grid .x22 {
grid-column: span 3;
}
.grid .x23 {
grid-column: span 2;
}
<div class="grid">
<div>first</div>
<div>second</div>
<div>third</div>
<div>fourth</div>
</div>
考虑一个项目数量可变的时间表,项目数量在 1 到 6 之间。 如果有 1 - 4 个项目,它们应该覆盖 2x2 布局,例如:
ONE TWO
THREE FOUR
如果有 5 - 6 个项目,它们应该覆盖 2x3 布局,例如:
ONE TWO THREE
FOUR FIVE SIX
但是我需要以编程方式将 x22
或 x23
类 应用于项目,具体取决于项目的数量。我更喜欢在我的模板中不需要额外逻辑的解决方案。
.grid {
border: 1px solid gray;
width: 400px;
height: 200px;
grid-gap: 5px;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 50%);
overflow: hidden;
}
.grid .x22,
.grid .x23 {
background-color: #1c1c1c;
color: white;
font-weight: bold;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.grid .x22 {
grid-column: span 3;
}
.grid .x23 {
grid-column: span 2;
}
<h2>2x3</h2>
<div class="grid">
<div class="x23">first</div>
<div class="x23">second</div>
<div class="x23">third</div>
<div class="x23">fourth</div>
<div class="x23">fifth</div>
<div class="x23">sixth</div>
</div>
<h2>2x2</h2>
<div class="grid">
<div class="x22">first</div>
<div class="x22">second</div>
<div class="x22">third</div>
<div class="x22">fourth</div>
</div>
如果不使用 Javascript,您可以使用 Flexbox
和几个 quantity queries 在纯 CSS
中实现此行为,以了解您有多少 children .
标记
<section>
<div>1</div>
...
<div>6</div>
</section>
<section>
<div>1</div>
...
<div>5</div>
</section>
<section>
<div>1</div>
...
<div>4</div>
</section>
CSS
section {
margin-bottom: 4rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between; }
/* by default assign flex-basis to 49.75% (2 boxes per row)
* the gap between box is .5%
*/
div {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 49.75%;
margin-bottom: .5%; }
/* if parent element contains at maximum 5 or 6 children we set their
* flex-basis to 33% (3 boxes per row, gap is still .5%)
*/
div:nth-last-child(n+5):first-child,
div:nth-last-child(n+5):first-child ~ *,
div:nth-last-child(n+6):first-child,
div:nth-last-child(n+6):first-child ~ * {
flex-basis: 33%; }
/* since we're setting space-around to `justify-content` we need to
* remove the extra space on the last row when we have exactly 5
* children, by adjusting the margin on the last child
*/
div:nth-child(5):last-child {
margin-right: auto;
margin-left: .5%; }
最终结果
您将需要使用 querySelectorAll
查找网格项目的数量,然后您可以 运行 循环以根据元素数量添加所需的 class。
堆栈片段
var div = document.querySelectorAll(".grid div");
for (let i = 0; i < div.length; i++) {
div.length <= 4 ? div[i].classList.add("x22") : div[i].classList.add("x23")
}
.grid {
border: 1px solid gray;
width: 400px;
height: 200px;
grid-gap: 5px;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 50%);
overflow: hidden;
}
.grid .x22,
.grid .x23 {
background-color: #1c1c1c;
color: white;
font-weight: bold;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.grid .x22 {
grid-column: span 3;
}
.grid .x23 {
grid-column: span 2;
}
<div class="grid">
<div>first</div>
<div>second</div>
<div>third</div>
<div>fourth</div>
</div>