DevOverflow

Home

Community

Collections

Find Jobs

CSS Grid layout breaking on mobile devices - items overlapping

asked 5 days ago

I'm working on a responsive layout using CSS Grid, but I'm experiencing issues with items overlapping on mobile devices.

Current CSS

1
2.grid-container {
3
4 display: grid;
5
6 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
7
8 gap: 1rem;
9
10 padding: 1rem;
11
12}
13
14.grid-item {
15
16 background: #f5f5f5;
17
18 padding: 1rem;
19
20 border-radius: 8px;
21
22 min-height: 200px;
23
24}
25

1
2.grid-container {
3
4 display: grid;
5
6 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
7
8 gap: 1rem;
9
10 padding: 1rem;
11
12}
13
14.grid-item {
15
16 background: #f5f5f5;
17
18 padding: 1rem;
19
20 border-radius: 8px;
21
22 min-height: 200px;
23
24}
25

The Problem

Desktop (works fine):

Items are properly spaceddd
Nice responsive layout
No overlapping issues

Mobile (< 768px):

Items start overlapping each other
Some items appear behind others
Layout becomes unusable

What I've Tried

Different minmax values:

1
2grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
3

1
2grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
3

Media queries:

1
2@media (max-width: 768px) {
3
4  .grid-container {
5
6    grid-template-columns: 1fr;
7
8  }
9
10}
11

1
2@media (max-width: 768px) {
3
4  .grid-container {
5
6    grid-template-columns: 1fr;
7
8  }
9
10}
11

Flexbox alternative:

1
2display: flex;
3
4flex-wrap: wrap;
5

1
2display: flex;
3
4flex-wrap: wrap;
5

Screenshots

I can see the issue clearly in Chrome DevTools when switching to mobile view.

Questions

Is there a better way to handle CSS Grid on mobile?
Should I use a different approach for mobile layouts?
Are there any CSS Grid gotchas I should be aware of?

Environment

Chrome 119.0
Safari 17.0 (iOS)
Firefox 118.0

Any suggestions for fixing this mobile layout issue?

css

rwd

mobile

1 Answer

Filters

Damian Kądziela

• answered 21 hours ago

dadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadaddadadadad