CSSGrid系列(上)-Grid布局指南

byChrisHouse译者：若愚老师想要更好的阅读体验可在饥人谷技术博客查看原文CSS网格布局（GridLayout）是CSS中最强大的布局系统。这是一个二维系统，这意味着它可以同时处理列和行，不像flexbox那样主要是一维系统。你可以通过将CSS规则应用于父元素（成为网格容器）和该元素的子元素（网格元素），来使用网格布局。引言CSS网格布局（又名“网格"）是一个二维的基于网格的布局系统，其目的只在于完全改变我们设计基于网格的用户界面的方式。CSS一直用来布局网页，但一直都不完美。一开始我们使用table做布局，然后转向浮动、定位以及inline-block,但所有这些方法本质上都是Hack的方式，并且遗漏了很多重要的功能（例如垂直居中）。Flexbox的出现在一定程度上解决了这个问题，但是它的目的是为了更简单的一维布局，而不是复杂的二维布局（Flexbox和Grid实际上一起工作得很好）。只要我们一直在制作网站，我们就一直在为解决布局问题不断探索，而Grid是第一个专门为解决布局问题而生的CSS模块。有两个东西，启发我写这篇指南。第一个是雷切尔•安德鲁（RachelAndrew）的书为CSSGrid布局准备。这本书对网格布局做了彻底、清晰的介绍，也是是整篇文章的基础，我强烈建议你购买并阅读他的书。我的另一个重要灵感是ChrisCoyier的Flexbox完全指南，当需要查阅flexbox的一切资料时我就会找这篇文章。这篇文章帮助了很多人学习Flex布局，也是Google上搜索"flexbox”关键字排名第一的文章。你会发现他的文章和我的很多相似之处，有最好的范例在那放着为什么咱不偷师学着写呢？本指南的目的是介绍网格概念，因为它们存在于最新版本的规范中。因此我不会覆盖过时的IE语法，而且随着规范的成熟，我会尽最大努力保存更新本指南。基础知识以及浏览器支持情况一开始你需要使用力•印3：物位把容器元素定义为一个网格，使用grid-template-colu^,ins和grid-template-rows设置列和行大小，然后使用grid-colu^和grid-row把它的子元素放入网格。与flexbox类似，网格子元素的原始顺序不重要。你的可以在CSS里以任意顺序放置它们，这使得使用媒体查询重新排列网格变得非常容易。想象一下，我们需要定义整个页面的布局，然后为了适应不同的屏幕宽度完全重新排列，我们只需要几行CSS就能实现这个需求。网格是有史以来最强大的CSS模块之一。

截至2017年3月，许多浏览器都提供了原生的、不加前缀的对CSSGrid的支持，比如Chrome（包括Android）,Firefox,Safari（包括iOS）和Opera。另一方面，InternetExplorer10和11支持它，但需要使用过时的语法。Edge浏览器已经宣布将支持标准的Grid语法，但暂未支持。浏览器支持的详细数据可在Caniuse查看。其中里面的数字表示该版本以上的浏览器支持Grid。桌面浏览器ChromeOperaFirefoxIEEdgeSafari57445211*1610.1移动端/平板iOSSafariOperaMobileOperaMiniAndroidAndroidChromeAndroidFirefox10.3NoNo626257除了微软之外，浏览器制造商在Grid规范完全落地以前似乎并没有放手让Gird野生也长的打算。这是一件好事，这意味着我们不需要再去学习各种浏览器兼容版本的旧语法。在生产环境中使用Grid只是时间问题，但现在是我们该学习的时候了。重要术语在深入了解网格的概念之前，理解术语是很重要的。由于这里所涉及的术语在概念上都是相似的，如果不先记住它们在网格规范中定义的含义，则很容易将它们彼此混淆。但是不用太担心，这些术语并不多。GridContainer设置了display：gird的元素。这是所有griditem的直接父项。在下面的例子中，.conaM”就是是gridcontainero<divclass-"coy\taiMr">

<divcla^-"ite.^\item-V'x/div><4ivc^ss=*7temitem-2〃〉</42〉<dlvc/〃ss=”"0麻/tem-3n></cZ/V></div>GridItemGrid容器的孩子（直接子元素）。下面的JteM元素就是griditem,但,sub-标侬不是。<divc（ass=ucovvtaimr"><divclass^ite^x/divy<divc/ass="item”><pc/ass=//sufa-itew^'x/py</div><divcIass=n/te^n></div></div>GridLine这个分界线组成网格结构。它们既可以是垂直的("columngridlines"),也可以是水平的("rowgridlines"),并位于行或列的任一侧。下面例中的黄线就是一个列网格线。

