讯享网

                <p>CSS网格布局（Grid）是一套二维的页面布局系统，它的出现将完全颠覆页面布局的传统方式。传统的CSS页面布局 一直不够理想。包括table布局、浮动、定位及内联块等方式，从本质上都是Hack的方式，并且遗漏了一些重要的功能（比如：垂直居中）。Flexbox的出现部分解决了上述问题，但Flex布局是为了解决简单的一维布局，适用于页面局部布局。而Grid天然就是为了解决复杂的二维布局而出现的，适用页面的整体布局。在实际工作中，Grid和Flexbox不但不矛盾，而且还能很好的结合使用。做为WEB程序员，我们在页面布局问题上都付出过努力，也将不断探索新的方案。而Grid是第一个专门为布局问题而生的CSS模块，我们有理由对Grid充满期待。</p><p><img src="http://chengdu.cdxwcx.cn/upload/ad_content/xuanchuantu-14.jpg"></p>创新互联专注于网站建设|成都网站维护|优化|托管以及网络推广，积累了大量的网站设计与制作经验，为许多企业提供了网站定制设计服务，案例作品覆盖成都护栏打桩机等行业。能根据企业所处的行业与销售的产品，结合品牌形象的塑造，量身建设品质网站。<p>本文包括18个小节，62个实例，完整阅读需要时间20分钟以上。</p><p>为了获得**的阅体验，可以访问如下格式的教程：</p><p>学习CSS网格</p><p>将属性  值设为  或  就创建了一个网格容器，所有容器直接子结点自动成为网格项目。</p><h4>1.1 例1</h4><pre></pre><p>网格项目按行排列，网格项目占用整个容器的宽度。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/container-1.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>1.1 例2</h4><pre></pre><p>网格项目按行排列，网格项目宽度由自身宽度决定。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/container-2.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><p>属性和用于显示定义网格，分别用于定义行轨道和列轨道。</p><h4>2.1 例3</h4><pre></pre><p>属性用于定义行的尺寸，即轨道尺寸。轨道尺寸可以是任何非负的长度值（px，%，em，等）</p><p>网格项目1的行高是50px，网格项目2的行高是100px。</p><p>因为只定义了两个行高，网格项目3和4的行高取决于其本身的高度。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/explicit-1.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>2.2 例4</h4><pre></pre><p>类似于行的定义，属性用于定义列的尺寸。</p><p>因为定义中只有三列，所以项目4，5，6排在新的一行; 并因为它们位于第1，2，3列的轨道上，所以其宽度等于定义中第1，2，3列轨道的宽度。</p><p>网格项目的第1列，第2列，第3列的宽度分别是 90px, 50px 和 120px 。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/explicit-2.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>2.3 例5</h4><pre></pre><p>单位用于表示轨道尺寸配额，表示按配额比例分配可用空间。</p><p>本例中，项目1占 1/4 宽度，项目2占 1/4 宽度，项目3占 1/2 宽度。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/explicit-3.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>2.4 例6</h4><pre></pre><p>单位和其它长度单位混合使用时，的计算基于其它单位分配后的剩余空间。</p><p>本例中，</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/explicit-4.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><p>函数用于定义轨道最小/大边界值。</p><h4>3.1 例7</h4><pre></pre><p>函数接收两个参数：第一个参数表示最小轨道尺寸，第二个参数表示大轨道尺寸。长度值可以是auto，表示轨道尺寸可以根据内容大小进行伸长或收缩。</p><p>本例中，第一行最小高度设置成100px，但是大高度设置成，表示行高可以根据内容伸长超过100px。</p><p>本例中，第一列宽度的大值设置成50%，表示其宽度不能超过整个容器宽度的50%。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/mimmax-1.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><p>函数用来定义重复的网格轨道，尤其适用于有多个相同项目的情况下。</p><h4>4.1 例8</h4><pre></pre><p>函数接收两个参数：第一个参数表示重复的次数，第二个参数表示轨道尺寸。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/repeat-1.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>4.2 例9</h4><pre></pre><p>函数可以用在轨道定义列表当中。</p><p>本例中，第1列和第5列的宽度是30px。函数创建了中间3列，每一列宽度都是。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/repeat-2.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><p>属性 和 用于定义网格间隙。</p><p>网格间隙只创建在行列之间，项目与边界之间无间隙。</p><h4>5.1 例10</h4><pre></pre><p>间隙尺寸可以是任何非负的长度值（px，%，em等）。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/gap-1.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>5.2 例11</h4><pre></pre><p>属性是和的简写形式。</p><p>第一个值表示行间隙，第二个值表示列间隙。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/gap-2.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>5.3 例12</h4><pre></pre><p>如只有一个值，则其即表示行间隙，也表示列间隙。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/gap-3.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><p>网格线本质上是用来表示网格轨道的开始和结束。</p><p>每一条网格线编号都以1开始，以1为步长向前编号，其中包括行列两组网格线。</p><h4>6.1 例13</h4><pre></pre><p>这是一个3行2列的网格，即在行上有4条网格线，在列上有3条网格线。项目1利用网格线编号定位在第2行第2列的位置上。</p><p>本例中，项目只跨越一行一列，则和的定义可以省略。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/line-number-1.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>6.2 例14</h4><pre></pre><p>属性 是  和 的简写形式。</p><p>属性 是  和 的简写形式。</p><p>如果只指定一个值，它表示 。</p><p>如果两个值都指定，第一个表示  ，第二个值表示。而且你必须用斜杠（/）分隔这两个值。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/line-number-2.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>6.3 例15</h4><pre></pre><p>属性 是 , ,  和 的简写形式。</p><p>如果四个值都指定，则第一个表示 , 第二个表示 , 第三个表示  ,第四个表示 。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/line-number-3.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><p>网格项目默认都占用一行和一列，但可以使用前一节中定位项目的属性来指定项目跨越多行或多列。</p><h4>7.1 例16</h4><pre></pre><p>通过和属性值的设置，使该网格项目跨越多列。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/span-1.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>7.2 例17</h4><pre></pre><p>通过和属性值的设置，使该网格项目跨越多行。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/span-2.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>7.3 例18</h4><pre></pre><p>简写属性  和  即能用来定位项目，也能用来使项目跨越多个行列。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/span-3.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>7.4 例19</h4><pre></pre><p>关键字  用来指定跨越行或列的数量。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/span-4.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><p>当利用属性 和 定义网格时，可以同时定义网格线的名称。网格线名称可以用于定位网格项目。</p><h4>8.1 例20</h4><pre></pre><p>用属性 和 定义网格，同时定义网格线名称。</p><p>为避免混淆，网格线名称应避免使用规范中的关键字（等）。</p><p>定义网格线名称的方法是要将其放在中括号内（），并要和网格轨道相对应。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/line-name-1.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><h4>8.2 例21</h4><pre></pre><p>可以给同一网格线定义多个名称，方法就是在中括号内用空格将多个名称分开。</p><p>每一个网格线名都可以被引用，以用来定位网格项目。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/line-name-2.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>利用命名的网格线，可以很方便地进行项目定位。</p><h4>9.1 例22</h4><pre></pre><p>引用网格线名称不用加中括号。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/p-by-name-1.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>9.2 例23</h4><pre></pre><p>简写属性 和 也可以利用网格线名称来定位项目。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/p-by-name-2.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><p>函数可以定义同名网格线。这节省了给每条网格都命名的时间。</p><h4>10.1 例24</h4><pre></pre><p>函数可以用来定义同名网格线。 这样多个网格线拥有相同的名字。</p><p>同名网格线会被分配一个位置编号，做为其唯一标识。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/p-same-name-1.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><h4>10.2 例25</h4><pre></pre><p>用同名网格线来定位项目时，应注意在网格线名称和编号之间有一个空格。</p><p>本例中，项目1的行定位开始于第2条名称是的网格线，结束于第3条名称是的网格线；列定位开始于第1条名称是的网格线，结束于第3条名称是的网格线。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/p-same-name-2.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><p>如同网格线命名，可以用属性给网格区域命名。网格区域名称可以用来定位网格项目。</p><h4>11.1 例26</h4><pre></pre><p>一组区域名称要放在单引号或双引号内，每一个名称之间以空格分隔。</p><p>每一组名称定义一行，每一个名称定义一列。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/area-1.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><h4>11.2 例27</h4><pre></pre><p>网格区域名称可以用在属性, , , 和 的值中，用来定位项目。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/area-2.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><h4>11.3 例28</h4><pre></pre><p>网格区域名称也可以用于简写属性 和 的值中。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/area-3.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><h4>11.4 例29</h4><pre></pre><p>网格区域名称也可以用于简写属性的值中。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/area-4.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><p>隐式网格用来在显式网格之外定位项目。有时在显示网格中没有足够的空间，或者是要在显示网格之外定位项目就要用到隐式网格。这时可以把这些项目放置在隐式网格中。</p><p>隐式网格可以通过属性 , , 和  来定义。</p><h4>12.1 例30</h4><pre></pre><p>本例中，只定一个行轨道，因此项目 1 和 2 高 70px 。</p><p>第2行轨道有隐式网格自动创建并为项目 3 和 4 分配了空间。 属性 定义了隐式网格的行轨道尺寸，即项目3和4的高度是 140px 。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/implicit-1.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>12.2 例31</h4><pre></pre><p>缺省的网格布局方向是行的方向（）。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/implicit-2.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><h4>12.3 例32</h4><pre></pre><p>网格的布局方向可以定义为列的方向（column）。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/implicit-3.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><h4>12.4 例33</h4><pre></pre><p>本例中，我们只定义了两个列轨道的尺寸30px 和 60px。</p><p>隐式网格中自动创建其它列并给项目3，4，5分配空间；分配的空间尺寸是通过属性 定义的。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/implicit-4.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><p>网格线名称可以任意指定，但分配以  和  结尾的名字有额外的益处，这样隐式地创建了具名网格区域，该名称可以用于项目定位。</p><h4>13.1 例34</h4><pre></pre><p>本例中，行和列都有名为 和 的网格线，它们隐式地给网格区域分派了名称（）。</p><pre></pre><p>这样我们就能够直接使用网格区域名来定位，而不需要再用网格线来定位项目了。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/implicit-area-1.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><p>隐式命名网格线和隐式命名的网格区域的工作原理刚好相反。</p><h4>14.1 例35</h4><pre></pre><p>定义网格区域时隐式的命名了网格线的名称。这些网格线的名称是基于区域名加上 或 后缀组成的。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/implicit-line-1.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><h4>14.2 例36</h4><pre></pre><p>本例中，header是通过隐式网格线名称进行定位的。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/implicit-line-2.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><p>通过项目定位可以使多个项目层叠在一起，属性可以改变层叠项目的层次。</p><h4>15.1 例37</h4><pre></pre><p>本例中，项目1 和 2 行定位开始于第1条行网格线，并跨越两列。</p><p>两个项目都是用网格线编号进行定位。项目1起始于第1条列网格线，项目2起始于第2条列网格线，这使得两个项目在第一行中间列发生层叠。</p><p>缺省情况下，项目2将层叠于项目1之上；然而，给项目1设置属性就使得项目1层叠于项目2之上。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/layer-1.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>15.2 例38</h4><pre></pre><p>本例中，利用在  定义中的隐式网格线名称，定位了一个网格项目（），并将层叠于上层。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/layer-2.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><p>CSS的 盒模型对齐模块 补充了CSS网格的内容，网格项目可以按行或列的轴线方向实现多种对齐方式。</p><p>属性 和  以行轴为参照对齐项目，属性 和  以列轴为参照对齐项目。</p><p>属性 和  是网格容器的属性，并支持如下这些值：</p><ul><li>auto</li><li>normal</li><li>start</li><li>end</li><li>center</li><li>stretch</li><li>baseline</li><li>first baseline</li><li>last baseline</li></ul><h4>16.1 例39</h4><pre></pre><p>在行的轴线起点处对齐。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-i-1.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>16.2 例40</h4><pre></pre><p>在行的轴线中点处对齐。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-i-2.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>16.3 例41</h4><pre></pre><p>在行的轴线终点处对齐。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-i-3.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>16.4 例42</h4><pre></pre><p>在行的轴线方向延伸并填满整个区域。是缺省值。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-i-4.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>16.5 例43</h4><pre></pre><p>在列的轴线起点处对齐。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-i-5.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>16.6 例44</h4><pre></pre><p>在列的轴线中点处对齐。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-i-6.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>16.7 例45</h4><pre></pre><p>在列的轴线终点处对齐。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-i-7.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>16.8 例46</h4><pre></pre><p>在列的轴线方向延伸并填满整个区域。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-i-8.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>16.9 例47</h4><pre></pre><p>项目定位于行轴和列轴线的中间位置。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-i-9.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><p>项目可以用属性align-self 和 justify-self定义自己的对齐方式，并支持如下这些属性值：</p><ul><li>auto</li><li>normal</li><li>start</li><li>end</li><li>center</li><li>stretch</li><li>baseline</li><li>first baseline</li><li>last baseline</li></ul><h4>17.1 例48</h4><pre></pre><p>属性 在行的轴线方向定义对齐方式。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-i-10.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>17.2 例49</h4><pre></pre><p>属性 在列的轴线方向定义对齐方式。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-i-11.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>17.3 例50</h4><pre></pre><p>项目1定位在行的轴线和列的轴线的中间位置。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-i-12.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><p>在网格容器中，网格轨道延轴线方向有多种对齐方式。</p><p>属性用于定义网格轨道延着行的轴线的对齐方式，而属性用于定义网格轨道沿着列的轴线的对齐方式。并分别支持如下属性：</p><ul><li>normal</li><li>start</li><li>end</li><li>center</li><li>stretch</li><li>space-around</li><li>space-between</li><li>space-evenly</li><li>baseline</li><li>first baseline</li><li>last baseline</li></ul><h4>18.1  例51</h4><pre></pre><p>列的轨道在行的轴线起点处对齐。 是缺省值。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-t-1.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>18.2  例52</h4><pre></pre><p>列的轨道在行的轴线终点处对齐。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-t-2.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>18.3  例53</h4><pre></pre><p>列的轨道在行的轴线中间处对齐。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-t-3.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>18.4  例54</h4><pre></pre><p>在每一列的两侧平均分配额外空间。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-t-4.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>18.5  例55</h4><pre></pre><p>在列与列之间平均分配额外的空间。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-t-5.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>18.6  例56</h4><pre></pre><p>在列与列之间及列与边界之间平均分配额外空间。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-t-6.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>18.7 例57</h4><pre></pre><p>行的轨道在列的轴线起点处对齐，属性是缺省值。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-t-7.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>18.8 例58</h4><pre></pre><p>行的轨道在列的轴线终点处对齐。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-t-8.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>18.9 例59</h4><pre></pre><p>行的轨道在列的轴线中点处对齐。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-t-9.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>18.10 例60</h4><pre></pre><p>每一行的两侧平均分配额外空间。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-t-10.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>18.11 例61</h4><pre></pre><p>在行与行之间平均分配额外空间。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-t-11.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><h4>18.12 例62</h4><pre></pre><p>在行与行之间及行与边界之间平均分配额外空间。</p><p><img src="http://chengdu.cdxwcx.cn/upload/otherpic26/align-t-12.jpg" alt="【图片版】CSS网格布局（Grid）完全教程"></p><p>演示程序</p><p>本教程相对全面地介绍了网格的相关内容，但这并不是一个完整的技术文档。想更全面的学习相关内容，推荐访问 Mozilla开发者网络 和 W3C 的网格文档。</p><p>由于能力有限，翻译中难免错误较多，还请大家多多谅解！</p><p>十分感谢原文作者Jonathan Suh在本文排版设计，示例制作，文字编辑等方面卓越的工作。</p><p>为了获得**的阅体验，请访问如下排版的教程：</p><p>学习CSS网格</p><p>英文原版</p><p align=center>另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。</p>                    <br>
                新闻名称：【图片版】CSS网格布局（Grid）完全教程-创新互联                    <br>
                标题路径：http://chengdu.cdxwcx.cn/article/dgehdi.html