This is a solution to the Four card feature section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Mobile-first workflow
I learned about new grid properties and also how to make grid responsive in any device in this challenge.
See the code snippets below:
main .card {
font-size: 0.8rem;
padding: 1em 2em;
background-color: white;
margin-bottom: 2em;
border-top: 4px solid;
border-radius: 5px 5px 10px 10px;
box-shadow: hsla(234, 12%, 34%, 0.2) 0px 7px 29px 0px;
clear: both;
overflow: hidden;
}
main {
display: grid;
grid-template-areas:
"...... card-2 ......"
"card-1 card-2 card-4"
"card-1 card-3 card-4"
"...... card-3 ......";
justify-content: center;
grid-auto-columns: minmax(minmax(0, 1fr), max-content);
gap: 2em;
}
- Preventing a Grid Blowout - This helped me solve grid items overflowing from their container.