12栅格化布局

Posted 2022-04-20 weigaojie
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了12栅格化布局相关的知识，希望对你有一定的参考价值。
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .container
        width: 900px;
        height: 300px;
        overflow: hidden;
        box-sizing: border-box;
    
    .container>.row
        width: 100%;
        height:100%;
        float: left;
        overflow: hidden;
    


    @media screen and (min-width: 600px)
        .container
            width: 600px;
            height: 300px;
            border:1px solid #333;
            box-sizing: border-box;
        
        .container>.row>.col-l-1
            width: 8.3333333%;
            height: 100%;
            float: left;
        
        .container>.row>.col-l-2
            width: 16.6666666%;
            height: 100%;
            float: left;
        
        .container>.row>.col-l-3
            width: 25%;
            height: 100%;
            float: left;
        
        .container>.row>.col-l-4
            width: 33.3333333%;
            height: 100%;
            float: left;
        
        .container>.row>.col-l-5
            width: 41.6666666%;
            height: 100%;
            float: left;
        
        .container>.row>.col-l-6
            width: 50%;
            height: 100%;
            float: left;
        
        .container>.row>.col-l-7
            width: 58.3333333%;
            height: 100%;
            float: left;
        
        .container>.row>.col-l-8
            width: 66.6666666%;
            height: 100%;
            float: left;
        
        .container>.row>.col-l-9
            width: 75%;
            height: 100%;
            float: left;
        
        .container>.row>.col-l-10
            width: 83.3333333%;
            height: 100%;
            float: left;
        
        .container>.row>.col-l-11
            width: 91.6666666%;
            height: 100%;
            float: left;
        
        .container>.row>.col-l-12
            width: 100%;
            height: 100%;
            float: left;
        
    


    @media screen and (min-width: 900px)
        .container
            width: 900px;
            height: 300px;
            border:1px solid #333;
            box-sizing: border-box;
        
        .container>.row>.col-s-1
            width: 8.3333333%;
            height: 100%;
            float: left;
        
        .container>.row>.col-s-2
            width: 16.6666666%;
            height: 100%;
            float: left;
        
        .container>.row>.col-s-3
            width: 25%;
            height: 100%;
            float: left;
        
        .container>.row>.col-s-4
            width: 33.3333333%;
            height: 100%;
            float: left;
        
        .container>.row>.col-s-5
            width: 41.6666666%;
            height: 100%;
            float: left;
        
        .container>.row>.col-s-6
            width: 50%;
            height: 100%;
            float: left;
        
        .container>.row>.col-s-7
            width: 58.3333333%;
            height: 100%;
            float: left;
        
        .container>.row>.col-s-8
            width: 66.6666666%;
            height: 100%;
            float: left;
        
        .container>.row>.col-s-9
            width: 75%;
            height: 100%;
            float: left;
        
        .container>.row>.col-s-10
            width: 83.3333333%;
            height: 100%;
            float: left;
        
        .container>.row>.col-s-11
            width: 91.6666666%;
            height: 100%;
            float: left;
        
        .container>.row>.col-s-12
            width: 100%;
            height: 100%;
            float: left;
        
    


    @media screen and (min-width: 1200px)
        .container
            width: 1200px;
            height: 300px;
            border:1px solid #333;
            box-sizing: border-box;
        
        .container>.row>.col-m-1
            width: 8.3333333%;
            height: 100%;
            float: left;
        
        .container>.row>.col-m-2
            width: 16.6666666%;
            height: 100%;
            float: left;
        
        .container>.row>.col-m-3
            width: 25%;
            height: 100%;
            float: left;
        
        .container>.row>.col-m-4
            width: 33.3333333%;
            height: 100%;
            float: left;
        
        .container>.row>.col-m-5
            width: 41.6666666%;
            height: 100%;
            float: left;
        
        .container>.row>.col-m-6
            width: 50%;
            height: 100%;
            float: left;
        
        .container>.row>.col-m-7
            width: 58.3333333%;
            height: 100%;
            float: left;
        
        .container>.row>.col-m-8
            width: 66.6666666%;
            height: 100%;
            float: left;
        
        .container>.row>.col-m-9
            width: 75%;
            height: 100%;
            float: left;
        
        .container>.row>.col-m-10
            width: 83.3333333%;
            height: 100%;
            float: left;
        
        .container>.row>.col-m-11
            width: 91.6666666%;
            height: 100%;
            float: left;
        
        .container>.row>.col-m-12
            width: 100%;
            height: 100%;
            float: left;
        
    


    div>[class*=col]
        border:1px solid red;
        box-sizing: border-box;
    
</style>
<body>
<div class="container">
    <div class="row">
        <div class="col-m-3 col-s-4 col-l-6"></div>
        <div class="col-m-3 col-s-4 col-l-6"></div>
        <div class="col-m-3 col-s-4"></div>
        <div class="col-m-3"></div>
    </div>
</div>
</body>
</html>
以上是关于12栅格化布局的主要内容，如果未能解决你的问题，请参考以下文章