What is the direction of auto-filling in CSS grid?

Question

What is the direction of auto-filling in CSS grid?

Here's an unusual query that I've been pondering. Despite checking various CSS documentation, I haven't found a clear answer yet. Take a look at this:

https://i.sstatic.net/SglOl.jpg

It resembles something like this

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

Notice the auto-column on the right side. But what if I want to flip the direction of the auto-filling? In other words, have images appear on the right and create new empty columns on the left instead? Is there a way to achieve this?

css layout css-grid

Answer 1

Answer №1

To achieve a right-to-left layout and specify the order of child elements explicitly, you can utilize the code snippet below. It is important to ensure that the text direction is reset within the child items as well.

.container {
  display: grid;
  direction: rtl;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.one {
  /* Utilizing negative numbers for ordering to visually position the first item last while maintaining ease of reference */
  order: -1;
}

.two {
  order: -2;
}

.image {
  /* Resetting text direction here */
  direction: ltr;
  color: #2a7e1f;
  text-transform: uppercase;
}

<div class="container">
  <div class='image one'><img src="https://picsum.photos/id/237/200/200" alt="">
    Test 1
  </div>
  <div class='image two'><img src="https://picsum.photos/id/238/200/200" alt="">
    Test 2
  </div>
</div>

Answer 2

To achieve a right-to-left layout and specify the order of child elements explicitly, you can utilize the code snippet below. It is important to ensure that the text direction is reset within the child items as well.

.container {
  display: grid;
  direction: rtl;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.one {
  /* Utilizing negative numbers for ordering to visually position the first item last while maintaining ease of reference */
  order: -1;
}

.two {
  order: -2;
}

.image {
  /* Resetting text direction here */
  direction: ltr;
  color: #2a7e1f;
  text-transform: uppercase;
}

<div class="container">
  <div class='image one'><img src="https://picsum.photos/id/237/200/200" alt="">
    Test 1
  </div>
  <div class='image two'><img src="https://picsum.photos/id/238/200/200" alt="">
    Test 2
  </div>
</div>

What is the direction of auto-filling in CSS grid?

Answer №1

Similar questions

Credit for the Position swipejs

placing a vertical bootstrap button along the left border

What is the best way to customize the color of the icon in the <v-text-field>?

What could be causing my page to appear differently in medium resolutions with Bootstrap 4?

Adjusting the content and style of a div element upon clicking, and restoring the original settings when clicked once more

adverse offset and backdrop

React Application not reflecting recent modifications made to class

Is jQuery the key to Masonry's stacking magic?

How can I create an image link with a hover effect using HTML and CSS?

Angular Material Spinner with Custom Image Icons - (mat-spinner)

The code seems to be malfunctioning in a separate JS file, but oddly enough, it functions properly when placed within a <script> tag

Trouble with tab switching across multiple cards

Ways to create a separator or divider between rows in a table

The exterior DIV does not conform to shrinking dimensions

Modify the parent div's style if there are more than two children present (CSS exclusive)

Unable to get click function to work with multiple div elements

Animating a CSS overlay

Text that is selected within a contenteditable div: Find the beginning and end points of the highlighted text

Trouble with Z-index on FireFox when using absolute positioning

Having trouble with the Wordpress JS CSS combination not functioning properly and unable to determine the cause