To change the order of columns in CSS Grid Layout, you can use the grid-template-columns
property along with the grid-template-areas
and grid-column
properties.
grid-template-columns
and grid-template-rows
properties..grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
}
grid-template-areas
property to define the template areas for your grid. Here, we're defining three columns with the areas left
, center
, and right
..grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"left center right";
}
grid-area
property to position items within the grid. Here, we're positioning an item with grid-column: 3/4
to the right
template area..item {
grid-area: right;
grid-column: 3/4;
}
order
property to change the order of the columns. Here, we're setting order: 3
on the left
template area to move it to the end of the grid..grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"center right left";
}
.left {
order: 3;
}
This will move the items in the left
area to be displayed at the end, and the center
area to be displayed in the beginning.
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
Asked: 2023-07-19 02:23:19 +0000
Seen: 11 times
Last updated: Jul 19 '23
Why is there a delay in reflecting a change when using the useState set method?
How to change the default keyboard shortcuts in Ace Editor?
How can the Arrow buttons be modified in the Slick slider?
When returning to HTML, does the null data in Ajax change to a different value?
How to change a Bitstring into an integer in Vertica?
How to change the data types of columns within a DataFrame using Polars?
How can we change a column of type String into JSON format in AWS Athena?
Is it possible to change an embedded Hibernate entity to be mandatory?