GridTrack两个相邻网格线之间的空间。你可以把它们想象成网格的列或行。下面是第二行和第三行网格线之间的网格轨道。GridCell两个相邻的行和两个相邻的列网格线之间的空间。它是网格的一个"单元"。下面是行网格线1和2之间以及列网格线2和3的网格单元。GridArea下面是四个网格线包围的总空间。网格区域可以由任意数量的网格单元组成。行网格线1和3以及列网格线1和3之间的网格区域。下面是Grid属性列表GridContainer的全部属性displaygrid-template-columnsgrid-template-rowsgrid-template-areasgrid-templategrid-column-gapgrid-row-gapgrid-gapjustify-itemsalign-itemsjustify-contentalign-contentgrid-auto-columnsgrid-auto-rowsgrid-auto-flowgridGridItems的全部属性grid-column-startgrid-column-endgrid-row-startgrid-row-endgrid-columngrid-rowgrid-areajustify-selfalign-self父容器(GridContainer)的属性display将元素定义为gridcontaienr,并为其内容建立新的网格格式化上下文(gridformattingcontext)0值：grid-生成一个块级(block-leve。网格inline-grid-生成一个行级(inline-level)网格subgrid-如果你的gridcontainer本身就是一个griditem(即,嵌套网格)，你可以使用这个属性来表示你想从它的父节点获取它的行/列的大小，而不是指定它自己的大小。display:grid|Wine-grid|subgrid;}注意：colui^^.,float,clear,以及“出二(-川七八对一个gridcontainer没有影响grid-template-columns/grid-template-rows使用以空格分隔的多个值来定义网格的列和行。这些值表示轨道大小(tracksize),它们之间的空格代表表格线(gridline)o.contaiMr(grid-template-columns:<track-size>...|<Hm-nai^e>〈Wack-size〉...；grid一亡cmP/。te-rows:<track-size>...I<Hm-nai^e><track^ize>例子:

（如果未显示的给网格线命名），轨道值之间仅仅有空格时，网格线会被自动分配数字名称：.contaiMr(grid-template-co/unAns：40PxSOpxauto50Px4Opx;grid-template-rows：25%t-OOpxauto;但你可以给网格线指定确切的命名。注意中括号里的网格线命名语法:.coiataiMr{grid-template[first]4Opx[Hm2.]50Pxauto[co14-start]SOpx[five]4Opx[end];grid-template-rows:[rowl-st^rt]2S%[rowl-ei^d][OOpx[third-Um]auto[last-Um];40px50px40pxauto50Px40px50px40pxauto50Px需要注意的是，一个网格线可以有不止一个名字。例如，这里第2条网格线有两个名字：rowl-end和row2-start：.contaiMK(grid-template-rows:[rowl-st^rt]25%[rowl-endro\A/2.-start]25%[row2-endj;}如果你的定义中包含重复的部分，则可以使用repeat()符号来简化写法：grid-template-colui^^: 2Opx[col-start])5%;)上面的写法和下面等价：.contaiMr(grid-template-columns:20Px[col-^tart]20Px[colstart]2.Opx[col-start]5%;〃fr〃单位允许您将轨道大小设置为网格容器自由空间的一部分。例如，下面的代码会将每个griditem为gridcontainer宽度的三分之一:.covvtaiMr{grid.-template-colui^ns:ifrifrifr;1自由空间是在排除所有不可伸缩的griditem之后计算得到的。在下面的示例中，fr单位可用的自由空间总量不包括50px:.container{grid-template-columns：ifrSOpxXfrxfr;)grid-template-areas通过引用grid-area属性指定的网格区域的名称来定义网格模板。重复网格区域的名称导致内容扩展到这些单元格。点号表示一个空单元格。语法本身提供了网格结构的可视化。值：〈grid-area使用grid-area属性设置的网格区域的名称点号代表一个空网格单元none-没有定义网格区域举例：grid-area:header;}jtekv\-fa{grid-area:^v\ain;}.itei^-c{

grid-area:sidebar)grid-area:footer).container(grid-template-columns：579Px5Opx50Px5Opx;grid-template-rows：auto)grid-template-areas:"deaderdeaderheaderheaded“FnaMma/n.sidebar11ufooterfooterfooterfooted;)这将创建一个四列宽三行高的网格。整个第一行将由header区域组成。中间一行将由两个main区域、一个空单元格和一个sidebar区域组成。最后一行是footer区域组成。headermainemptysidebarfooter你的声明中的每一行都需要有相同数量的单元格。您可以使用任意数量的相邻的.来声明单个空单元格。只要这些点号之间没有空格，他们就代表了一个单一的单元格。需要注意的是你不是在用这个语法命名网格线，而是在命名区域。当你使用这种语法时，区域两端的网格线实际上是自动命名的。比如，如果网格区域的名称是foo,那么区域的起始的行网格线和列网格线名称是foo-start,并且区域终点的行网格线和列网格线名称是foo-endo这意味着某些网格线可能有多个名称，比如上面的例子中最左边的一条网格线有三个名字：header-start,main-start和footer-startogrid-template在单个声明中定义grid-template-rows>grid-template-columns>grid-template-areas的简写。值：none-将三个属性都设置为其初始值subgrid・把grid-template-rows和grid-template-columns设置为subgrid,并且grid-template-areas设置为初始值grid-template-rows/<grid-template-co/umias-把grid-template-columns和grid-template-rows设置为指定值，与此同时，设置grid-template-areas为none.co^taiMr(grid-template:mm|subgrid|-template"ows>/<gnd-template-co/u它也可以使用一个更复杂但相当方便的语法来指定这三个值。一个例子:.contaiiaeir(grid-template:[rowl-start]ukeaderheader25Px[rowl-end]-start]ufooterfooterfooter1125Px[row^-end]/auto50Pxauto;以上等价于:.co^taiMr(grid-template-rows：[rowl-start]25Px[rowl-endrow2.-start]25Px[row2.-end];grid-template-columns:autoSOpxauto;grid-template-areas：''headerheaderheader""footerfooterfooted;}由于grid-template不会重置隐式网格属性(grid-auto-co山小八£,grid-auto-ro\^s和9就-“戊。项2),而这可能是大多数情况下你想要做的。因此建议使用grid属性来代替grid-templateogrid-column-gap/grid-row-gap指定网格线的大小，你可以把它想象为设置列/行之间的间距的宽度。值：•lice-size-一个长度值.co^taiMr(grid-co/ukvm-gap:Vine-size〉;grid-ro\A/-gap:Vice-size〉;)举例：.conta/Mr{grid-template-coluknns：XOOpx50Px工OOpx;grid-template-rows：80Pxauto8Opx;g片d-co/uwm-gap:Wpx;grid-row-gap:15px;)1Opx1Opx只能在列/行之间创建缝隙，而不是在外部边缘创建。grid-gapgrid-row-gap和grid-column-gap的缩写.contaiMr{grid-gap：<grid-rovj-gap><grid-colui^^-gap>)}Example:.contaiMr(grid-template-colui^i^:XOOpx5Opx"Opx;grid,-template,-rows：8Opxauto2Opx;grid-gap:10Px15px;）如果没有指定grid-row-gap,则会被设置为与grid-column-gap相同的值。justify-iterns沿着行轴对齐网格内的内容（与之对应的是align-items,即沿着列轴对齐），该值适用于容器内的所有的griditemso值：start:内容与网格区域的左端对齐end:内容与网格区域的右端对齐center:内容位于网格区域的中间位置stretch:内容宽度占据整个网格区域空间（这是默认值）.container{justifystart|end|center|stretch;}举例：justifystart）},coiataiMr{justifg-items:end;

.co^taiMr{justify-items:center;.container{justify-items：stretch；}也可以通过给单个griditem设置justifg-se/f属性来达到上述效果。align-items沿着列轴对齐griditem里的内容（与之对应的是使用justify-items设置沿着行轴对齐），该值适用于容器内的所有griditemso值:start:内容与网格区域的顶端对齐end:内容与网格区域的底部对齐center:内容位于网格区域的垂直中心位置stretch:内容高度占据整个网格区域空间（这是默认值）.container（align-iteMS：start|end|center|stretch;1举例：.contaiMr{H匕八-iteMS：start;.contaiMr{alig八-items：end;}.co^taiMir(align-itekv\s:center;,coi^taiMr{也可以通过给单个griditem设置a@八-se/f属性来达到上述效果。justify-content有时，网格的总大小可能小于其网格容器的大小。如果你的所有griditems都使用像px这样的非弹性单位来设置大小，则可能发生这种情况。此时，你可以设置网格容器内的网格的对齐方式。此属性沿着行轴对齐网格（与之对应的是align-content,沿着列轴对齐）。值：start-网格与网格容器的左边对齐end-网格与网格容器的右边对齐center-网格与网格容器的中间对齐stretch-调整griditem的大小，让宽度填充整个网格容器space-around-在griditem之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半space-between-在griditem之间设置均等宽度空白间隙，其外边缘无间隙

space-evenly-在每个griditem之间设置均等宽度的空白间隙，包括外边缘.co^taiMr(justify-content：start|end|center|stretch|space-around|space-between|space-evenly;举例:.contaiMr(justify-content:start;containercontainer.container(justify-content:end;gridcontainer.co^taiMr(justify-content:center,gridcontainergridcontainer.co^taiMr{justify-content:stretck)gridcontainer.contaiiaer(justify-content：space-around;gridcontainergridcontainer.container{justify-content:平ace-betwee八;gridcontainergridcontainer.COntaiMK{justify-content:space-evenly;gridcontaineralign-content有时，网格的总大小可能小于其网格容器的大小。如果你的所有griditems都使用像px这样的非弹性单位来设置大小，则可能发生这种情况。此时，你可以设置网格容器内的网格的对齐方式。此属性沿着列轴对齐网格（与之对应的是justify-content,即沿着行轴对齐）。值：start-网格与网格容器的顶部对齐end-网格与网格容器的底部对齐center-网格与网格容器的中间对齐stretch-调整griditem的大小，让高度填充整个网格容器space-around-在griditem之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半space-between-在griditem之间设置均等宽度空白间隙，其外边缘无间隙space-evenly-在每个griditem之间设置均等宽度的空白间隙，包括外边缘.container(align-content：start|end|center|stretch|space-around|space-betwee八space-evenly;)举例：.coiataiv\er{aligia-content:start;gridcontainer.contaiMr{aligia-content:end;gridcontainer.co^taiMr{aligia-content:center;gridcontainer .contaiiaer{align-content:stretch)gridcontainer.contaiMr(H/0八-content:space-around;gridcontainer.co^taiiner{align-content：space-between;gridcontainer.ccmtaineir{aligia-content:space-evenly,)gridcontainergrid-auto-columns/grid-auto-rows隐式网格轨道在你显指定自动生成的网格轨道(又名隐式网格轨道)的大小。式的定位超出指定网格范围的行或列(使用grid-template-rows/grid-template-columns)时被仓！J建。隐式网格轨道在你显值:

<track-size>-可以是一个长度值，一个百分比值，或者一个自由空间的一部分（使用fr单位）.coi^taiMr{grid-auto-cofukuns:<tr〃ck-size)grid-auto-rows:<track-size>为了说明如何创建隐式网格轨道，思考如下代码:.contaiMr{grid-template-colui^^s:60Px£Opx;grid-template-rows：qopxQOpx6Opx6Opx9Opx9Opx田9Opx9Opx田这里创建了一个2x2的网格。来定位你的网格项目，如但是，现在想象一下，使用grid-column和grid-row下所示：来定位你的网格项目，如.itew^-a{grid-colui^ia：2/2;grid-row:2/3;g片d-co/uM八：5/6;grid-row:2/3;)60px6Opx 「010auto这里我们指定.item-b开始于列网格线5并结束于在列网格线6,但我们并未定义列网格线5或6o因为我们引用不存在的网格线，宽度为0的隐式轨道的就会被创建用与填补间隙。我们可以使用grid-auto-columns和grid-auto-rows属性来指定这些隐式轨道的宽度：.COntaiMK{grid-auto-cofukwns：6Opx;auto.item-bauto.item-bgrid-auto-flow如果你存在没有显示指明放置在网格上的griditem,则自动放置算法会自动放置这些项目。而该属性则用于控制自动布局算法的工作方式。值：row-告诉自动布局算法依次填充每行，根据需要添加新行column-告诉自动布局算法依次填充每列，根据需要添加新列dense-告诉自动布局算法，如果后面出现较小的griditem,则尝试在网格中填充空洞.container{grid-auto-flow:row|co/ukwn|rowdem.se|coIumkdense}需要注意的是，dense可能导致您的griditem乱序。举例，考虑如下HTML：〈section 八七。，八er7'〉<divclass-"<divc^ss=,7tekv\-b,,>itew-fe</^/V><divcla^^,'ite^v\-c,,>ite^v\-c</div><divcla^nite^A,-du>ite^v\-d</div><divcla^"ite^v\-e〈/div〉〈/section)你定义一个有5列和2行的网格，并将grid-auto-flow设置为row(这也是默认值)：.container(display:grid;grid-template-cofukuns:&OpxGOpx60Px60Px&Opx;gHd-template-rows:"5Opx3(9px;当把griditem放在网格上时，你只把其中两个设置了固定的位置:.itew^-a{gnd-colui^ia:1;grid-row:1/3;gnd-colu^v\ia:5;grid-row:1/3;因为我们将grid-auto-flow设置为row,所以我们的grid就像这样。注意观察我们没有做设置的三个项目(item-b,item-c和item-d)是如何在剩余的行水平摆放位置的：如果我们将grid-auto-flow设置为column,则item-b,item-c和item-d以列的顺序上下摆放：.contaiMir{display:grid;grid-template-cofunAns：60Px60Px60Px6Opx6Opx;grid-template-rows:3(9px3Opx;grid-auto-flo\A/icolumn;}.item-a.item-b.item-d•ItCriILU.item-cgrid在单个属性中设置所有以下属性的简写：grid-template-rows,grid-template-columns,grid-template-areas,grid-auto-rows,grid-auto-columns和grid・auto・flow。它同时也将setsgrid-column-gap和grid-row-gap设置为它们的初始值，即使它们不能被此属性显示设置。值：none-将所有子属性设置为其初始值<grid-template/<grid-template-将grid-template-rows和grid-template-columns分别设置为指定值，将所有其他子属性设置为其初始值<gnd-auto-[<^nd-auto-rows>[/<grid-auto-colukv\^>]]-接受所有与grid-auto-flow,grid-auto-rows和grid-auto-columns相同的值。如果省略grid-auto-columns,则将其设置为为grid-auto-rows指定的值。如果两者都被省略,则它们被设置为它们的初始值.contaiMf(grid:none<gnd-template-rows>/<grid-template-co/uwn5>|<grid-auto-f(ow>grid:none<gnd-template-rows>举例:以下代码写法等价.container{grid:2.OOpxauto/ifrautoifr;j.container(grid-template-rows:2.OOpxauto;grid-template-colui^^s：ifrautoifr;grid-template-areas：mm；]以下代码写法等价.co^taiiaer{grid:columnifr/auto)}.coiatatMr{grid-auto-flo\A/ico/unan;grid,-auto-rows：ifr;grid-auto-columns：auto;)它也可用使用一个更复杂但相当方便的语法来一次设置所有内容。你可以指定grid-template-areas>grid-template-rows以及grid-template-columns,并将所有其他子属性设置为其初始值。你现在所做的是在其网格区域内，指定网格线名称和内联轨道大小。可以看下面的例子：.contaiMr(grid:[rowl-start]"deaderheaderheader11ifr[row工-ei^d][row2-start]"Footerfooterfooter"25Px[row2-end]/autoSOpKauto;}上述代码等价于.contaiMr(grid-template-area$："headerheaderkeader""footerfooterfooted;grid-template-rows：[rowl-start]xfr[rowl-eiadro\A/Z-start]25Px[row2-en^J;grid-template-colui^^：auto50Pxauto))孩子(GridItems)的属性grid-columnstart/grid-column-end/grid-row-start/grid-row-end使用特定的网格线确定griditem在网格内的位置。grid-column-start/grid-row-start属性表示griditem的网格线的起始位置，grid-column-end/grid-row-end属性表示网格项的网格线的终止位置。值：Vine〉：可以是一个数字来指代相应编号的网格线，也可使用名称指代相应命名的网格线span<nuMber>:网格项将跨越指定数量的网格轨道span(八a^e>:网格项将跨越一些轨道，直到碰到指定命名的网格线auto:自动布局，或者自动跨越，或者跨越一个默认的轨道.iteM(

gHd-column-start：<nukv\ber>|<nai^e>|span.<nui^ber>|spa八<nai^e>|autogrid-colu^n-eiad:<Huwfoer>|<v\aw\ey|sp〃八<nukv\feer>|卯a八<nakv\e>|autogrid-ro\A/-start：<nukv\feer>|《八aFv\e>|span<nukv\ber>|平〃八<nai^e>|autogrid-grid-row-end:<nukvtfaer>〈八430|spanOukv\ber>|spa八<nakv\e>|auto举例:.itekv\-a{grid-co/ukvua-start:2;gnd-colui^ia-e^d:five;grid-vow-start:rowl-startgrid-row-e八d:3grid-cohxkvua-start:1;gnd-colui^ia-eiad：spancol4-start;grid-ro\A/-start:2g片d-row-end：span2)如果没有声明grid-column-end/grid-row-end,默认情况下，该网格项将跨越1个轨道。网格项可以相互重叠。您可以使用z-index来控制它们的堆叠顺序。grid-column/grid-rowgrid-column-start+grid-column-end,和grid-row-start+grid-row-end的简写形式。值:•<start-/(