CSS custom grid system

1: Some specifications

.col-xs-* ultra small screen mobile phone (<768px)

.col-sm-* small screen tablet (≥768px)

.col-md-* medium screen desktop monitor (≥992px)

.col-lg-* Large screen Large desktop monitor (≥1200px)

2: Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom grid system</title>
    <style>
        .container{
            width: 100%;
        }
        .row{
            width: 100%;
        }
                 /*Medium screen*/
        .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6{
            float: left;
        }
                 /*Small screen*/
        .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6{
            float: left;
        }

                 /*Small screen*/
        .col-sm-1{
            width: 16.6666666666%;
        }
        .col-sm-2{
            width: 33.3333333332%;
        }
        .col-sm-3{
            width: 49.9999999998%;
        }
        .col-sm-4{
            width: 66.6666666664%;
        }
        .col-sm-5{
            width: 83.3333333333%;
        }
        .col-sm-6{
            width: 100%;
        }

                 /*Medium screen*/
        @media (min-width: 768px) {
            .col-md-1{
                width: 16.6666666666%;
            }
            .col-md-2{
                width: 33.3333333332%;
            }
            .col-md-3{
                width: 49.9999999998%;
            }
            .col-md-4{
                width: 66.6666666664%;
            }
            .col-md-5{
                width: 83.3333333333%;
            }
            .col-md-6{
                width: 100%;
            }
        }

    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-1">col-md-3</div>
        <div class="col-md-3 col-sm-5">col-md-3</div>
    </div>
    <div class="row">
        <div class="col-md-2 col-sm-1">col-md-2</div>
        <div class="col-md-2 col-sm-2">col-md-2</div>
        <div class="col-md-2 col-sm-3">col-md-2</div>
    </div>
</div>


</body>
</html>

3: effect

1: Medium screen

2: small screen

Intelligent Recommendation

Write bootstrap grid system with css

Grid grid layout The Grid module provides a new value for the display property: grid. When you set the display property of any element to grid, then this element is a grid container, and all its direc...

Stories about the CSS grid system

Speaking ofGrid system（grid system), you may have seen this concept: In this way, the layout design is carried out through a fixed grid structure. This is a design style, and it has been widely used i...

CSS grid system principle analysis

2019 Unicorn Enterprise Heavy Glour Recruitment Python Engineer Standard >>> As we all know, there are many front-ends similar to Bootstrap, Foundation, which provides its own set of response...

Media query custom grid system

...

CSS Grid (CSS Grid)

The CSS grid is a newer standard for building complex response layout. It converts the HTML element to a grid container with rows and columns to place the child elements in the required position. cont...