跳到主要内容

建立现代网格系统

  • 所需知识:中级CSS,中间HTML
  • 要求:代码编辑器,浏览器
  • 项目时间:1小时
  • 支持文件

坦率地说,建立网站非常棒。我们创造了丰富,充满活力的体验,全世界数百,数千,数百万人都可以看到这些体验。我们可以玩新玩具,与所有最好的公司合作,并且不会像书呆子那样痴迷(你知道这是真的)。那是好事。

糟糕的(好的,具有挑战性的)是我们必须应对越来越多类型的浏览器和设备,并构建比以往更多,更复杂和功能更全面的网站。这就是我们需要网格系统的原因。它们可以帮助我们更快更好地构建产品,并着眼于我们行业的未来。让我们看看现代网格系统需要什么,然后构建它。

01.无处不在的网格系统

网格不是新的。保守地说,已有数十个完全可行的网格系统可以帮助您完成工作。有些东西,如960.gs,Blueprint,Bootstrap,320和Up,Golden Grid,semantic.gs ......等等,令人作呕。每个都带来了一些东西,每个都留下了一些需要的东西。

网格如此受欢迎的原因是它们起作用。当您为Web创建布局时,十分之九的合理灵活的网格系统将使您的布局达到90%,并节省数小时的自定义编码。有合理的担忧,网格系统限制了我们的思维,并限制我们应该避免的事情,但有一点纪律和坚实的设计过程,我们可以避免这种情况。

Some of the existing grid systems out there

一些现有的网格系统

02.我们需要从网格中获得什么

我们在网格系统中寻找什么?我们在这里看到的不是每个问题的解决方案,而是一种前瞻性思维(并且很酷)攻击问题的方式。

这是我们对网格的需求:

  • 我们需要灵活的现实世界布局。我们需要在配置中有足够的列,以允许我们覆盖大部分可能的布局要求。这意味着在很多组中可以分割的东西,而不会过于细化。对于我们今天的目的,我们将使用12.这使我们可以轻松地将页面分成两半,三分之一和四分之一。
  • 我们需要能够嵌套网格。单个级别的列使我们成为那里的一部分,但是拥有可以嵌套到N级的东西会给你带来难以置信的灵活性。
  • 我们需要网格响应。这可能看起来像是左边的场,但相信我,这是一个要求。从字面上看,您的网站需要支持数百种不同的设备,而这个数字只会增加。 960个网格已经死了,并且很好地解决了问题。我们的网格应该是流动的(基于百分比)并配置为在较小的设备上缩小。
  • 我们需要网格可以修改。从响应式网格系统的用户可以看到的最大抱怨之一是难以修改诸如装订线尺寸之类的东西。根据4.4%到3.6%排水沟的变化重新计算百分比并不是一个有趣的方式来花一个小时。我们将通过使用一个相对较少使用的CSS属性来解决这个问题,我们将稍微讨论一下。它太酷了。
  • 我们需要网格向后兼容。到了一定程度。整个世界都不使用Chrome或iOS5 Mobile Safari。话虽如此,我们今天的目标将是支持Android,iOS 4 +,Webkit浏览器,Firefox和IE8 +。

03.入门

首先,我们需要一个名为空白的CSS文件Grid.css。我们将把这个文件用于我们的网格,因此它可以被放入任何项目中。作为旁注,我们今天构建的网格将与所使用的网格完全(或非常接近)基金会3(目前在2.2.1)。

首先,让我们设置网格的语法(这很简单)。基本上,我们创建了包含列的行。我们将使用这些词语来保持人类的可读性。

.row {}
.column,.columns {}

.row .one {}
.row .two {}
.row .three {}
.row .four {}
.row .five {}
.row .six {}
.row .seven {}
.row .eight {}
.row .nine {}
.row .ten {}
.row .eleven {}
.row .twelve {}

使用这些空声明,您可以看到我们的语法在HTML中的样子。要创建具有三个大小相同的列的行,我们将执行以下操作:



...


...


...

现在,每个列都可以包含我们想要的任意内容。现在,我们需要让那些列和行实际工作。将这些属性添加到。行。柱。列声明:

.row {width:1000px;最大宽度:100%;最小宽度:768px;保证金:0自动; }
.column,.columns {float:left;最小高度:1px;填充:0 15px;位置:相对; }

