The grid-column-end attribute is creating a gap in the layout

Question

The grid-column-end attribute is creating a gap in the layout

For the task at hand, my goal is to showcase the final 3 elements of a container in a horizontal alignment. In this setup, the first two items are allotted fixed space while the third element expands to fill the remaining columns.

To accomplish this layout, I have been experimenting with CSS Grid properties.

Currently, I've managed to create a functional prototype when the grid contains more than 3 elements.

However, as illustrated in the code snippet below, there is an issue if the number of elements is less than 3. The last column reaches the right end of the grid but leaves an empty space.

I attempted solving this by using grid-column: auto / -1; instead of grid-column-end, but without success.

This problem was encountered on Chrome with testing also conducted on Firefox.

What could be causing this gap and is there a CSS-only solution to rectify it?

EDIT : Completed the scenario and added expected result

.demo {
  max-width: 500px;
  background-color: #abcdef;
  border-radius: 3px;
  padding: 5px;
  margin-bottom: 5px;
}

.demo>.demo {
  background-color: #fedcba;
}

.main {
  display: grid;
  grid-template-columns: repeat(2, 100px) 1fr;
  grid-gap: 1px;
}

.main>.column:last-child {
  grid-column-end: -1;
}

.main>.column:nth-last-child(n+4) {
  display: none;
}

<div class="demo main">
  <div class="demo column">1</div>
  <div class="demo column">2</div>
  <div class="demo column">3</div>
  <div class="demo column">4</div>
</div>
<div class="demo main">
  <div class="demo column">1</div>
  <div class="demo column">2</div>
  <div class="demo column">3</div>
</div>
<div class="demo main">
  <div class="demo column">1</div>
  <div class="demo column">2</div>
</div>
<div class="demo main">
  <div class="demo column">1</div>
</div>

Expected outcome :

https://i.sstatic.net/kG4d8.png

html css css-grid

Answer 1

Answer №1

Your CSS is being used to hide specific items.

.main > .column:nth-last-child(n+4) {
  display: none;
}

To further customize the layout, you can make the following adjustments:

Select the first child and add grid-column-start: 1; using

.main > .column:first-child {
  grid-column-start: 1;
}

Select the second child when it's a sibling of the first visible child and add grid-column-start: 2; using
```
.main > .column:not(:nth-last-child(n+4)) + .column:nth-child(2) {
  grid-column-start: 2;
}
```

Here is the result:

.demo {
  max-width: 500px;
  background-color: #abcdef;
  border-radius: 3px;
  padding: 5px;
  margin-bottom: 5px;
}

.demo > .demo {
  background-color: #fedcba;
}

.main {
  display: grid;
  grid-template-columns: repeat(2, 100px) 1fr;
  grid-gap: 1px;
}

.main > .column:first-child {
  grid-column-start: 1;
}

.main > .column:not(:nth-last-child(n+4)) + .column:nth-child(2) {
  grid-column-start: 2;
}

.main > .column:last-child {
  grid-column-end: -1;
}

.main > .column:nth-last-child(n+4) {
  display: none;
}

<div class="demo main">
  <div class="demo column">1</div>
  <div class="demo column">2</div>
  <div class="demo column">3</div>
  <div class="demo column">4</div>
</div>
<div class="demo main">
  <div class="demo column">1</div>
  <div class="demo column">2</div>
  <div class="demo column">3</div>
</div>
<div class="demo main">
  <div class="demo column">1</div>
  <div class="demo column">2</div>
</div>
<div class="demo main">
  <div class="demo column">1</div>
</div>

Answer 2

Your CSS is being used to hide specific items.

.main > .column:nth-last-child(n+4) {
  display: none;
}

To further customize the layout, you can make the following adjustments:

Select the first child and add grid-column-start: 1; using

.main > .column:first-child {
  grid-column-start: 1;
}

Select the second child when it's a sibling of the first visible child and add grid-column-start: 2; using
```
.main > .column:not(:nth-last-child(n+4)) + .column:nth-child(2) {
  grid-column-start: 2;
}
```

Here is the result:

.demo {
  max-width: 500px;
  background-color: #abcdef;
  border-radius: 3px;
  padding: 5px;
  margin-bottom: 5px;
}

.demo > .demo {
  background-color: #fedcba;
}

