Tryit Editor - Free-Learn

<!DOCTYPE html>
<html>
<head>
<style>

.My-Container{
 display: grid;
 grid-template-areas: 'header header header header header' 'seton-chap main main main seton-rast' 'footer footer footer footer footer';
 grid-gap: 5px;
}

.MyItem{
 background-color: #f2f2f2;
 border: 1px solid #000;
 padding: 10px;
 font-size: 30px;
 text-align: center;
}

.Item1{
 grid-area: header;
 background-color: #5db616 !important;
 color:#fff;
}

.Item2{
 grid-area: seton-chap;
 background-color: yellow !important;
}

.Item3{
 grid-area: main;
 background-color: #1F5EFF !important;
 color:#fff;
}

.Item4{
 grid-area: seton-rast;
 background-color: yellow !important;
}

.Item5{
 grid-area: footer;
 background-color: #5db616 !important;
 color:#fff;
}

@media (max-width: 500px){
 .My-Container {
   grid-template-areas: 'header' 'main' 'seton-rast' 'seton-chap' 'footer';
 }
}

</style>
</head>
<body>

<p style="text-align:center;"><b>آیتم ها در گوشی موبایل میوفتن زیر هم</b></p>

</body>
</html>

سایت آموزشی فری لرن