好的,我们来解释一下这里发生了什么:

  • 行宽:在row元素上,我们将行设置为1,000px宽(我们的基页宽度)。但是,我们还说最大宽度为100%,这意味着随着浏览器缩小(例如,在iPad或iPhone上),该行不能超过窗口的宽度。我们的最小宽度将确保IE8中的行不会变得很小,这不支持媒体查询。
  • 行边距:通过设置margin:0 Auto,我们将行放在页面中心。
  • 柱定位:我们的柱子现在都是左侧浮动,因此它们会相互叠加。
  • 列最小高度:Min-height属性确保空列仍然影响浮动顺序。
  • 列填充:这个填充属性实际上是我们的柱沟。通过将其设置为15px,我们在每列的左侧和右侧放置15px,在列之间创建30px的排水沟。

A twelve column grid provides a lot of layout flexibility

十二列网格提供了很多布局灵活性

这显然只是我们网格工作所需要的一部分。显然,我们需要声明列的宽度。由于我们有一个12列网格,这些宽度是宽度分为12的列数,百分比为100.例如:6/12 = 0.5,50%。我们的宽度看起来像这样:

.row .one {width:8.33%}
.row .two {width:16.66%}
.row .three {width:25%}
.row .four {width:33.33%}
.row .five {width:41.66%}
.row .six {width:50%}
.row .seven {width:58.33%}
.row .eight {width:66.66%}
.row .nine {width:75%}
.row .ten {width:83.33%}
.row .eleven {width:91.66%}
.row .twelve {width:100%}

我们的列都具有代表其列数定义的大小的宽度。您可能会想到的是,“如果我们根据100的划分来制作大小的列,那么我们放在它们上面的填充物是否会使它们更宽并且使我们的网格变得更糟?”通常,是的。让我们看一下我们还没有的关键部分,这是一个简单的声明,你将为页面上的每个元素做出:

* {border-box; Box-sizing:border-box; }

这个小小的财产对我们来说既有益又有讽刺意味。它说的是页面上的元素不应该将填充和边框附加到对象的宽度,而应该将它们视为宽度的一部分。因此,具有50%宽度且没有填充的对象将具有与具有50%宽度和15px内部填充的对象相同的宽度。很酷吧?

是。很酷。它也是IE6的盒子型号。讽刺吧?所有这一切,以及IE6上的所有这些(以及正确的)以及IE6实际上以比任何后续浏览器更加理智的方式处理盒子模型。感谢W3C。如果没有这个CSS属性,或者没有IE6盒子模型,就不可能创建宽度为50%的对象,但填充量为15px。 (注意:并非完全正确。但支持计算值()在CSS中基本上不存在。)

This is what older grids looked like to handle gutters and width. Lots of annoying percentages

这就是较旧的网格看起来像处理排水沟和宽度。很多恼人的百分比

This is what our grid looks like. The gutters are now handled by padding on the columns rather than margins, but the widths are all dead simple

这就是我们网格的样子。现在,通过在列而不是边距上填充来处理排水沟,但宽度都非常简单

现在,为了让它真正起作用,我们还需要一些供应商前缀属性(iOS 4不支持它-webkit和Firefox需要-moz)。完整声明如下:

* {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }

如果你想进一步潜入边框,保罗爱尔兰写了一篇很棒的文章关于在所有方面使用边框的好处。

在我们深入研究一些砂砾碎片之前,让我们回顾一下。我们的网格现在应该如下所示:

* {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }

.row {width:1000px;最大宽度:100%;最小宽度:768px;保证金:0自动; }

.column,.columns {float:left;最小高度:1px;填充:0 15px;位置:相对; }

.row .one {width:8.33%}
.row .two {width:16.66%}
.row .three {width:25%}
.row .four {width:33.33%}
.row .five {width:41.66%}
.row .six {width:50%}
.row .seven {width:58.33%}
.row .eight {width:66.66%}
.row .nine {width:75%}
.row .ten {width:83.33%}
.row .eleven {width:91.66%}
.row .twelve {width:100%}

取得进展,但它还没有发挥作用。首先,让我们配置我们的网格以支持嵌套。由于我们使用百分比,这很简单。任何嵌套的行都会有一些特定的覆盖,否则只会...工作。之后添加此行。行宣言:

