CSS responsive grid go from 4 columns to 2
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
This is a nicely centered grid, but I want the 4 columns to go down to 2 for mobile. What should I add? body { display: grid; align-items: center; justify-items: center; background: grey; max-width: 56em; } ul { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 3em; margin: 0 auto; max-width: 64em; } li { display: grid; align-items: center; justify-content: center; list-style: none; }
css responsive
share | improve this question