如何在CSS网格系统中的列之间做天沟 [英] How to make gutter between columns in a CSS grid system

问题描述

有没有人知道如何为下面的网格系统制作 20px 或 1em

我得到所有的 div s所有连续，但我想知道如何添加一个沟槽之间的每个div 。我这样做是为了了解网格是如何制作的。 jsFiddle Here 。

  body {
 font：20px / 1.2 Verdana，Arial; padding：0px; margin：0px; 
} 
 
 *，*：after，*：before {
 -webkit-box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 box-sizing：border-box; 
} 
 
 .row {width：100％; } 
 
 .row> [class * ='col-'] {/ * ... * /} 
 .row> [class * ='col  - ']：last-of-type {/ * ... * /} 
 
 [class * =col-] {
 float：left; 
 height：200px; 
 background-color：#dedede; 
 border：1px solid＃000; 
 padding-right：20px; 
} 
 
 [class * = col  - ]：last-of-type {
 padding-right：0px; 
} 
 
 .col-1-12 {
 width：calc（100％/ 12）; 
} 
 
 .col-2-12 {
 width：calc（100％/ 12 * 2）; 
} 
 
 .col-3-12 {
 width：calc（100％/ 12 * 3）; 
} 
 .col-4-12 {
 width：calc（100％/ 12 * 4）; 
} 
  

HTML：

 < div class =row> 
< div class =col-4-12> 
 Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 
< / div> 
< div class =col-2-12> 
 Ut enim ad minim veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 
< / div> 
< div class =col-3-12> 
 Duis aute irure dolor in reprehenderit in voluptate velit esse 
 cillum dolore eu fugiat nulla pariatur。除非另有规定，否则不在意，不可抗力。 
< / div> 
< div class =col-3-12> 
 Ut enim ad minim veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 
< / div> 
< / div> 
  

解决方案

，基于列数考虑每个列之间的 20px 。

例如， col-2-12 ：

  width：calc （100％ - （12/2 -1）* 20px）/ 12 * 2）; 
  

说明：

  width：
（100％/ *总宽度* / 
  - （12/2  -  1）* 20px / * col-2 x gutter width * / 
）/ 12 / *总列数* / 
 * 2 / *当前列的大小为col-2 * / 
   
 
 
此外，第一列和最后一列不使用 margin ，可以使用 padding 为 .row ，并将 margin   0 。
 
 
 
此外，当列悬浮时，您应该清除 .row 元素。
  .row { 
 padding：0 20px; 
 * zoom：1; 
} 
 
 .row：after，.row：before {
 content：''; 
 display：table; 
} 
 
 .row：after {clear：both;} 
 
 .row> [class * ='col  - ']：first-child {margin-left：0; } 
 .row> [class * ='col  - ']：last-child {margin-right：0; } 
  
  工作演示 。
 
 
 
 Sassy CSS 
 
 
 
使用CSS预处理器（例如  Sass  ）使网格系统的计算变得有趣！ 
 
 
 
以下是流体网格系统的方法：
  $ total_columns：12; 
 $ total_width：100％; 
 $ gutter_width：2％; 
 
 .row {
 padding：0 $ gutter_width; 
 * zoom：1; 
 
&：after，&：before {content：''; display：table; } 
&：after {clear：both; } 
 
& > [class * ='col  - ']：first-child {margin-left：0; } 
& > [class * ='col  - ']：last-child {margin-right：0; } 
& > [class * ='col-'] {margin：0 $ gutter_width / 2; } 
} 
 
 [class * =col-] {
 float：left; min-height：200px; 
 background-color：#dedede; border：1px solid＃000; 
} 
 
 @for $ i从1到$ total_columns {
 .col  - ＃{$ i}  - ＃{$ total_columns} {
 width： ％ - （$ total_columns / $ i  -  1）* $ gutter_width）/ $ total_columns * $ i; 
} 
} 
  
  在线演示 。
 
Does anyone know how to make a 20px or 1em gutter for the grid system below?

I got all the divs to all go in a row but I want to know how to add a gutter in between each div. I'm doing this to learn how grids are made. jsFiddle Here.
body {
    font:20px/1.2 Verdana, Arial; padding:0px; margin:0px;
}

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing:border-box;
}

.row { width:100%; }

.row > [class*='col-'] { /* ... */ }
.row > [class*='col-']:last-of-type { /* ... */ }

[class*="col-"] {
    float:left; 
    height:200px;
    background-color: #dedede;
    border: 1px solid #000;
    padding-right:20px;
}

[class*=col-]:last-of-type {
    padding-right:0px;
}

.col-1-12 {
    width: calc(100% / 12);
}

.col-2-12 {
    width: calc(100% / 12 * 2);
}

.col-3-12 {
    width: calc(100% / 12 * 3);
}
.col-4-12 {
    width: calc(100% / 12 * 4);
}
HTML:
<div class="row">
    <div class="col-4-12">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="col-2-12">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div>      
    <div class="col-3-12">
        Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>  
    <div class="col-3-12">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div>
</div>

解决方案
Well, here is the calculation of the columns' width, base on the column number considering the gutter of 20px between each column.

For instance, col-2-12:
width: calc( (100% - (12/2 - 1) * 20px) / 12 * 2 );
Explanation:
width:
    (100%   /* Total width */
      - (12/2 - 1) * 20px /* Number of gutters between col-2  x  gutter width */
    ) / 12 /* Total columns */
      * 2  /* Size of the current column which is col-2 */
Also, instead of using margin for the first and the last column, you can use padding for the container .row and set the margin for that columns to 0.

In addition, as the columns are floated, you should clear the float at the bottom of the .row element.
.row {
    padding: 0 20px;
    *zoom: 1;
}

.row:after, .row:before {
    content: ' ';
    display: table;
}

.row:after { clear: both;}

.row > [class*='col-']:first-child { margin-left: 0; }
.row > [class*='col-']:last-child { margin-right: 0; }
WORKING DEMO.

Sassy CSS

Using CSS preprocessors such as Sass, makes the calculation of grid systems fun!

Here is the Sassy way of a fluid grid system:
$total_columns : 12;
$total_width   : 100%;
$gutter_width  : 2%;

.row {
    padding: 0 $gutter_width;
    *zoom: 1;

    &:after, &:before { content: ' '; display: table; }
    &:after { clear: both; }

    & > [class*='col-']:first-child { margin-left: 0; }
    & > [class*='col-']:last-child { margin-right: 0; }
    & > [class*='col-'] { margin: 0 $gutter_width/2; }
}

[class*="col-"] {
    float:left; min-height:200px;
    background-color: #dedede; border: 1px solid #000;
}

@for $i from 1 through $total_columns {
    .col-#{$i}-#{$total_columns} {
        width: (100% - ($total_columns/$i - 1) * $gutter_width) / $total_columns * $i;
    }
}
ONLINE DEMO.

                        
这篇关于如何在CSS网格系统中的列之间做天沟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！