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 :

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

"Troubleshooting problems with the display:none property in a media

The various options in the dropdown menu are descending in order

Tips for implementing a single function across multiple HTML classes using JavaScript

Focusing on a particular iframe

The Sacred Chalice Trio Vertical Stretch Design

align text vertically over an image

Contact form repair completed - Messages successfully delivered

Activate the jQuery click event by specifying the URL

What is the best method for gracefully opening external links in a reusable new tab?

Formatting issue with selecting checkboxes in Primefaces DataTable filter menu

Adding a command to open a new browser tab using JavaScript code can easily be accomplished by following these steps. By using Terminal, you can quickly and efficiently implement this feature

Modify picture properties when listbox is altered using jQuery

What is the best way to allow a number to be editable when clicked on in a React application

Animating CSS using JavaScript

The chosen option from the drop-down menu cannot be shown on the screen

What is the minimum size a string must be in order to cause the innerHTML render to be disrupted?

Eliminating padding from columns results in the appearance of a horizontal scrollbar

What is the best way to maintain parameters in PHP form code?

Troubleshooting Problem with Centering Rows in Bootstrap

What is the significance of $() in jQuery?