Simple raster system and simple raster System

Simple raster system and simple raster System
Simple grid system-stream layout (like bootstrap's grid system)

• What is stream layout?

  • The so-called stream layout means the page element width is adjusted according to the screen adaptation. Simply put, the elements in the HTML page change the size according to the resolution, but the location does not change.
  • The main problem with this layout is that if the screen scale span is too large, it cannot be displayed normally on a screen that is too small or too large for the original design.

• Create stream Layout

  • The stream layout is usually divided into 12 columns. Set the width of the HTML page to 100%, so that the HTML page will automatically scale according to the size of the browser window.
  • Calculate the percentage of each column:

    100%/12 columns = 8.33%

  • Based on the above calculation results, set the class of CSS:

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

  • Set all columns to floating (usually left floating) with a slight padding

    [class*='col-']{    float: left;    padding: 1%;}

  • Set the box-sizing element on the HTML page to border-box.
    • When the value of box-sizing is content-box (default), the standard box model is used. Formula for Calculating element size:

      Width = content width, height = content height

      The width and height do not contain the border and padding of the content ).
    • When the value of box-sizing is border-box, the box model used by the Quirks mode is IE. Formula for Calculating element size:

      Width = border + padding + content width, height = border + padding + content height

      The margin and border are included in the box.

Final effect like CSS/small-grid.css; Previews

<! DOCTYPE html> 
*{    margin: 0;    padding: 0;    border: 0;    list-style: none;    box-sizing: border-box;}.small-container{    width: 100%;}.small-container,.small-row{    box-sizing: border-box;}.small-row::before,.small-row::after{    content: '';    display: block;    visibility: hidden;    clear: both;    zoom: 1;}[class*='col-']{    float: left;    padding: 1%;}.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%;}