Design comparison
Solution retrospective
I have used grid-template-areas but now its not working.
Community feedback
- @byronbyronPosted over 2 years ago
Hey @jillpandya2594, Hopefully this fixes your grid!
.container { margin: auto; max-width: 40rem; padding: 2em; display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr; } main { padding: 2em; background-color: #fff; grid-column: span 2; align-self: flex-end; } section { display: flex; flex-direction: column; padding: 2em; background-color: hsl(179, 62%, 43%); } aside { padding: 2em; background-color: hsl(180, 62%, 47%); line-height: 1.6; }
1@jillpandya2594Posted over 2 years ago@byronbyron Can you please explain why this would work?
0@byronbyronPosted over 2 years ago@jillpandya2594 Sure! The parent
.container
has:display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr;
which defines a square divided into quarters.
The
main
element at the top needs to span two columns to achieve the layout, so it has this property:grid-column: span 2;
Hope that helps!
Marked as helpful1@jillpandya2594Posted over 2 years ago@byronbyron Please guide me on making it responsive.
0@byronbyronPosted over 2 years ago@jillpandya2594 It looks like the quickest and easiest way to get it responsive is to set the
.container
todisplay: block;
on screens widths smaller than, say768px
. I also like to add amax-width
as well like so:@media (max-width: 768px) { .container { display: block; max-width: 327px; } }
Marked as helpful1@jillpandya2594Posted over 2 years ago@byronbyron Thank you for guiding me with this challenge!🙂 It works correctly now.
0 - @jillpandya2594Posted over 2 years ago
How can I make this more close to the design ? Why cant I view the two columns here?
0 - @jillpandya2594Posted over 2 years ago
Why does the it not look like grid layout in the final version? Even though I made it grid
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord