如何使列之間的排水溝的CSS網格系統

Question

有誰知道如何使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. 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> 

Answer 1

嗯，這裏是列寬度的計算中，基座上考慮20px每列之間的檐槽的列數。

例如，col-2-12：

width: calc((100% - (12/2 - 1) * 20px)/12 * 2); 

說明：

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 */ 

而且，而是採用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; } 

WORKING DEMO。

野蠻女友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 from 1 through $total_columns { 
    .col-#{$i}-#{$total_columns} { 
     width: (100% - ($total_columns/$i - 1) * $gutter_width)/$total_columns * $i; 
    } 
} 

ONLINE DEMO。