如何解决如何使用 CSS 网格重新排序列?
我如何使用 CSS 网格并通过 CSS 设置列的顺序。
使用 CSS 网格的 3x3 网格示例
.grid {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 1px;
}
.grid>* {
background: orange;
}
<div class="grid">
<div class="fruit">Apple</div>
<div class="color">Red</div>
<div class="cost">$1.00</div>
<div class="fruit">Banana</div>
<div class="color">Yellow</div>
<div class="cost">$1.20</div>
<div class="fruit">Lime</div>
<div class="color">Green</div>
<div class="cost">$0.75</div>
</div>
但是,如果我尝试使用 grid-column 更改列的顺序,则自动布局会失败
.grid {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 1px;
grid-template-areas: "column-1 column-2 column-3";
}
.grid>* {
background: orange;
}
.fruit { grid-column: 3 / 4; }
.color { grid-column: 2 / 3; }
.cost { grid-column: 1 / 2; }
<div class="grid">
<div class="fruit">Apple</div>
<div class="color">Red</div>
<div class="cost">$1.00</div>
<div class="fruit">Banana</div>
<div class="color">Yellow</div>
<div class="cost">$1.20</div>
<div class="fruit">Lime</div>
<div class="color">Green</div>
<div class="cost">$0.75</div>
</div>
我尝试使用 order
.grid {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 1px;
}
.grid>* {
background: orange;
}
.fruit { order: 3; }
.color { order: 2; }
.cost { order: 1; }
<div class="grid">
<div class="fruit">Apple</div>
<div class="color">Red</div>
<div class="cost">$1.00</div>
<div class="fruit">Banana</div>
<div class="color">Yellow</div>
<div class="cost">$1.20</div>
<div class="fruit">Lime</div>
<div class="color">Green</div>
<div class="cost">$0.75</div>
</div>
行变成了列,列变成了行?
我试过这样的grid-template-areas
.grid {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 1px;
grid-template-areas: "column-1 column-2 column-3";
}
.grid>* {
background: orange;
}
.fruit { grid-area: column-3; }
.color { grid-area: column-2; }
.cost { grid-area: column-1; }
<div class="grid">
<div class="fruit">Apple</div>
<div class="color">Red</div>
<div class="cost">$1.00</div>
<div class="fruit">Banana</div>
<div class="color">Yellow</div>
<div class="cost">$1.20</div>
<div class="fruit">Lime</div>
<div class="color">Green</div>
<div class="cost">$0.75</div>
</div>
最终将所有行压缩为一行
如何更改列的顺序?
解决方法
简单如下:
.grid {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-auto-flow:dense; /* don't forget this */
grid-gap: 1px;
}
.grid>* {
background: orange;
}
/* adjust the grid-column value like you want */
.grid *:nth-child(3n + 1) { /*OR .fruit */
grid-column:2;
}
.grid *:nth-child(3n + 2) { /*OR .color */
grid-column:3;
}
.grid *:nth-child(3n + 3) { /*OR .cost */
grid-column:1;
}
<div class="grid">
<div class="fruit">Apple</div>
<div class="color">Red</div>
<div class="cost">$1.00</div>
<div class="fruit">Banana</div>
<div class="color">Yellow</div>
<div class="cost">$1.20</div>
<div class="fruit">Lime</div>
<div class="color">Green</div>
<div class="cost">$0.75</div>
</div>
您也可以像下面这样简化。您只需指定两列的位置,第三列将自动设置
.grid {
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow:dense;
grid-gap: 1px;
}
.grid>* {
background: orange;
}
.grid *:nth-child(3n + 1) {
grid-column:2;
}
.grid *:nth-child(3n + 2) {
grid-column:3;
}
<div class="grid">
<div class="fruit">Apple</div>
<div class="color">Red</div>
<div class="cost">$1.00</div>
<div class="fruit">Banana</div>
<div class="color">Yellow</div>
<div class="cost">$1.20</div>
<div class="fruit">Lime</div>
<div class="color">Green</div>
<div class="cost">$0.75</div>
</div>
就让它grid-auto-flow: column;
.grid {
display: grid;
grid-auto-flow: column;
grid-gap: 1px;
}
.grid>* {
background: orange;
}
.fruit {
grid-column: 3/4;
}
.color {
grid-column: 2/3;
}
.cost {
grid-column: 1/2;
}
<div class="grid">
<div class="fruit">Apple</div>
<div class="color">Red</div>
<div class="cost">$1.00</div>
<div class="fruit">Banana</div>
<div class="color">Yellow</div>
<div class="cost">$1.20</div>
<div class="fruit">Lime</div>
<div class="color">Green</div>
<div class="cost">$0.75</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。