Hello, congratulations on completing the challenge. Here are some tips for you:
- In the grid, there’s a property called
auto-fit
that automatically reorganizes grid items according to their size. It might be interesting for you to try it out instead of switching todisplay: flex
for mobile device resolutions. - Example:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
row-gap: 25px;
}
- To use this property, it's mandatory to have
minmax
for the grid items.
If this approach isn’t suitable, you could start by creating the grid for mobile devices first and then use media queries to adjust the columns.
- Example:
.container {
display: grid;
grid-template-columns: 1fr;
row-gap: 25px;
}
.card {
width: 300px;
height: 300px;
background-color: #ea7777;
border: 1px solid black;
}
@media (min-width: 768px) {
.container {
grid-template-columns: repeat(4, 1fr);
column-gap: 25px;
}
}
I hope these tips can help you.
Marked as helpful