Html Question posted in
Some basic documentation can be found here.

Html – grid-column adding and extra grid row when reversing the order of elements

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>
Tags:

3

Answers


  1. 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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    I know you have an accepted answer, but just for fun, another option would be to use direction: rtl.

    .grid-container {
  border: 10px solid red;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  direction: rtl;
  text-align: left;
}

.item-1 {
  border: 1px solid blue;
}

.item-2 {
  border: 1px solid cyan;
}

.item-3 {
  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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search