I have HTML that is outside of my control, and I am trying to use a CSS grid to reverse the elements using CSS grid.
I am specifying grid-template-rows: 1fr, but for some reason, there are 2 rows with 3 columns each instead of 1 row with 3 columns.
.grid-container {
border: 10px solid red;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
}
.item-1 {
grid-column: 3;
border: 1px solid blue;
}
.item-2 {
grid-column: 2;
border: 1px solid cyan;
}
.item-3 {
grid-column: 1;
border: 1px solid green;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div class="grid-container">
<div class="item-1">One</div>
<div class="item-2">Two</div>
<div class="item-3">Three</div>
</div>
</body>
</html>0
Just telling the items which column to be in does not stop the natural flow. You have to specify which row you want them in too.
.grid-container {
border: 10px solid red;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
}
.grid-container * {
grid-row:1;
}
.item-1 {
grid-column: 3;
border: 1px solid blue;
}
.item-2 {
grid-column: 2;
border: 1px solid cyan;
}
.item-3 {
grid-column: 1;
border: 1px solid green;
} <div class="grid-container">
<div class="item-1">One</div>
<div class="item-2">Two</div>
<div class="item-3">Three</div>
</div>Alternatively, you can tell the grid to fill in the gaps with grid-auto-flow: dense.
.grid-container {
border: 10px solid red;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-auto-flow: dense;
}
.item-1 {
grid-column: 3;
border: 1px solid blue;
}
.item-2 {
grid-column: 2;
border: 1px solid cyan;
}
.item-3 {
grid-column: 1;
border: 1px solid green;
}<div class="grid-container">
<div class="item-1">One</div>
<div class="item-2">Two</div>
<div class="item-3">Three</div>
</div>
What you want is more suitable using the order property plus you can use negative values to keep an easy indexing in case you want to generate the code.
.grid-container {
border: 10px solid red;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.item-1 {
border: 1px solid blue;
order: -1;
}
.item-2 {
border: 1px solid cyan;
order: -2;
}
.item-3 {
border: 1px solid green;
order: -3;
}<div class="grid-container">
<div class="item-1">One</div>
<div class="item-2">Two</div>
<div class="item-3">Three</div>
</div>