@byronbyron
Posted
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;
}
@jillpandya2594
Posted
@byronbyron Can you please explain why this would work?
@byronbyron
Posted
@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 helpful
@jillpandya2594
Posted
@byronbyron Please guide me on making it responsive.
@byronbyron
Posted
@jillpandya2594 It looks like the quickest and easiest way to get it responsive is to set the .container to display: block; on screens widths smaller than, say 768px. I also like to add a max-width as well like so:
@media (max-width: 768px) {
.container {
display: block;
max-width: 327px;
}
}
Marked as helpful
@jillpandya2594
Posted
@byronbyron Thank you for guiding me with this challenge!🙂 It works correctly now.
