手写一个栅格布局

淩亂°似流年 2022-05-20 09:56 229阅读 0赞

虽然有很多框架可以使用栅格布局，但是使用起来需要指定屏幕的大小来做自适应，一长串，希望自己可以手写一个，根据指定的class类，例如，我们定义一个六列的布局，那么span-2的意思是占用33.33%，占1/3，但是在中屏上，span-2占比为50%，在小屏上占比为100%，根据屏幕大小自适应，不需要我们去指定屏幕了，就方便很多。  
首先我们需要一个包裹容器：

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

然后定义行，因为里面的列的布局我们使用float来实现，所以需要在父元素中并清除浮动

.row:before,
    .row:after { content:''; display: block; clear: both; height:0; }

定义列  
为了简洁，我们使用6列即可，设定6列

[class*='span-'] { float: left; min-height: 1px; width: 16.66%; /*设置间隙*/ padding:5px; background-color: #495060; color: #fff; }

附：  
\[class\*=”col-“\]  
选择所有类名中含有”col-“的元素  
与此类似的还有：  
\[class^=”col-“\]  
选择所有类名中以”col-“开头的元素  
\[class$=”-col”\]  
选择所有类名中以”-col”结尾的元素

定义列的多种宽度  
.span-1\{ width: 16.66%; \}  
.span-2\{ width: 33.33%; \}  
.span-3\{ width: 50%; \}  
.span-4\{ width: 66.664%;\}  
.span-5\{ width: 83.33%; \}  
.span-6\{ width: 100%; \}

常规如此  
现在我们开始做响应式布局，利用 css3的media属性

@media all and (max-width:1440px) {
    .span-1{ width: 33.33%; }
    .span-2{ width: 50%; }
    .span-3{ width: 83.33%; }
    .span-4{ width: 100%; }
    .span-5{ width: 100%; }
    .span-6{ width: 100%; }
    .row  .span-2:last-of-type{ width:100%; }
    .row .span-5~ .span-1 { width:100%; }
    }
    @media all and (max-width:1080px) {
    .span-1{ width: 100%; }
    .span-2{ width: 100%; }
    .span-3{ width: 100%; }
    .span-4{ width: 100%; }
    .span-5{ width: 100%; }
    .span-6{ width: 100%; }
    }

我们自己定义的好处是我们可以根据自己的需要来调整自己的栅格的大小

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

最后一个span-2的大小会变成100%，所以就会有个问题，当一行只有两个span-2的时候，没有充满6列，第二个span-2在中屏上就会变为100%，不与前面的span-2平分，所以在使用的时候要注意，使用的时候，我们要满足相加之和为6  
~(匹配选择器)

# b~p，匹配所有在\#b元素之后的同级p元素。 #

.row .span-5~ .span-1 { width:100%; }

~匹配选择器，b~p匹配所有在b元素之后的同级p元素  
所以这里是span-5之后的span-1会变为100%

我们给容器设置box-sizing：border-box  
注意这一属性只会对padding和border起作用，不包含margin，如果我们想给span设置边框，只能给span加padding，然后在里面再定义一个盒子加border，因为给span加margin的话会影响整个的布局

.container { width: 100%; max-width: 1920px; box-sizing: border-box; overflow: hidden; }

包裹元素同样需要设置overflow：hidden，来自适应子元素的高度。

最后我们在定义box盒子来当哦我们的内容盒子

.box { border:1px solid #ccc; padding:2px; }

我们在使用我们定义的栅格HTML结构：

<div class='container'>
             <div class='row'>
               <div class='span-5'>
                 <div class='box' style='height:200px;'>
                   dfdfdfsfs
                 </div>
               </div>
               <div class='span-1'>
                <div class='box' style='height:200px;'>
                   dfdfdfsfs
                 </div>
               </div>
             </div>
          </div>

注意：css不能选择相邻元素的前一个元素，会引起回潮