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

发布时间:2020-11-11 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了不用bootstrap,只用CSS创建网格布局编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文译自【http://j4n.co/blog/Creating-your-own-css-grid-system】,英语好的,可直接查看原网页,不需要翻墙。

翻译拿不准的地方会有英文原文,方便大家理解。

一般的网格布局如下

grid-elements

可以看出主要有以下几个部分

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

容器

container

容器的目的就是设置整个网格的宽度,通常设置为100%,但可能要给大屏显示器设置一个最大宽度。

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

row

 

行是为了将列放在里面,并防止其溢出到其他行中。为了实现这个目的,我们采用清楚浮动的hack技术来确保所有的内容都在行中。

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

column

 

毫无疑问,列是网格布局中最复杂的一部分。首先,在CSS当中,有好几种不同的列的定位方式,而且还要考虑不同的宽度,比如响应式设计。在这里我们将列设定位置,并给出宽度。下一部分再讲响应式设计。

列定位

浮动,行内块,块级表格(display-table),flex,有各种各样的方法。从我个人经验出发,最不容易出错和使用最广泛的就是float了。如果列是空的,将会漂浮在其他元素上面,为了防止这个,我们可以设定一个最小的宽度。

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

列宽

为了确定一列的大小,我们可用容器的宽度来除以总的列数。在这里,容器的宽度是100%,假设是6列,那么一列就是100%/6=16.66%。

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

我们唯一要注意的就是,不管你最终多少列,各列加起来不能超过容器的宽度。

列边距

 

column-gutters

 

在'border-box' box-sizing模型出现之前,给一个百分比元素一个不可改变的宽度是一件很痛苦的事。幸运的是,用'border-box' box-sizing可以轻易的做到。

Before the 'border-box' box-sizing model,giving percentage-width elements a static padding was a real pain. Luckily,using the 'border-box' model,we can create gutters with ease.

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

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

(Personally,I use * {box-sizing: border-box;} in my CSS to apply border-box to everything on the page).

(这句不好翻译,主要是还不理解box-sizing)

基本网格布局如下:

<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

    >
            > 
            >

hr/>

 

制作网格布局

针对手机,调整我们的网格布局非常简单,只需要调整列的宽度就够了。为简单起见,在屏幕小于800px时,将宽度增大一倍。要注意的就是当.col-2 , .col-1,col-5在一行的时候,这时候我们将.col-2 , .col-1占满整行。

The only thing to watch out for is a few exceptions where the last column in the row hangs off the end. Such as in the case of the .col-2 columns and the.col-1 beside the .col-5 column. 
To counter this,we'll make the last .col-2 and .col-1 in the row 100% wide.

@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>

要提醒的是这只是创建网格布局的开始,这还算不上是一个框架或完美的解决方法,但至少让我们觉得采用CSS创建网格布局的过程并不神秘。

总结

以上是编程之家为你收集整理的不用bootstrap,只用CSS创建网格布局全部内容,希望文章能够帮你解决不用bootstrap,只用CSS创建网格布局所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478