CloseTag | الشروحات | CSS | صفحات متجاوبة بنظام grid في لغة CSS | CSS Grid Media Queries

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloseTag</title>
<style>
*
{
    box-sizing: border-box;
}

.grid-container
{
    
    display:grid;
    width:100%;
    background-color: #2196F3;
    padding: 10px;
}

.row
{
  border:white solid 1px;
}

.col-1  {width: 8.33%;}
.col-2  {width: 16.66%;}
.col-3  {width: 25%;}
.col-4  {width: 33.33%;}
.col-5  {width: 41.66%;}
.col-6  {width: 50%;}
.col-7  {width: 58.33%;}
.col-8  {width: 66.66%;}
.col-9  {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

header
{
  height:100px;
}

footer
{
  height:70px;
}

.slider
{
  height:200px;
}

.content
{
  height:300px;
}

[class*="col-"]
{
  border: 1px dashed blue;
  background-color: rgba(255, 255, 255, 0.8);
  float: left;
}

@media only screen and (max-width: 768px) {
/* For mobile phones: */
  [class*="col-"]
  {
    width: 100%;
  }
}

@media only screen and (min-width: 768px) 
{
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
</style>
</head>
<body>
<div class="grid-container">
  <div class="row">
    <header class="col-12">
      <div>Header</div>
    </header>
  </div>
  <div class="row">
    <div class="col-12 slider">
      <div>Slider</div>
    </div>
  </div>
  <div class="row">
    <div class="col-6 content">
      <div>Content left</div>
    </div>
    <div class="col-6 content">
      <div>Content right</div>
    </div>
  </div>
  <div class="row">
    <footer class="col-12">
      <div>Footer</div>
    </footer>
  </div>
</div>
</body>
</html>

PCFET0NUWVBFIGh0bWw+DQo8aHRtbCBsYW5nPSJlbiI+DQo8aGVhZD4NCjxtZXRhIGNoYXJzZXQ9IlVURi04Ij4NCjxtZXRhIGh0dHAtZXF1aXY9IlgtVUEtQ29tcGF0aWJsZSIgY29udGVudD0iSUU9ZWRnZSI+DQo8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMCI+DQo8dGl0bGU+Q2xvc2VUYWc8L3RpdGxlPg0KPHN0eWxlPg0KKg0Kew0KICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7DQp9DQoNCi5ncmlkLWNvbnRhaW5lcg0Kew0KICAgIA0KICAgIGRpc3BsYXk6Z3JpZDsNCiAgICB3aWR0aDoxMDAlOw0KICAgIGJhY2tncm91bmQtY29sb3I6ICMyMTk2RjM7DQogICAgcGFkZGluZzogMTBweDsNCn0NCg0KLnJvdw0Kew0KICBib3JkZXI6d2hpdGUgc29saWQgMXB4Ow0KfQ0KDQouY29sLTEgIHt3aWR0aDogOC4zMyU7fQ0KLmNvbC0yICB7d2lkdGg6IDE2LjY2JTt9DQouY29sLTMgIHt3aWR0aDogMjUlO30NCi5jb2wtNCAge3dpZHRoOiAzMy4zMyU7fQ0KLmNvbC01ICB7d2lkdGg6IDQxLjY2JTt9DQouY29sLTYgIHt3aWR0aDogNTAlO30NCi5jb2wtNyAge3dpZHRoOiA1OC4zMyU7fQ0KLmNvbC04ICB7d2lkdGg6IDY2LjY2JTt9DQouY29sLTkgIHt3aWR0aDogNzUlO30NCi5jb2wtMTAge3dpZHRoOiA4My4zMyU7fQ0KLmNvbC0xMSB7d2lkdGg6IDkxLjY2JTt9DQouY29sLTEyIHt3aWR0aDogMTAwJTt9DQoNCmhlYWRlcg0Kew0KICBoZWlnaHQ6MTAwcHg7DQp9DQoNCmZvb3Rlcg0Kew0KICBoZWlnaHQ6NzBweDsNCn0NCg0KLnNsaWRlcg0Kew0KICBoZWlnaHQ6MjAwcHg7DQp9DQoNCi5jb250ZW50DQp7DQogIGhlaWdodDozMDBweDsNCn0NCg0KW2NsYXNzKj0iY29sLSJdDQp7DQogIGJvcmRlcjogMXB4IGRhc2hlZCBibHVlOw0KICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuOCk7DQogIGZsb2F0OiBsZWZ0Ow0KfQ0KDQpAbWVkaWEgb25seSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc2OHB4KSB7DQovKiBGb3IgbW9iaWxlIHBob25lczogKi8NCiAgW2NsYXNzKj0iY29sLSJdDQogIHsNCiAgICB3aWR0aDogMTAwJTsNCiAgfQ0KfQ0KDQpAbWVkaWEgb25seSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDc2OHB4KSANCnsNCiAgLyogRm9yIGRlc2t0b3A6ICovDQogIC5jb2wtMSB7d2lkdGg6IDguMzMlO30NCiAgLmNvbC0yIHt3aWR0aDogMTYuNjYlO30NCiAgLmNvbC0zIHt3aWR0aDogMjUlO30NCiAgLmNvbC00IHt3aWR0aDogMzMuMzMlO30NCiAgLmNvbC01IHt3aWR0aDogNDEuNjYlO30NCiAgLmNvbC02IHt3aWR0aDogNTAlO30NCiAgLmNvbC03IHt3aWR0aDogNTguMzMlO30NCiAgLmNvbC04IHt3aWR0aDogNjYuNjYlO30NCiAgLmNvbC05IHt3aWR0aDogNzUlO30NCiAgLmNvbC0xMCB7d2lkdGg6IDgzLjMzJTt9DQogIC5jb2wtMTEge3dpZHRoOiA5MS42NiU7fQ0KICAuY29sLTEyIHt3aWR0aDogMTAwJTt9DQp9DQo8L3N0eWxlPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4gOjotd2Via2l0LXNjcm9sbGJhcnt3aWR0aDo3cHg7aGVpZ2h0OjdweDt9Ojotd2Via2l0LXNjcm9sbGJhci10cmFja3tiYWNrZ3JvdW5kOiNmZmY7fTo6LXdlYmtpdC1zY3JvbGxiYXItdGh1bWJ7Ym9yZGVyLXJhZGl1czo1cHg7YmFja2dyb3VuZDojMmY0NWZmO308L3N0eWxlPjwvaGVhZD4NCjxib2R5Pg0KPGRpdiBjbGFzcz0iZ3JpZC1jb250YWluZXIiPg0KICA8ZGl2IGNsYXNzPSJyb3ciPg0KICAgIDxoZWFkZXIgY2xhc3M9ImNvbC0xMiI+DQogICAgICA8ZGl2PkhlYWRlcjwvZGl2Pg0KICAgIDwvaGVhZGVyPg0KICA8L2Rpdj4NCiAgPGRpdiBjbGFzcz0icm93Ij4NCiAgICA8ZGl2IGNsYXNzPSJjb2wtMTIgc2xpZGVyIj4NCiAgICAgIDxkaXY+U2xpZGVyPC9kaXY+DQogICAgPC9kaXY+DQogIDwvZGl2Pg0KICA8ZGl2IGNsYXNzPSJyb3ciPg0KICAgIDxkaXYgY2xhc3M9ImNvbC02IGNvbnRlbnQiPg0KICAgICAgPGRpdj5Db250ZW50IGxlZnQ8L2Rpdj4NCiAgICA8L2Rpdj4NCiAgICA8ZGl2IGNsYXNzPSJjb2wtNiBjb250ZW50Ij4NCiAgICAgIDxkaXY+Q29udGVudCByaWdodDwvZGl2Pg0KICAgIDwvZGl2Pg0KICA8L2Rpdj4NCiAgPGRpdiBjbGFzcz0icm93Ij4NCiAgICA8Zm9vdGVyIGNsYXNzPSJjb2wtMTIiPg0KICAgICAgPGRpdj5Gb290ZXI8L2Rpdj4NCiAgICA8L2Zvb3Rlcj4NCiAgPC9kaXY+DQo8L2Rpdj4NCjwvYm9keT4NCjwvaHRtbD4=