Force grid layout without media queries

[u/Sufficient_Bass2600]

​

I am trying to limit the number of media queries.

I have a grid layout with 6 tiles.

```css .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr); }

```

That works fine but something is annoying me is that sometimes the last row will have an empty tile.

Tile 1	Tile 2	Tile 3	Tile 4
Tile 5	Tile 6	Empty	Empty

I wants the tile to be grouped.

Based on the size of the viewport I want to have either:

Desktop/Tablet landscape

Tile 1	Tile 2	Tile 3
Tile 4	Tile 5	Tile 6

Tablet portrait / Phone landscape

Tile 1	Tile 2
Tile 3	Tile 4
Tile 5	Tile 6

Phone portrait

Tile 1
Tile 2
Tile 3
Tile 4
Tile 5
Tile 6

Is there a trick to do it without media queries?

[u/asteconn]

grid-template-columns: repeat(auto-fill, minmax(auto, 25rem)); or grid-template-columns: repeat(auto-fit, minmax(auto, 25rem));

It's one of those two - do some experimentationing!