I'm trying to learn how to build a grid system - and so far this is what I've got. What I want to know is, how would I create actual gaps between the colums? If I put in a margin, everything goes out of the grid, because "box-sizing" only accounts for borders and padding. The only way I can think of doing it is to give every column a thick border.
我正在努力学习如何建立一个网格系统 - 到目前为止,这就是我所拥有的。我想知道的是,我如何在列之间创造实际的差距?如果我放入一个边距,一切都没有了,因为“box-sizing”只考虑边框和填充。我能想到的唯一方法就是给每一列增加一个粗边。
Is there a way to get margins to work, so there's an actual space between the columns?
有没有办法让边距工作,所以列之间有一个实际的空间?
1 个解决方案
#1
0
With a smart but basic use of pseudo classes, you can easily get a great solution.
通过智能但基本使用伪类,您可以轻松获得一个很好的解决方案。
Let's assume your columns are using the class .column and you want 5 columns. That would be 20% each, minus a 2% gap (for example).
假设您的列使用类.column,您需要5列。那将是每个20%,减去2%的差距(例如)。
First of all, with box-sizing: border-box; you include padding and borders in the width as you mentioned, which is a fairly good practice.
首先,使用盒子大小:边框;你提到的宽度包括填充和边框,这是一个相当不错的做法。
.col {
box-sizing: border-box;
width: 18%;
margin-right: 2%;
}
After that, for the last .col we can use the pseudo class :last-child and override the right margin, like this:
在那之后,对于最后一个.col,我们可以使用伪类:last-child并覆盖右边距,如下所示:
.col:last-child {
margin-right: 0;
}
The numbers on this example don't actually crunch right, but it illustrates a good way of achieving what you want while using a scalable and maintainable CSS code.
这个例子中的数字实际上并没有正确处理,但它说明了在使用可扩展和可维护的CSS代码时实现所需内容的好方法。
EDIT: After reviewing your pen, I strongly advise against using the border to "separate" the columns. It's a visual hack and no more, one which actually depends on the background colour of your website. I recommend a detailed overview of how the "big shots" are doing it, such as Bootstrap or Foundation.
编辑:在审查你的笔后,我强烈建议不要使用边框来“分离”列。这是一个视觉黑客,不再是,实际上取决于您网站的背景颜色。我建议详细了解“大镜头”是如何做到的,例如Bootstrap或Foundation。
#1
0
With a smart but basic use of pseudo classes, you can easily get a great solution.
通过智能但基本使用伪类,您可以轻松获得一个很好的解决方案。
Let's assume your columns are using the class .column and you want 5 columns. That would be 20% each, minus a 2% gap (for example).
假设您的列使用类.column,您需要5列。那将是每个20%,减去2%的差距(例如)。
First of all, with box-sizing: border-box; you include padding and borders in the width as you mentioned, which is a fairly good practice.
首先,使用盒子大小:边框;你提到的宽度包括填充和边框,这是一个相当不错的做法。
.col {
box-sizing: border-box;
width: 18%;
margin-right: 2%;
}
After that, for the last .col we can use the pseudo class :last-child and override the right margin, like this:
在那之后,对于最后一个.col,我们可以使用伪类:last-child并覆盖右边距,如下所示:
.col:last-child {
margin-right: 0;
}
The numbers on this example don't actually crunch right, but it illustrates a good way of achieving what you want while using a scalable and maintainable CSS code.
这个例子中的数字实际上并没有正确处理,但它说明了在使用可扩展和可维护的CSS代码时实现所需内容的好方法。
EDIT: After reviewing your pen, I strongly advise against using the border to "separate" the columns. It's a visual hack and no more, one which actually depends on the background colour of your website. I recommend a detailed overview of how the "big shots" are doing it, such as Bootstrap or Foundation.
编辑:在审查你的笔后,我强烈建议不要使用边框来“分离”列。这是一个视觉黑客,不再是,实际上取决于您网站的背景颜色。我建议详细了解“大镜头”是如何做到的,例如Bootstrap或Foundation。