Ask Your Question
0

What is the method for flipping the order of CSS grid columns?

asked 2023-04-29 23:07:47 +0000

david gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
1

answered 2023-04-29 23:24:01 +0000

plato gravatar image

To flip the order of CSS grid columns, you can use the grid-auto-flow: column property. This property changes the flow direction of grid elements along the columns, so setting it to column-reverse will flip the order of the columns.

For example, if you have a 3-column grid with items in the order of A B C, the following code will change the order to C B A:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
}

.item {
  grid-row: 1;
}

Note that you may need to adjust the positioning of items using the grid-row property if you are also flipping the order of rows.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2023-04-29 23:07:47 +0000

Seen: 11 times

Last updated: Apr 29 '23