如何在 CSS 网格系统中的列之间制作装订线

2022-01-18 00:00:00 grid html css grid-system

有人知道如何为下面的网格系统制作 20px 或 1em 排水沟吗?

Does anyone know how to make a 20px or 1em gutter for the grid system below?

我让所有 div 都排成一行，但我想知道如何在每个 div 之间添加一个装订线.我这样做是为了了解如何制作网格.jsFiddle Here.

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>

推荐答案

好吧，这里是列宽的计算，基于列号，考虑到每列之间 20px 的间距.

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

例如，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 */

此外，您可以对容器 .row 使用 padding，而不是使用 margin 并设置该列的 margin 为 0.

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.

此外，由于列是浮动的，您应该清除 .row 元素底部的浮动.

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

工作演示.

使用 CSS 预处理器，例如 Sass，让网格系统的计算变得有趣！

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

这是流动网格系统的时髦方式:

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

在线演示.

相关文章