Loopstudios landing page CSS grid and flexbox

Great job completing the desktop layout portion of the project! 👍 When you move on to the mobile layout, you can improve your grid to adjust to the size of the screen.

// your code 
.grid-display {
    display: grid;
    grid-template-columns: repeat(4, 250px);
    grid-template-rows: 1fr 1fr;
    grid-column-gap: 1em;
    grid-row-gap: 1em;
}

// REFACTOR
.grid-display {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 1rem;
}

• auto-fill: automatically fills the grid with grid-items
• minmax: set the minimum and maximum size of the grid item
• grid-gap: shorthand since your gaps are the same size

Continue the great work! Happy coding 😊