不用bootstrap，只用CSS创建网格布局

前端开发作者： 2024-08-25 22:50:01

本文译自【http://j4n.co/blog/Creating-your-own-css-grid-system】，英语好的，可直接查看原网页，不需要翻墙。翻译拿不准的地方会有英文原文，方便大家理

a container（容器）
rows（行）
columns（列）
gutters (the space between columns)（列边距）

.grid-container {
        width : 100%;
        max-width : 1200px; 
    }

  /*-- our cleafix hack -- */ 
    .row:before,.row:after {
        content:"";
        display: table ;
         clear:both;
    }

 [class*='col-'] {
        float: left;
        min-height: 1px; 
    }

 1px; 
        width: 16.66%; 
    }

.col-1{
        width: 16.66%; 
    }
    .col-2{ 33.33%; 
    }
    .col-3{ 50%; 
    }
    .col-4{ 66.664%;
    }
    .col-5{ 83.33%;
    }
    .col-6{ 100%;
    }

-- setting border box on all elements inside the grid --
    .grid-container *{
        box-sizing: border-box; 
    }

    [class*='col-'] { 16.66%; 
        -- our gutter --*/
        padding: 12px;
    }

<div class="grid-container outline">
    ="row">
        ="col-1"><p>col-1</></div> 
        > 
    ="col-2">col-2="col-3">col-3> 
>

CSS

.grid-container{ 
        max-width: 1200px;      
    }

    
          display:
        clear:both;
    } 
        min-height:-- our gutter --  12px; 
        background-color: #FFDCDC;
    }

    .col-1{ width: 16.66%; } 33.33%; } 50%;    } 66.66%; } 83.33%; } 100%;   }

    .outline,.outline *{
        outline: 1px solid #F6A1A1; 
    }

    -- some extra column content styling --
    [class*='col-'] > p {
     background-color: #FFC2C2; 
     padding: 0;
     margin:
     text-align: center; 
     color: white; 
    }

HTML

制作网格布局

@media all and (max-width:800px){
        .col-1{ width: 33.33%;    }
        .col-2{ 50%;        }
        .col-3{ 83.33%;    }
        .col-4{ 100%;    }
        .col-5{
        .col-6{ 100%;      }

        .row .col-2:last-of-type{
            width: 100%; 
        }

        .row .col-5 ~ .col-1{
    }

 @media all and (max-width:650px){
    }

="col-4">col-4="col-5">col-5="col-6">col-6>

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_68642.html

相关资讯：不用bootstrap，只用CSS创建网格布局

不用bootstrap，只用CSS创建网格布局

CSS

HTML

制作网格布局

猜你喜欢

相关新闻

推荐模板

推荐精华

热门标签