.row .row {width:auto; max-width:none; min-width:0;保证金:0 -15px; }

这里发生的唯一棘手的事情是我们在行上设置了负的左右边距。我们这样做是因为容器行上有填充,嵌套列也是如此 - 但我们不想在该填充上加倍,我们的嵌套行将全部缩进。负边距和宽度:自动表示该行将扩展到容器行的边缘,位于包含列的填充之外。

值得注意的是,这就是我们需要支持嵌套的全部内容。我们现在可以在HTML中使用如下所示的语法:





...


...




...


...

这个简单的改变为我们开辟了一系列广泛的布局选择。可悲的是,我们的网格仍然没有多少变化而破碎。接下来,让我们确保我们的行实际上正确堆叠,尽管只包含浮动元素(这通常意味着行没有高度)。我们不想使用溢出:隐藏在。行,以防我们需要像盒子阴影这样的东西出来。相反,使用这个:

/ * Nicolas Gallagher的micro clearfix * /
.row:before,.row:after,.clearfix:before,.clearfix:after {content:“”;显示:表; }
.row:after,.clearfix:{clear:both; }
.row,.clearfix {zoom:1; }

如你所见,道具来Nicolas Gallagher为此代码片段。这可以确保我们的行获得真正的高度,并且彼此堆叠的行不会与其列重叠或做任何其他不幸的事情。它依赖于表格显示的行为,以及内容:之后提供的东西可以清除每行的浮动。

有了这个,我们的网格实际上正在工作。我们可以创建行和列,并用任意内容填充它们 - 甚至是其他行。最后一件事,一个帮助我们的网格看起来非常甜美的精美。将这些线放在后面。柱。列宣言:

[class * =“column”] + [class * =“column”]:last-child {float:right; }
[class * =“column”] + [class * =“column”]。end {float:left; }

如果你之前没有使用过像这样的选择器,这可能看起来很荒谬。让我们分解一下:

  • [类* =”塔”]- 这是一个有点看见的选择器,它以HTML属性的值为目标。在这种情况下,“class”属性。基本上任何具有类的HTML元素包含“列”将在这里匹配。你必须非常小心这些类型的选择器,因为它们也匹配一类“sidebar-column”或“sidebarcolumn”。
  • [class * =“column”] + [class * =“column”]- 这个兄弟选择器意味着我们只想定位来的列另一栏。这基本上可以帮助我们省略单个列,例如单个中心列或十二个列块。
  • [class * =“column”] + [class * =“column”]:last-child- 最后,这意味着我们只想要了持续另一列之后的列。否则,我们将获得除第一列之外的所有列。
  • 漂浮:对- 这有助于我们解决百分比宽度网格的问题:浏览器不会以相同的方式对它们进行舍入。如果没有这个,你会注意到行并不总是在完全相同的位置结束。如果66.66%的宽度意味着666.6像素,一些浏览器每次都会降低该值(仅666px,Chrome),有些将交换楼层和天花板,以便一个被四舍五入,下一个向下等等(Firefox)和一些将甚至将百分比放在首位。将最后一列向右浮动意味着,虽然装订线可能是一个或两个更大的像素,但右手边缘将始终相同。
  • [class * =“column”] + [class * =“column”]。结束- 实际上你可能不希望最后一列每次都正确。如果您创建只有两行的行.four.column在右边有故意空的空格块,你可以添加一个.end类来确保它不会浮动。这通常不太可能,因此它是您必须选择的那个。

呼!对于几行来说,这是一个重要的解释,但它们是很酷的CSS选择器,值得一点点细分。现在我们已经完成了(目前)。让我们再说一遍。这是我们的网格应该是什么样子:

* {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }

.row {width:1000px;最大宽度:100%;最小宽度:768px;保证金:0自动; }
.row .row {width:auto; max-width:none; min-width:0;保证金:0 -15px; }

.column,.columns {float:left;最小高度:1px;填充:0 15px;位置:相对; }
[class * =“column”] + [class * =“column”]:last-child {float:right; }
[class * =“column”] + [class * =“column”]。end {float:left; }

