W Design & NEWS

用CSS布局未来:网格布局

W-design2015.08.31

    在这篇文章中我们将对CSS网格布局的奇妙世界,一看,一个相对较新的W3C规范,部分已经开始在一些浏览器看天。但是在我们进入这个新的CSS技术是所有关于如何使用它,让我们快速回顾网格理论。我对网格理论的简短介绍我不是一个设计师,我也在跌跌撞撞地CSS网格布局规范了解网格理论,所以不要把我的话,自己去查,但是如果你不在乎,这是我对它的音调:在本质上,一个网格是一组看不见的垂直和水平线,各种设计和内容的网页,杂志或报纸的位置上。一个网格的目标是作为一个基础,把各种内容的内容,并确保这些块对齐,均匀地隔开。一个网格,即使不可见,提供了一个浏览内容的方式视觉。那么有什么CSS呢?CSS是得到一套全新的属性,当结合在一起使用时,允许你定义你的网站内容到网格。这些属性在CSS网格布局规范定义。CSS没有特别被称为处理复杂的布局能力。虽然这可能不是一个问题,当CSS第一次出现时,它已经发展成为一个相当普遍的一个多年来为各种复杂的布局不容易实现。有人在周围缺乏支持采用浮动和绝对定位和各种CSS布局框架是非常有创意的出现。所以这是关于时间的CSS有布局合理的解决方案,支持今天的使用案例。

    我可以用它吗?是的,你今天可以开始使用它,但只有铬已经实现了足够的规格,以发挥网格,你需要打开的实验网络平台功能标志。IE有一个早期实施(追溯到IE10)的规格也已经因为它被添加,所以它不是它完全兼容了。浏览器已经开始实施它,所以它不应该太长的时间,你可以在这个浏览器中使用它。最后,一个polyfill存在,所以你没有理由不去开始尝试(我强烈鼓励你)!所以一个CSS网格布局是什么?它的核心,在CSS网格布局是一组垂直和水平线来定义单元格内容可任意设置。所以它看起来像一个表的方式,除了几个关键的差异,我们将看到后。上图显示了一个网格的构建块:线路:在这种情况下,有4条垂直线和3条水平线。线是从1开始的数字。垂直线显示从左到右,但这取决于写作方向。线可以随意命名,这有助于他们在CSS参考后面我们会看到。轨道:一个轨道是2条平行线之间的空间。因此,在上面的例子中,有3个垂直轨道和2个水平轨道。线是有用的说,内容开始和停止,但轨道是最终内容的去。细胞:细胞是水平和垂直方向的交汇处。在上图中,只有一个细胞被高亮显示,但在网格中有6个细胞。区域:一个区域是一个矩形的形状,可以跨越任意数量的细胞。领域,如线,可以命名。在上面的网格中,我们可以用实例来定义区域,如下图所示:

    现在我们知道了这些简单的定义,让我们来看看是什么使电网如此强大。CSS网格的一个关键的优势是,他们执行的布局和标记的分离。事实上,网格本身是完全纯粹的CSS定义。这意味着,除了父母的HTML元素的网格应用,无需定义的列,任何额外的元素行,单元格或区域。当你想到它,这是一个非常有趣的财产。一方面是为里面的内容是在HTML标记不重要了。这也意味着标记会更轻,更容易理解,因此更容易维护。但更重要的是,这提供了一个非常强大的工具,用于将内容从布局中分离,有效地去耦他们的方式,使任何的改变,对他们没有影响,否则打破其他。作为一个设计师,你可以尝试新的布局,而无需改变任何东西比CSS,只要你的新布局提供预期的线路区域内容的使用。作为开发人员,您需要使用编号或命名的行和区域来定位您的内容在网格上。想象一下简单的下面的网格布局:在这个布局中,已定义了命名区域,允许将内容放在它们的位置,通过引用这些名称。这意味着,我们不仅可以改变这种布局相对容易在未来,只要我们保持指定的区域(在这里命名的区域作为布局的公共接口的方式),但媒体查询也可以用来改变这种布局动态。记住,整体布局中定义的CSS,所以媒体和网格布局起到很好的查询。例如,使用媒体查询,以前的布局可以切换到类似于小屏幕上的类似的东西:足够的理论,让我们来看看如何使用CSS网格布局实际上是定义。

    用CSS创建网格定义一个网格只需要一个HTML元素是:网格容器。这是布局的元素将被应用到。任何HTML元素的一种网格容器的孩子是一个网格项目。网格项目是在网格上的。设置一个元素作为一个网格容器,很简单:容器{显示:网格;}只是这样做虽然是不够的,我们也需要定义这个网格看起来像,有多少列和行,以及它们是多么大。这可以通过使用网格模板,如下面的例子所示:容器{显示:网格;网格模板行:200px 100px;网格模板列:重复(4,100px);}在上面的例子中,我们明确定义了一个有2行和4列的网格。注意repeat()函数的使用来避免重复轨道的4倍的一个片段,这相当于100px 100px 100px 100px。每个定义的曲目都有一个大小,所以我们最后用一个看起来像这样的网格结构:但网格也可以被定义为类似于:容器{显示:网格;网格模板行:自动;网格模板列:重复(4,100px);}在这种情况下,浏览器将继续添加行以适应内容。现在让我们添加一些内容。正如我们以前说过的,我们只需要2个层次的元素,容器和项目,所以让我们使用这个:<div class=“容器”><div class=“第一条”>项目1 < / DIV ><div class=“项”>项目2 < / DIV ><div class=“Item3”>项目3 < / DIV ><div class=“规定”>项目4 < / DIV ><div class=“5”>项目5 < / DIV >< / DIV >其中,没有任何特定的CSS代码位置的项目,导致如下安排:正如你可以看到的,因为我们没有定义这些项目应该坐在网格上,浏览器已经自动定位,他们会把每一个单元格的一个项目,直到第一行得到了填补,在这一点决定把剩下的项目在下一行。该规范定义了一个算法,如果他们没有得到一个位置,并且有时是有用的,例如,你有很多项目或一个动态的项目,不想或不想为他们的位置,如果他们没有给出一个自动放置物品的算法。让我们看看我们的项目如何能被放置在网格。

W design values every chance to work with you.