Alaa Gaber• 160
@3laagaber
Posted
Hello, you did quite good work, here are tips to improve your design, try to use grid-template-areas it is straightforward and useful in such grid complex structure like this: .container{ max-width: 80%; max-height: 90%; gap: 2rem; display: grid; grid-template-columns: repeat(12 ,1fr) ; grid-template-rows: repeat(2, 1fr); grid-template-areas: "one one one one one one two two two three three three" "four four four five five five five five five three three three" ; } @media (max-width:600px){ .content{ height: 200vh; } .components{ display: grid; grid-template-columns: repeat(2 ,1fr) ; grid-template-rows: repeat(5, 1fr); grid-template-areas: "one one " "two two" "four four" "five five" "three three"
;
}
} I wish you all well.
0
