All solutions

my name is Jamel Issaoui , I want to upgrade my skill in CSS with many challenge easy challenge use transform : translate(-10px); in version mobile well be 0px use grid and flex, I hope you like it , don't forget to like

I'm happy With this challenge i become understand grid 100% , I like this challenge the solution is : in version pc : give this to father tag of section or article in my code is main : display: grid;

main{ max-width: 1100px; grid-template-columns: repeat(4,25%); grid-template-areas: "article1 article1 article2 article5" "article3 article4 article4 article5" ; } in version mobile will be : @media (max-width :767px){ main{ grid-template-areas: "article1" "article2" "article3" "article4" "article5"; display: grid; grid-template-columns: repeat(1,100%); } }

its so easy use flex and rem is better of px

i'm waiting your comment

use display flex and flex-basis and for mobile flex-direction: column