Creating a new grid row when changing the order of elements in the grid column arrangement

Question

Creating a new grid row when changing the order of elements in the grid column arrangement

Dealing with HTML that is not under my control, I am attempting to rearrange the elements using CSS grid.

Despite setting grid-template-rows: 1fr, the layout shows 2 rows with 3 columns each instead of a single 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>

html css

Answer 1

Answer №1

Instructing the items to be in a specific column is not sufficient to control the layout. It is necessary to also specify the row where you want them to appear.

.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 use grid-auto-flow: dense to automatically fill in any empty spaces within the grid layout.

.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>

Answer 2

Instructing the items to be in a specific column is not sufficient to control the layout. It is necessary to also specify the row where you want them to appear.

.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 use grid-auto-flow: dense to automatically fill in any empty spaces within the grid layout.

.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>

Answer 3

Answer №2

If you're looking for a solution, consider utilizing the order property along with negative values for simpler indexing when coding.

.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>

Answer 4

If you're looking for a solution, consider utilizing the order property along with negative values for simpler indexing when coding.

.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>

Answer 5

Answer №3

Although you already have a correct answer, just for amusement, another possibility could be utilizing the CSS property 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>

Answer 6

Although you already have a correct answer, just for amusement, another possibility could be utilizing the CSS property 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>

Creating a new grid row when changing the order of elements in the grid column arrangement

Answer №1

Answer №2

Answer №3

Similar questions

The Youtube Subscribe Embed feature is causing my image to lose its corners

What sets npm install apart from manual installation?

Instructions on how to toggle the visibility of a div when hovering over a different a tag

Changing the color of the active link in the navigation bar when the href is empty

Is using 'box-sizing: borderbox' enough to avoid horizontal scrolling?

Issues with Angular HTML failing to load correctly

I'm struggling to retrieve and display data from my Flask application using console log. It seems to be a challenge when combining it with

When attempting to send data using jQuery to PHP, an issue arises where PHP is unable to receive the information, resulting in an undefined variable

Executing a function every time a prop is updated within the component

the method of utilizing JavaScript to showcase an HTML form

Add() function is not duplicating the formatting

"Eliminated the navigation bar - looking for a way to get rid of the extra

D3 and Select struggling to conform to HTML layout

Pair of buttons triggering the submission of a form

Angular Square Grid Design

Learn how to utilize Jquery to create a dynamic slide effect that toggles the

Is there a way to prompt the native browser message for HTML5 form validation on a custom element?

React App anchor tag's external links fail to function properly on subsequent clicks when accessed through mobile devices

Is it possible to display and conceal divs/sections by clicking on navigation bar buttons without utilizing javascript or JQuery?

Issue with displaying dropdown menu icon in Bootstrap 5