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%;}

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

@media only screen and (max-width: 768px) {
/* For mobile phones: */
  [class*="col-"]
  {
    width: 100%;
  }
}
</style>
</head>
<body>
<div class="grid-container">
  <div class="row">
    <div class="col-3"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
  </div>
</div>
</body>
</html>