Can a grid item be specifically placed on the final row or column at all times?

Question

Can a grid item be specifically placed on the final row or column at all times?

Is it possible to position a grid item in the last row and / or column of a grid without knowing the exact number of rows or columns?

Here is the grid setup:

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 16.5rem));
  grid-gap: 1rem;
}

I have only come across placement by specifying explicit rows or columns: MDN

html css css-grid

Answer 1

Answer №1

In reference to my previous remark; taken from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid#Counting_backwards

It is also possible to enumerate backwards from the end of the grid, which for English would be the far right column line and last row line. These lines are referred to as -1, and counting can continue from there – such that the second-to-last line is -2.

Answer 2

In reference to my previous remark; taken from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid#Counting_backwards

It is also possible to enumerate backwards from the end of the grid, which for English would be the far right column line and last row line. These lines are referred to as -1, and counting can continue from there – such that the second-to-last line is -2.

Answer 3

Answer №2

If you want to position an element at the end of a grid, you can utilize a pseudoelement :after. Check out the demonstration below:

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 16.5rem));
  grid-gap: 1rem;
}

.columns div {
  border: 1px solid;
  height: 100px;
}

.columns:after {
  content:'';
  display: block;
  border: 1px solid red;
  height: 100px;
}

<div class="columns">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Alternatively, you can also use the order property to place the element at the end. If any other grid item has the order property, simply assign a larger value. Refer to the demo below:

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 16.5rem));
  grid-gap: 1rem;
}

.columns div {
  border: 1px solid;
  height: 100px;
}

.columns .last {
  order: 1;
  border: 1px solid red;
}

<div class="columns">
  <div></div>
  <div></div>
  <div></div>
  <div class="last"></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 4

If you want to position an element at the end of a grid, you can utilize a pseudoelement :after. Check out the demonstration below:

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 16.5rem));
  grid-gap: 1rem;
}

.columns div {
  border: 1px solid;
  height: 100px;
}

.columns:after {
  content:'';
  display: block;
  border: 1px solid red;
  height: 100px;
}

<div class="columns">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Alternatively, you can also use the order property to place the element at the end. If any other grid item has the order property, simply assign a larger value. Refer to the demo below:

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 16.5rem));
  grid-gap: 1rem;
}

.columns div {
  border: 1px solid;
  height: 100px;
}

.columns .last {
  order: 1;
  border: 1px solid red;
}

<div class="columns">
  <div></div>
  <div></div>
  <div></div>
  <div class="last"></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Can a grid item be specifically placed on the final row or column at all times?

Answer №1

Answer №2

Similar questions

Node.js web application encounters ECONNRESET and MongoNetworkError issues

Is it possible to detect if text is exceeding its designated space and incorporate this as a condition within the code?

What methods does DevTools offer for identifying the font used in an SVG?

Using pure JavaScript to trigger a pop-up window upon submitting a form

Disable mandatory checkbox with jQuery validator extension

What is the best way to split a text box into sections, making sure that each section can only contain a single

Positioned in the center of the screen is an IFrame that is centered inside a div

Tips for opening local HTML files on iPhones and Android devices

The spacebar is not functioning properly within a `button` element while using HTML5 `contenteditable`. What steps can I take to fix this issue and get it working correctly?

What could be causing the Bootstrap navbar to not toggle when the button is clicked?

Reorganize containers without relying on bootstrap styling

Can you point me in the right direction for declaring the ImageObject format in Angular?

Displaying data table details through a modal window

The PHP file fails to load JavaScript because it requires another JavaScript file to be loaded beforehand

Set the datepicker to automatically show today's date as the default selection

Is there a way to display the message "no results" when none of the div elements are visible?

How can we transfer parameters in JavaScript?

Issue with Angular not rendering data retrieved from HTTP response

Nodemailer is experiencing issues with displaying HTML content correctly

The fixed div width suddenly switches to 100% without warning