html怎么调整网格的位置,html – 更改css网格中的列顺序

网格布局提供了多种重新排列网格项的方法.我在下面列出了三个.

这是原始布局：

grid-container {

display: grid;

grid-template-columns: 15% 1fr 25%;

grid-auto-rows: 50px; /* for demo */

grid-gap: 10px;

}

/* non-essential decorative styles */

grid-item {

border: 1px solid gray;

background-color: lightgreen;

display: flex;

align-items: center;

justify-content: center;

}

grid-item:nth-child(2) {

background-color: orange;

}

网格模板区域

grid-template-areas属性允许您使用ASCII视觉艺术排列布局.

将网格区域名称(为每个元素定义)放置在您希望它们出现的位置.

grid-container {

display: grid;

grid-template-columns: 15% 1fr 25%;

grid-auto-rows: 50px; /* for demo */

grid-gap: 10px;

grid-template-areas: "column-1 column-2 column-3";

}

grid-item:nth-child(1) { grid-area: column-1; }

grid-item:nth-child(2) { grid-area: column-2; }

grid-item:nth-child(3) { grid-area: column-3; }

@media ( max-width: 500px ) {

grid-container {

grid-template-columns: 1fr 1fr;

grid-template-areas: " column-1 column-3 "

" column-2 column-2 ";

}

}

/* non-essential decorative styles */

grid-item {

border: 1px solid gray;

background-color: lightgreen;

display: flex;

align-items: center;

justify-content: center;

}

grid-item:nth-child(2) {

background-color: orange;

}

规格参考：

07002

This property specifies named grid areas,which are not

associated with any particular grid item,but can be referenced from

the grid-placement properties.

The Syntax of the grid-template-areas property also provides a

visualization of the structure of the grid,making the overall layout

of the grid container easier to understand.

All strings must have the same number of columns,or else the declaration is invalid.

If a named grid area spans multiple grid cells,but those cells do not form a single filled-in rectangle,the declaration is invalid.

Note: Non-rectangular or disconnected regions may be permitted in a future version of this module.

2.基于行的放置

使用grid-row-start,grid-row-end,grid-column-start,grid-column-end或它们的shorthands,grid-row和grid-column,在网格中设置网格项的大小和位置.

grid-container {

display: grid;

grid-template-columns: 15% 1fr 25%;

grid-auto-rows: 50px; /* for demo */

grid-gap: 10px;

}

@media ( max-width: 500px ) {

grid-container { grid-template-columns: 1fr 1fr; }

grid-item:nth-child(1) { grid-row: 1 / 2; grid-column: 1 / 2; }

grid-item:nth-child(2) { grid-row: 2 / 3; grid-column: 1 / 3; }

grid-item:nth-child(3) { grid-row: 1 / 2; grid-column: 2 / 3; }

}

/* non-essential decorative styles */

grid-item {

border: 1px solid gray;

background-color: lightgreen;

display: flex;

align-items: center;

justify-content: center;

}

grid-item:nth-child(2) {

background-color: orange;

}

规格参考：

07004

3.订单

Grid Layout中的order属性与Flex Layout中的相同.

grid-container {

display: grid;

grid-template-columns: 15% 1fr 25%;

grid-auto-rows: 50px; /* for demo */

grid-gap: 10px;

}

@media ( max-width: 500px ) {

grid-container { grid-template-columns: 1fr 1fr; }

grid-item:nth-child(1) { order: 1; }

grid-item:nth-child(2) { order: 3; grid-column: 1 / 3; }

grid-item:nth-child(3) { order: 2; }

}

/* non-essential decorative styles */

grid-item {

border: 1px solid gray;

background-color: lightgreen;

display: flex;

align-items: center;

justify-content: center;

}

grid-item:nth-child(2) {

background-color: orange;

}

规格参考：

07006