CSS 网格系统在实现非基于网格的设计时如何节省时间？

发布于 2025-01-01 12:02:36 字数 434 浏览 1 评论 0原文

CSS 网格系统有哪些功能可以快速完成而我们没有它们就无法完成？

我使用各种资源从事自由项目，我得到的 Photoshop 文件 (PSD) 不是基于网格或不使用相同的网格宽度和列、装订线。我没有与设计师直接沟通。我只直接从客户或其他自由职业者/分包商那里获取设计文件。 我擅长为 PSD 制作 HTML CSS，无需使用任何网格，也兼容 IE。

如今，twitter bootstrap 在社区中很流行，它基于 940px 宽度的网格和其他按钮，并且jquery 插件。

我的问题是专门针对使用网格的。与通常的方法相比，它如何减少我们的开发时间而不限制我们的任何事情，特别是当设计人员位于远程位置并且我没有直接连接到他们时，甚至我不能强迫他们使用任何基于网格的系统。一些客户要求我使用 twitter bootstrap，但他们给我的设计文件与 940px 网格不匹配。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苍暮颜 2025-01-08 12:02:36

如果您正在实现的设计不是基于布局网格，那么 CSS 网格系统根本无法帮助您。

我可能会在这里展示我缺乏设计知识，但我的理解是布局网格指定布局列的最小宽度，例如60px，以及装订线的宽度（列之间的水平空间），例如20px。较大的列由最小列宽和装订线的倍数组成 - 例如，4 跨度的列与四个单独的布局列加三个装订线一样宽。

这是一种使不同列数的布局看起来彼此一致的方法。

CSS 网格系统在 CSS 中为您实现这一点，因此您无需编写任何 CSS。

例如 http://twitter.github.com/bootstrap/scaffolding.html#grid- system

您只需将类应用于 HTML 元素。对于 Twitter Bootstrap 的 CSS 网格系统，要使 4 跨度列和 8 跨度列彼此相邻，您可以使用以下 HTML：

<div class="row">
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>

然后获取正确的宽度和装订线，以及 float 相关代码的正确组合，以便将它们布局为列。因此，您无需为各个列编写（并在各种浏览器中调试）任何布局 CSS，从而节省时间。

但是，如果您正在实现的设计不使用布局网格，那么 CSS 网格系统根本无法帮助您，因为您没有实现布局网格。

If the design you’re implementing isn’t based on a layout grid, then a CSS grid system won’t help you at all.

I’ll probably show my lack of design knowledge here, but my understanding is that layout grid specifies a minimum width for layout columns, e.g. 60px, and a width for the gutter (the horizontal space between columns), e.g. 20px. Larger columns are then made up of multiples of the minimum column width and the gutter — e.g. a 4-span column is as wide as four individual layout columns, plus three gutters.

It’s a way to make layouts with different numbers of columns look consistent with each other.

CSS grid systems implement this in CSS for you, so that you don’t have to write any CSS.

E.g. http://twitter.github.com/bootstrap/scaffolding.html#grid-system

You just apply classes to HTML elements. In the case of Twitter Bootstrap’s CSS grid system, to have a 4-span column and and 8-span column next to each other, you use the following HTML:

<div class="row">
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>

The <div>s then get the right widths and gutters, and the right combination of float-related code so that they’re laid out as columns. So you get the time savings from not having to write (and debug in various browsers) any layout CSS for individual columns.

But if the design you’re implementing doesn’t use a layout grid, then a CSS grid system won’t help you at all, because you’re not implementing a layout grid.

回复收藏 0 原文

~没有更多了~