0

I have a website that has a grid with multiple items, I decided to use auto-fit to minimize the use of media queries. The code works perfectly but, the problem is that the last row is aligned to the left (because that's how css grid works I know). So I was wondering if anyone know any method to center the elements in the last row. I don't want to use flexbox because doesn't fit what I'm looking for. I'll accept the use of javascript to accomplish it because I'm using it in my website so, why not.

Here's my code:

.music-grid {
        min-height: 100vh;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
        grid-auto-rows: max-content;
        gap: 2em;
}

This is how the grid looks

GLPG35
  • 125
  • 1
  • 7
  • 1
    Grid cannot do that, only flex box. What you want to achieve is no longer a grid, in which each row has the exact same number of columns of equal width in each row. Grid works just like a table element, without the need to specify row and cell *elements*. Javascript alos won't be able to help with that, as it inherently is supposed to work on something that **structurally** doesn't match what you are looking for. – connexo Mar 20 '22 at 17:05
  • 1
    *I don't want to use flexbox because doesn't fit what I'm looking for* it's the only thing that fits what you are looking for. – connexo Mar 20 '22 at 17:09
  • @connexo flexbox-wrap isn't the same as grid auto-fit – GLPG35 Mar 20 '22 at 17:15
  • Noone claimed that. – connexo Mar 20 '22 at 17:16
  • `transform: translateX( %javascript-calculated% )` for elements in the last row (which are javascript determinated aswell) will make it. But thats flexbox that is really fulfilling your needs here. – Jared Mar 20 '22 at 18:11

0 Answers0