垂直和水平CSS网格系统

Question

我想从头开始一个博客设计作为一个周末项目，但我有问题看我如何通过CSS渲染它。 在CSS网格系统中，您可以根据元素的数量来定义列的大小，例如我有12个基于网格，我可以决定有2列：2个大小为6或者5个中的一个和7个中的一个。

[编辑]我找到了一个能够实现我想要实现的网站示例：http://www.by-form.net/

感谢〜

Answer 1

关于垂直大小调整的事情是它应该随着内容的增长而增长，这就是为什么网格系统只包含12列的行，因为你需要你的页面随着内容的增长而增长。如前所述（我不确定你是否在提到纯粹的CSS网格系统时或者你是指引导网格系统或类似的东西），你可以使用许多不同的框架来实现这一点，如{{3} }或Bootstrap甚至是Materialize（如果您的目标是了解其工作原理，那么这是一项很好的练习，但如果您希望提高项目效率，请不要这么做。）

Answer 2

感谢您的回答，

我找到了两种方法来回答这个问题：

• the masonry grid Javasript layout非常接近我想要处理它的原始想法。
• 或嵌套网格（网格内的网格），例如profoundgrid

Answer 3

我对此并不了解，但使用 bootstrap css 可以实现网格系统。

check this out

Answer 4

图片中的网格非常复杂。 我不认为你可以实现这样的布局而没有任何足够灵活的行或列。 我的意思是，当内容变大时，你肯定希望盒子增长。这可能是一个很大的问题，因为对下一列和前一列有很多依赖。

I wrote an answer to a similar question showing a variety of CSS Techniques to do layouts. Check it out, it might be helpful here.

无论如何，如果你减少了一些依赖关系，并确切地知道内容的顺序和外观，那就更容易了。