Responsive Web-type grid system

With the increase of mobile users, we want to design a Web page can use both PC and mobile device, the same Web page to different devices display effect is not the same, then need to use the responsive design. Here, let me introduce the flow grid system. If you know the bootstrap and foundation frameworks, you can see that both frameworks offer a unique grid system. But we don't usually introduce a framework just to use a grid system, so here's how to design a streaming grid system to suit your needs.
To add the following \<\meta> tags to the \<\head> element for the Web page to scale freely according to the device:

<meta name= "viewport" content= "width=device-width, initial-scale=1.0"/>

The Width property controls how wide the device is. Assuming your site will be browsed by a device with a different screen resolution, setting it to device-width will ensure that it renders correctly on different devices. initial-scale=1.0 ensures that when the page loads, it is rendered at a scale of 1:1 without any scaling. On the mobile device browser, you can disable the zoom (zooming) feature by adding user-scalable=no to the viewport meta tag. Typically, maximum-scale=1.0 is used with User-scalable=no. This disables the zoom feature and the user can only scroll the screen. @media Query

@media query is a syntax rule for CSS3. You can use @media queries to define different styles for different media types, and you can set different styles for different screen sizes. The @media CSS syntax rules are as follows:

@media mediatype and|not|only (Media feature) {
    css-code;
}

For example:

@media only screen and (max-width:400px) {
    body {
        background-color:lightblue;
    }
}

Indicates that the background presentation (Background-color) is modified only if the media type is a digital screen and the width is 400px or less.
In addition, we can also use different stylesheets for different media through @media:

<link rel= "stylesheet" media= "mediatype and|not|only (Media feature)" href= "Mystylesheet.css" >

Construct Mesh

Requirements Description: Design a grid system, display 1 rows and 8 columns on the PC side, and display 2 rows 4 columns on the phone

The HTML code is as follows:

<! DOCTYPE html>
 
The CSS code is as follows:

. row{
  width:100%;
  max-width:1024px; /* Set the maximum width, generally for PC-side only function */
  margin:0 auto;
  OUTLINE:1PX solid blue; 

}

/* Clear float for row class to prevent margin folding by floating elements *
/. Row:before,.row:after {content: "";d isplay:table;}
. Row:after {clear:both;}

/* Set the format for each column */
. grid{
  height:20px;
  Float:left;
  margin:1%;
  outline:1px solid red;
}

/* Set the width value of the M-grid-1 class on each mobile device, the M-grid-2 class is twice times m-grid-1, and so on */
. m-grid-1{width:23%;}
. m-grid-2{width:48%;}
. m-grid-3{width:73%;}
. m-grid-4{width:98%;}

/* For devices with a width greater than or equal to 960px, set the width of the column *
/@media (min-width:960px) {
  . d-grid-1{width:10.5%;}
  . d-grid-2{width:23%;}
  . d-grid-3{width:35.5%;}
  . d-grid-4{width:48%;}
  . d-grid-5{width:60.5%;}
  . d-grid-6{width:73%;}
  . d-grid-7{width:85.5%;}
  . d-grid-8{width:98%;}
}
 
The results displayed on the PC side are as follows:

On the phone side is displayed as follows: