前端开发者学堂 - fedev.cn

Grid

#Grid#Layout#Grid
发布于 大漠

本文由大漠根据Chris Coyier的《grid》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://css-tricks.com/almanac/properties/g/grid，以及作者相关信息

——作者：Chris Coyier

——译者：大漠

CSS中的grid属性是网格布局的一个基础。它主要用来解决使用老布局技术还来的一些问题，比如浮动布局（除除浮动）、inline-block布局（间距问题）。通过提供一种新的方式来给Web页面布局。

这个想法是把一个元素定义为一个网格。可以想像成电子表格的行与列。然后，你可以把每个子元素定义成一个列和行（类似于单元格）。不需要修改任何标记，直接通过css搞定。

随着这个技术的成熟，我们可以使用这个方法解决我们老的布局技巧带来的问题。而有他的主要优点是你可以在一个页面上不改变文档流的顺序重新排列你的布局顺序。

注：请注意，CSS网格布局目前还是一个工作草案。也就是说，他们的修改会影响目前支持的浏览器实现效果。

属性

因为CSS网格布局是一个模块而不是一个属性，他集合了一堆的属性（大约15个）要一起使用。一些是用来设置父元素（网格元素），一些用来设置子元素（网格项目）。

目前支持的属性

以下是网格元素属性（主要适用于父元素，也就是网格容器）。

display:grid | inline-grid

display: other values | grid | inline-grid

这个将一个元素定义为网格格式化上下文。

grid-rows | grid-columns

grid-rows | grid-columns:  
<track-list>    => [ [ <string> ]* <track-group> [ <string> ]* ]+ | none
<track-group>   => <track-minmax> | [ repeat( <positive-integer> , [ [ <string> ]* <track-minmax> [ <string> ]* ]+ ) ]
<track-minmax>  => minmax( <track-breadth> , <track-breadth> ) | auto | <track-breadth>
<track-breadth> => <length> | <percentage> | <fraction> | min-content | max-content

这个定义了网格尺寸范围内定义的行或列的数量。

这些属性支持以空格分开的一列的值。通过他们的维度每个值将定义一个新的列或行。一个4列的值将创四例或四行。而一个单一的值将创建一个单行或单列。

属性值包括length(比如说px或者em)、百分比、分数值（fr,详细见下面），auto(或者fit-content)，min-content，max-content和minmax()或者repeat()函数。

repeat()函数是专门设计这个模块的。它充许你定义一个模式重复X次。比如说我们想创建一个12列间距都为1%相等宽度的列，就可以定义为“1fr repeat(11,1% 1fr)”。它的意思就是“1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr”。

到写这篇文章时，repeat()还不被支持，不过你可以使用这个类似的语法：“(pattern)[x]”。也就是“1fr (1% 1fr)[11]”。

重要提示：“grid-rows”和“grid-columns”还不适用，但在IE10+下支持这两属性。最新的和官网的语法是“grid-definition-rows”和“grid-definition-columns”。

以下是设置网格项目的属性，适用于网格项目。

grid-row | grid-column

grid-row | grid-column: <integer> [DEFAULT: auto]

这个主要用来定义网格项目显示在哪行和哪列。

重要提示：grid-row是grid-row-position和grid-row-span的标准缩写。当前IE10仅支持grid-row中的grid-row-position，其他的还不支持。同样适用于grid-column。

grid-row-span | grid-column-span

grid-row-span | grid-column-span: <integer> [默认值: 1]

用来定义行和单元素之间的间距。如果没有显式指定，网格项目只会占据自己的单元格。一个正数值会使用网格项目扩展到下一行/单元格。

grid-row-align | grid-column-align

grid-row-align | grid-column-align: start | end | center | stretch [默认值: stretch]

grid-row-align用来定义在行中垂直方向的对齐方式，grid-column-align用来定义在列中的水平方向的对齐方式。

如查没有显式的定义，网格项目占据整个单元格。如果指定的设置了其他三个任何值，网格项目大小根据其内容和对齐方式（start,end,center）做调整。

请注意，start并不意味着左对齐，这主要grid-column-algin根据文档书写模式来决定。也就是说，当文档书写模式为“ltr”时，是左对齐；当文档书写模式为“trl”时是右对齐。这个也同样适用于end。

新单位：fr

在使用“grid-rows”和“grid-columns”时包括了一个新单位：fr。他代表着“可用空间的分数”。可以想像成行或列固定尺寸减去基本内容的空间的百分比。

将要支持的属性

属性的覆盖范围是使用网格布局的基本要求，他们只有第一个（也是目前唯一的）属性支持这个模块。

根据官方的规范和更多的参与，将来支持这个模块的属性还会有：

  • grid-template：用标识符来定义网格模板
  • grid-column-position：目前为止grid-column标准写法“grid-column-position”和“grid-column-span”只支持grid-column-position
  • grid-row-position：同上
  • grid-position：是grid-column-position和grid-row-position的缩写
  • grid-span：是grid-column-span和grid-column-span的缩写
  • grid-area：是grid-column-position、grid-row-position、grid-column-span和grid-row-span的缩写
  • grid-auto-columns：用来改变列的默认大小
  • grid-auto-rows：用来改变行的默认大小
  • grid-auto-flow：允许网格项目自动流向单元格

不幸的是,这些属性目前不支持的。

实例

让我们做一个小例子。请考虑这样的结构:

<div class="main">
  My awesome content here
</div>
  
<footer class="footer">
   Some informations here
</footer>
  
<header class="header">
  My site title goes here
</header>
  
<aside class="sidebar">
    Here is my side content
</aside>

请注意标记顺序完全没有影响到最终渲染。

body {
 /* 首先将body定义为一个网格容器 */
 display: grid;
   
 /* 然后定义列数，并设置他们的尺寸 */
 /* 小心，列与列之间的间距也包括在实际列中 */
 /* 1、这个意思我们有三列: 
  * 第一列宽度为200px
  * 和第二列有一个1%的margin 
  * 第三列将占据剩余空间
  */
 grid-columns: 200px 1% 1fr; /* 1 */
   
 /* 现在我们来定义行数和他们的尺寸  */
 /* 2. 这里我们需要创建5行: 
  * 第一行的尺寸将根据他们内容的尺寸来定义
  * 与第二有一个margin
  * 第三行尺寸也是将根据他们内容的尺寸来定义
  * 第四行也有一个margin
  * 第五行尺寸也是将根据他们内容的尺寸来定义
  */
 grid-rows: auto 15px auto 15px auto; /* 2 */
   
 /* body元素变成 3*5 网格. */
}
 
/* 页眉和页脚都将全宽,所以我们必须让他们占据了3个列*/
.header, 
.footer {
  grid-column-span: 3;
}

/* 让我们把标题行定义在最前面:  定义为1 */
.header {
  grid-row: 1;
}
 
/* 相同的将页脚定义为第五行 (记得margin算作cols/行 */
.footer {
  grid-row: 5;
}
 
.sidebar {
  /* 侧边栏占据第一列，宽度为200px */
  grid-column: 1;
  /* 位于第三行 (前面有一个标题和间距) */
  grid-row: 3;
}
 
.main {
  /* 主要内容将在第三列和第三行 */
 grid-column: 3;
 grid-row: 3;
}

使用几行样式就实现了一个像样的布局没有绝对定位、没有浮动、没有内联块，也没有定义宽度、高度和margin就完全完成了想要的布局。布局很漂亮，对吗？

如果看到的是四个部分依次排列，那是您的浏览器不支持CSS网格布局。请切换到一个能支持的浏览器浏览。（注，请使用IE10+）

现在我们来添加第二个边栏，用来显示广告。他将显示在主内容的右侧。只需要稍做调整就能一切正常。

/* We first change the grid-columns definition on the grid element to add 2 new columns: one margin and one sidebar */
body {
  display: grid;
  grid-columns: 200px 1% 1fr 1% 100px;
  grid-rows: auto 15px auto 15px auto;
  /* We could have writen grid-rows: auto (15px auto)[2] */
}

/* Both the header and the footer will expand to 5 columns instead of 3 */
.header, .footer {
  grid-column-span: 5;
}

.ads {
  grid-column: 5;
  grid-row: 3;
}

完成了!我们现在有一个布局与宽屏页眉和页脚,3列包括主要部分和2个固定宽度列，大约只使用了13行CSS。

如果看到的是四个部分依次排列，那是您的浏览器不支持CSS网格布局。请切换到一个能支持的浏览器浏览。（注，请使用IE10+）

如何响应设计吗?容易的像画一个饼。让我们稍微调整下我们的设计当600 px装置宽度。

@media all and (max-width: 600px) {
  body {
    /* First, we make the body 1-column and 5 rows spaced by 4 margin rows */
    grid-columns: 1fr;
    grid-rows: auto (1% auto)[4];
    /* This is the same as:
     * grid-rows: auto 1% auto 1% auto 1% auto 1% auto;
     */
  }
  
  /* Then we say to all elements they belong in the only existing column */
  .header, .ads, .sidebar, .main, .footer {
    grid-column: 1;
  }
  
  /* Now we define their row; don't forget spacing rows! */
  .header  { grid-row: 1; }
  .ads     { grid-row: 3; }
  .main    { grid-row: 5; }
  .sidebar { grid-row: 7; }
  .footer  { grid-row: 9; }
  
  /* We even can create grids inside grids */
  .ads {
    display: grid;
    grid-columns: 1% (32% 1%)[3]; /* 1% 32% 1% 32% 1% 32% 1% */
    grid-rows: 2; /* One for the title, one for the images */
  }
  
  .ads h2  { grid-row: 1; grid-column-span: 3; }
  .ads img { grid-row: 2; }
  .ads img:nth-of-type(1) { grid-column: 2; }
  .ads img:nth-of-type(2) { grid-column: 4; }
  .ads img:nth-of-type(3) { grid-column: 6; }
}

通过codepen浏览，并调整你的浏览器。

这是一个由CSS网格布局和Sass创建网格系统:

如果你觉得使用列和行来模仿margin不爽，你仍然可以使用margin，但会事与原违。或者你可以使用一个CSS预处理器来缓解你的计算，例如这个案例

扩展阅读

  1. CSS Grid Layout in the CSS specifications
  2. CSS Grid Layout by Microsoft
  3. Microsoft's CSS Grid layout playground
  4. CSS Grid Layout by 24Ways
  5. CSS Grid Layout by Raphael Goetter (FR)

浏览器兼容性

目前仅有IE10+浏览器支持，将来webkit和Gecko内核浏览器会支持。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载烦请注明出处：

英文原文：http://css-tricks.com/almanac/properties/g/grid

中文译文：https://www.fedev.cn/css3/grid.html

jordan retro 11 mens size