.row .one {width:8.33%}
.row .two {width:16.66%}
.row .three {width:25%}
.row .four {width:33.33%}
.row .five {width:41.66%}
.row .six {width:50%}
.row .seven {width:58.33%}
.row .eight {width:66.66%}
.row .nine {width:75%}
.row .ten {width:83.33%}
.row .eleven {width:91.66%}
.row .twelve {width:100%}

/ * Nicolas Gallagher的micro clearfix * /
.row:before,.row:after,.clearfix:before,.clearfix:after {content:“”;显示:表; }
.row:after,.clearfix:{clear:both; }
.row,.clearfix {zoom:1; }

这符合我们现代电网的标准吗?让我们检查:

  • 灵活性:是的,我们有足够的列和嵌套来完成工作。
  • 嵌套:检查,见上文。
  • 响应:还没。嗯。我们这样做。

04.使其具有响应性

对于本教程,我们将着眼于实现响应的最低限度:在小型设备上线性化网格并使每个列堆叠在前一个上面。我们将使用CSS3媒体查询,除了IE8之外,我们的所有目标都支持这种查询:

@media only screen and(max-width:767px){
...
}

我们将小型设备媒体查询与小于iPad(在常规或视网膜显示器上以任何方向报告其宽度为768像素)相匹配。在媒体查询中,我们需要做一些覆盖:

.row {width:auto; min-width:0; margin-left:0; margin-right:0; }

.column,.columns {width:auto!important; float:none; }
.column:last-child,.columns:last-child {float:none; }
[class * =“column”] + [class * =“column”]:last-child {float:none; }

.column:before,.columns:before,.column:after,.columns:after {content:“”;显示:表; }
.column:after,.columns:在{clear:both;之后}

这里我们不需要太多详细解释:我们基本上告诉浏览器,在一个小显示器上,不浮动列,不给它们一个最小宽度,不给它们边距。我们依靠与上面相同的填充来在屏幕的内容和边缘之间创建间隙,并且在我们进行良好测量时我们清除每列上的浮动。它堆叠我们的网格,我们基于%的设计为我们处理剩下的工作。

好的,现在我们如何做清单:

  • 灵活性:还好。
  • 嵌套:摇滚乐。
  • 响应:对。我们可以做更多的事情(并且在基金会3网格中Github上,我们这样做)但是现在已经完成了这项工作。
  • 修改:是的,很容易。通过更改列上的填充和行上的负边距,我们可以使用两个值修改我们的装订线大小。如果我们想要一个24列网格,那么简单的数学就是将1,2,3除以24而不是12。甜。
  • 向后兼容:是。 Box-sizing实际上可以像IE8一样工作(去图)。有行为文件您可以使用在IE7中启用box-sizing属性,但它有一些自动宽度的严重问题。希望很快就能解决 - 如果是的话,我们的网格已准备好进入IE7。

这就是jenga。走出去,创造甜蜜的布局。

05.坚持下去。这不是语义

是的,事实并非如此。你有我们事情就是这样:你可以像semantic.gs一样创建语义(数据和显示的清晰分离)网格,但它需要像Sass这样的预处理器。除了需要另一个工具(实际上,Sass和类似的工具非常酷),语义网格的输出CSS非常坦率地说是疯狂的。您最终会使用逗号分隔的选择器,这些选择器超出了读取和修改它们的能力,或者反复重复使用的属性。语义真棒,真的,将来这将开始变得重要,但我们现在不在那里。为客户建立一个更好的网站意味着快速构建和迭代,并且您可以通过不担心这个(太多)来更快地构建。

06.接下来的步骤

一个强大,完整的网格系统需要诸如偏移,源排序,N对象网格(如三向块网格等)之类的东西。您可以查看此网格的完整版本(并根据需要查看它)Github上。由于Foundation是开源的,可以使用这个网格,查看完整的网格,然后帮助我们做得更好。我们的行业每天都在发展,工具也应该如此。

只要他记得,Jonathan一直是一个巨大的极客,可以追溯到Prodigy那个旧的在线迷宫游戏,直到从事数字媒体设计的职业生涯。他在阿拉巴马州的金融服务软件工作了一段时间,然后前往西海岸寻找ZURB:Www.zurb.com

喜欢这个?阅读这些!



翻译字数超限