.main {
  display: grid;
  grid-template-columns: repeat(2, 100px) 1fr;
  grid-gap: 1px;
}

.main > .column:first-child {
  grid-column-start: 1;
}

.main > .column:not(:nth-last-child(n+4)) + .column:nth-child(2) {
  grid-column-start: 2;
}

.main > .column:last-child {
  grid-column-end: -1;
}

.main > .column:nth-last-child(n+4) {
  display: none;
}

<div class="demo main">
  <div class="demo column">1</div>
  <div class="demo column">2</div>
  <div class="demo column">3</div>
  <div class="demo column">4</div>
</div>
<div class="demo main">
  <div class="demo column">1</div>
  <div class="demo column">2</div>
  <div class="demo column">3</div>
</div>
<div class="demo main">
  <div class="demo column">1</div>
  <div class="demo column">2</div>
</div>
<div class="demo main">
  <div class="demo column">1</div>
</div>

Answer 3

Answer №2

I believe the solution you are seeking is to have the second cell collapse if it has no content.

This can be achieved by using the following CSS:

grid-template-columns: 100px auto 1fr;

.demo {
  max-width: 500px;
  background-color: #abcdef;
  border-radius: 3px;
  padding: 5px;
}

.demo>.demo {
  background-color: #fedcba;
}

.main {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-gap: 1px;
}

.main>.column:last-child {
  grid-column-end: -1;
}

.main > .column:nth-last-child(n+2) {
  width: 100px;
}

.main>.column:nth-last-child(n+5) {
  display: none;
}

<div class="demo main">
  <div class="demo column">6</div>
  <div class="demo column">7</div>
</div>
<div class="demo main">
    <div class="demo column">5</div> 
  <div class="demo column">6</div>
  <div class="demo column">7</div>
</div>

Answer 4

I believe the solution you are seeking is to have the second cell collapse if it has no content.

This can be achieved by using the following CSS:

grid-template-columns: 100px auto 1fr;

.demo {
  max-width: 500px;
  background-color: #abcdef;
  border-radius: 3px;
  padding: 5px;
}

.demo>.demo {
  background-color: #fedcba;
}

.main {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-gap: 1px;
}

.main>.column:last-child {
  grid-column-end: -1;
}

.main > .column:nth-last-child(n+2) {
  width: 100px;
}

.main>.column:nth-last-child(n+5) {
  display: none;
}

<div class="demo main">
  <div class="demo column">6</div>
  <div class="demo column">7</div>
</div>
<div class="demo main">
    <div class="demo column">5</div> 
  <div class="demo column">6</div>
  <div class="demo column">7</div>
</div>

Answer 5

Answer №3

When there are only two grid items, a gap in the grid appears because the last child starts from the end of the container:

.main > .column:last-child {
  grid-column-end: -1;
}

This works fine when there are three or more items in the container as all cells are filled. However, with less than three items, using grid-column-end: -1 will move the last item to the last column. (Negative integers start counting from the end of the container.)

The issue you demonstrated occurs with just two items but it persists even with just one item:

.main {
  display: grid;
  grid-template-columns: repeat(2, 100px) 1fr;
  grid-gap: 1px;
}

.main>.column:last-child {
  grid-column-end: -1;
}

.demo {
  max-width: 500px;
  background-color: #abcdef;
  border-radius: 3px;
  padding: 5px;
}

.demo>.demo {
  background-color: #fedcba;
}

.main>.column:nth-last-child(n+5) {
  display: none;
}

<div class="demo main">
  <div class="demo column">7</div>
</div>

If you want the last child to also occupy the second column, instead of this:

grid-column-end: -1;

Try this:

grid-column: 2 / -1;

.main {
  display: grid;
  grid-template-columns: repeat(2, 100px) 1fr;
  grid-gap: 1px;
}

.main>.column:last-child {
  grid-column: 2 / -1;
}

.demo {
  max-width: 500px;
  background-color: #abcdef;
  border-radius: 3px;
  padding: 5px;
}

.demo>.demo {
  background-color: #fedcba;
}


.main>.column:nth-last-child(n+5) {
  display: none;
}

<div class="demo main">
  <div class="demo column">6</div>
  <div class="demo column">7</div>
</div>

Alternatively, if you want the last item, in cases where there are less than three items, to occupy the second column, then use :nth-child() instead of :last-child, like so:

