排版网格 Chris Coyier 于 2012年10月11日 DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费额度! 这不是一个“框架”或任何其他东西,我只是在玩弄排版,并让内容根据严格的水平和垂直网格对齐。 它受到几年前 Richard Rutter 的 Compose to a Vertical Rhythm 文章的启发,但使用了 无单位行高。 查看演示 下载文件 font: 10px/2 "Lucida Grande", Helvetica, Sans-Serif; 我认为结果非常令人满意。 如果您的网站文本内容很多,我认为仔细关注底层网格非常重要。
看到其他人如何创建 CSS 网格总是很有趣。
谢谢!
有趣的素材 Chris。 我最近一直在阅读各种网格炒作,排版部分至少可以说很有趣。 我喜欢你那个小演示布局!
太棒了。 排版网格,我需要在推特上分享这个!
我理解垂直网格的论点,但我一直无法以令人满意的方式将其付诸实践。
真的不错 Chris。 对我来说,最难的部分始终是行高,嗯,让所有标题和段落看起来都恰到好处。 我刚刚下载了文件以进一步检查。 谢谢。
不错,但在我这里没有水平对齐..
看起来是个不错的开始。 这应该会帮助那些希望为其网站打造“笔记本”风格的人。
文本和线条在我的 Chrome 浏览器中有点偏差,但仍然非常接近。
在我的浏览器中看起来不错.. 我很喜欢,我看到这在许多项目中都派得上用场。 干得漂亮。
虽然我不是 CSS 网格的粉丝(参见投票),但我绝对喜欢排版网格。 它们让我感到内心温暖和模糊。
不错,正如他们所说,细节决定成败。 我有两个排版样式表,一个使用 16px 默认字体大小,另一个使用 12px。 16px? 我正在尝试将其用于我的网站重新设计。
无论如何,现在有一些工具可以帮助进行数学计算,例如 Baseline Rhythm Calculator、Adobe Air EM 计算器(由 James Whittaker 开发)以及非常有用的 Grid 书签工具。
您始终可以通过 http://pxtoem.com 获取一些基于 EM 的 CSS
不错 Chris。
@Karl 我很喜欢 Baseline Rhythm Calculator,它是一个非常有用的工具,我将其用于我处理的大多数事情。
A List Apart 几年前写了一篇关于这个主题的好文章。
也许是我理解错了,但您说过您使用的是无单位行高,但您的演示中却使用了像素行高。 :?
我不确定您在看哪里? 演示中只在一个地方设置了行高,即在 body 中,并且设置为“2”。
blockquote {
font: italic 15px/**20px** Georgia, Serif;
width: 180px;
}
看起来棒极了!
我想看看您如何在所有 HTML 元素(有人可能在设计中使用它们)上使用基线节奏/网格,特别是:表格、表单和带有顶部/底部边框的元素等。 在我自己的实验中,我发现这些元素通常会破坏大多数浏览器中的任何节奏。
最终,当网站内容变得比简单的排版元素更复杂时,由于轻微的浏览器渲染差异,基线网格将不可行。
谢谢。 非常有趣的文章。
有趣的想法。 Ralph