.main > .column:nth-child(3) {
  grid-column-end: -1;
}

.main {
  display: grid;
  grid-template-columns: repeat(2, 100px) 1fr;
  grid-gap: 1px;
}

.main>.column:nth-child(3) {
  grid-column-end: -1;
}

.demo {
  max-width: 500px;
  background-color: #abcdef;
  border-radius: 3px;
  padding: 5px;
}

.demo>.demo {
  background-color: #fedcba;
}


.main>.column:nth-last-child(n+5) {
  display: none;
}

<div class="demo main">
  <div class="demo column">6</div>
  <div class="demo column">7</div>
</div>

Answer 6

When there are only two grid items, a gap in the grid appears because the last child starts from the end of the container:

.main > .column:last-child {
  grid-column-end: -1;
}

This works fine when there are three or more items in the container as all cells are filled. However, with less than three items, using grid-column-end: -1 will move the last item to the last column. (Negative integers start counting from the end of the container.)

The issue you demonstrated occurs with just two items but it persists even with just one item:

.main {
  display: grid;
  grid-template-columns: repeat(2, 100px) 1fr;
  grid-gap: 1px;
}

.main>.column:last-child {
  grid-column-end: -1;
}

.demo {
  max-width: 500px;
  background-color: #abcdef;
  border-radius: 3px;
  padding: 5px;
}

.demo>.demo {
  background-color: #fedcba;
}

.main>.column:nth-last-child(n+5) {
  display: none;
}

<div class="demo main">
  <div class="demo column">7</div>
</div>

If you want the last child to also occupy the second column, instead of this:

grid-column-end: -1;

Try this:

grid-column: 2 / -1;

.main {
  display: grid;
  grid-template-columns: repeat(2, 100px) 1fr;
  grid-gap: 1px;
}

.main>.column:last-child {
  grid-column: 2 / -1;
}

.demo {
  max-width: 500px;
  background-color: #abcdef;
  border-radius: 3px;
  padding: 5px;
}

.demo>.demo {
  background-color: #fedcba;
}


.main>.column:nth-last-child(n+5) {
  display: none;
}

<div class="demo main">
  <div class="demo column">6</div>
  <div class="demo column">7</div>
</div>

Alternatively, if you want the last item, in cases where there are less than three items, to occupy the second column, then use :nth-child() instead of :last-child, like so:

.main > .column:nth-child(3) {
  grid-column-end: -1;
}

.main {
  display: grid;
  grid-template-columns: repeat(2, 100px) 1fr;
  grid-gap: 1px;
}

.main>.column:nth-child(3) {
  grid-column-end: -1;
}

.demo {
  max-width: 500px;
  background-color: #abcdef;
  border-radius: 3px;
  padding: 5px;
}

.demo>.demo {
  background-color: #fedcba;
}


.main>.column:nth-last-child(n+5) {
  display: none;
}

<div class="demo main">
  <div class="demo column">6</div>
  <div class="demo column">7</div>
</div>

The grid-column-end attribute is creating a gap in the layout

Answer №1

Answer №2

Answer №3

Similar questions

Resposiveness of force-directed graph is lost

When I try to alter HTML using JS, I encounter an undefined error related to AngularJS

Challenges in working with PHP, SQL, HTML, and AJAX data submission

Adjust padding of elements based on scrolling movements

Tips for creating shaped images using clip-path

Accessibility issues detected in Bootstrap toggle buttons

The Splitter remains inactive until a peculiar series of actions is taken

Align numbers vertically inside scrollbar center

Foundation: the importance of source order (without using flex grid)

Using a simulation to deactivate webpage elements and showcase the UpdateProgress control

Having difficulty setting up multiple buttons to share the same function in jQuery using HTML

Retrieving Data Attribute From Form Using Python Flask

Switch between light and dark mode on a webpage using HTML

What is the best way to apply a Javascript function to multiple tags that share a common id?

Exporting CSS file from css-loader in Webpack: A step-by-step guide

Applying the Active CSS class to a Bootstrap Carousel

Button that floats and leads to the previously visited page

Design adaptable HTML backgrounds

Tips for minimizing the padding/space between dynamically generated div elements using html and css

Enhancing the style of child elements in jQuery using CSS