精华内容
参与话题
问答
  • CSS Grid 布局完全指南(图解 Grid 详细教程) 转自:https://www.html.cn/archives/8510/ CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它...

    CSS Grid 布局完全指南(图解 Grid 详细教程)

    在这里插入图片描述
    CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素(成为 Grid Items 网格项),你就可以轻松使用 Grid(网格) 布局。

    简介


    CSS Grid(网格) 布局(又称为 “Grid(网格)” ),是一个二维的基于网格的布局系统,它的目标是完全改变我们基于网格的用户界面的布局方式。CSS 一直用来布局我们的网页,但一直以来都存在这样或那样的问题。一开始我们用表格(table),然后是浮动(float),再是定位(postion)和内嵌块(inline-block),但是所有这些方法本质上都是只是 hack 而已,并且遗漏了很多重要的功能(例如垂直居中)。Flexbox 的出现很大程度上改善了我们的布局方式,但它的目的是为了解决更简单的一维布局,而不是复杂的二维布局(实际上 Flexbox 和 Grid 能协同工作,而且配合得非常好)。Grid(网格) 布局是第一个专门为解决布局问题而创建的 CSS 模块,只要我们一直在制作网站,我们就一直要讨论这些问题。



    有两个主要因素激发了我创建本指南的灵感。第一个是 Rachel Andrew 出色的书籍 为 CSS Grid 布局做好准备 。这本书对 Grid 布局做了全面,清晰的介绍 ,也是本指南的基础。我强烈建议你购买并阅读。另一个灵感来自 Chris Coyier 的 Flexbox 布局完整指南,这也是我学习 flexbox 首选的资源。这篇文章是帮助了很多人,这点从 Google “flexbox” 排名第一就可以看出来。你会发现那篇文章和我的文章有很多相似之处,为什么不跟随最好的文章呢?


    本指南的目的是介绍存在于最新版本的规范中 Grid(网格) 概念。所以我不会覆盖过时的 IE 语法,而且随着规范的逐渐成熟,我会尽我最大的努力去更新这个指南。

    基础知识和浏览器支持


    首先,你必须使用 【display: grid】 将容器元素定义为一个 grid(网格) 布局,使用 【grid-template-columns】 和 【grid-template-rows】 设置 列 和 行 的尺寸大小,然后通过 【grid-column 】和 【grid-row 】将其子元素放入这个 grid(网格) 中。与 flexbox 类似,网格项(grid items)的源(HTML结构)顺序无关紧要。你的 CSS 可以以任何顺序放置它们,这使得使用 媒体查询(media queries)重新排列网格变得非常容易。定义整个页面的布局,然后完全重新排列布局以适应不同的屏幕宽度,这些都只需要几行 CSS ,想象一下就让人兴奋。Grid(网格) 布局是有史以来最强大的 CSS 模块之一。

    截至2017年3月,许多浏览器都提供了对 CSS Grid 的原生支持,而且无需加浏览器前缀:Chrome(包括 Android ),Firefox,Edge,Safari(包括iOS)和 Opera 。 另一方面,Internet Explorer 10和11支持它,但是是一个过时的语法实现。 现在是时候使用 Grid 布局网页了!


    这个浏览器支持 CSS Grid 的数据,来自Caniuse ,你可以查看更多的细节。 数字表示支持以上功能的浏览器版本号。


    桌面(Desktop) 浏览器


    Chrome Opera Firefox IE Edga Safari
    57 44 52 11*(旧语法) 16 10.1

    手机(Mobile) / 平板(Tablet)浏览器


    iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
    10.3 46 No 67 70 63

    除了微软之外,浏览器厂商似乎还没有对 Grid(网格) 搞自己的一套实现(比如加前缀),直到规范完全成熟。这是一件好事,因为这意味着我们不必担心学习多个语法。

    在生产中使用 Grid 只是时间问题。 但现在是学习的时候了。

    重要术语


    在深入了解 Grid 的概念之前,理解术语是很重要的。由于这里涉及的术语在概念上都很相似,如果不先记住 Grid 规范定义的含义,很容易混淆它们。但是别担心,术语并不多。

    网格容器(Grid Container)


    应用 【display: grid 】的元素。这是所有 网格项(grid item)的直接父级元素。在这个例子中,【container 】就是 网格容器(Grid Container)。

    HTML代码:

    <div class="container">
      <div class="item item-1"></div>
      <div class="item item-2"></div>
      <div class="item item-3"></div>
    </div>
    

    网格项(Grid Item)


    网格容器(Grid Container)的子元素(例如直接子元素)。这里【 item 】元素就是网格项(Grid Item),但是 【sub-item】 不是。

    HTML代码:

    <div class="container">
      <div class="item"></div> 
      <div class="item">
        <p class="sub-item"></p>
      </div>
      <div class="item"></div>
    </div>
    

    网格线(Grid Line)


    构成网格结构的分界线。它们既可以是垂直的(“列网格线(column grid lines)”),也可以是水平的(“行网格线(row grid lines)”),并位于行或列的任一侧。例如,这里的黄线就是一条列网格线。

    在这里插入图片描述


    网格轨道(Grid Track)


    两条相邻网格线之间的空间。你可以把它们想象成网格的列或行。下图是第二条和第三条 行网格线 之间的 网格轨道(Grid Track)。

    在这里插入图片描述


    网格单元格(Grid Cell)


    两个相邻的行和两个相邻的列网格线之间的空间。这是 Grid(网格) 系统的一个“单元”。下图是第 1 至第 2 条 行网格线 和第 2 至第 3 条 列网格线 交汇构成的 网格单元格(Grid Cell)。

    在这里插入图片描述

    网格区域(Grid Area)


    4条网格线包围的总空间。一个 网格区域(Grid Area) 可以由任意数量的 网格单元格(Grid Cell) 组成。下图是 行网格线1和3,以及列网格线1和3 之间的网格区域。

    在这里插入图片描述

    Grid(网格) 属性目录



    网格容器(Grid Container) 属性


    • display
    • grid-template-columns
    • grid-template-rows
    • grid-template-areas
    • grid-template
    • grid-column-gap
    • grid-row-gap
    • grid-gap
    • justify-items
    • align-items
    • place-items
    • justify-content
    • align-content
    • place-content
    • grid-auto-columns
    • grid-auto-rows
    • grid-auto-flow
    • grid

    网格容器(Grid Container) 属性


    • grid-column-start
    • grid-column-end
    • grid-row-start
    • grid-row-end
    • grid-column
    • grid-row
    • grid-area
    • justify-self
    • align-self
    • place-self

    父元素 网格容器(Grid Container) 属性


    display


    将元素定义为网格容器,并为其内容建立新的 网格格式上下文。

    值:

    • 【grid】:生成一个块级网格
    • 【inline-grid 】:生成一个内联网格

    CSS代码:

    .container {
      display: grid | inline-grid;
    }
    

    注意:通过嵌套元素(也称为子网格,即 subgrid )向下传递网格参数的能力已移至 CSS Grid 规范的 Level 2 版本。这里有 一个快速解释


    grid-template-columns / grid-template-rows


    使用空格分隔的值列表,用来定义网格的列和行。这些值表示 网格轨道(Grid Track) 大小,它们之间的空格表示网格线。

    值:

    • 【track-size】: 可以是长度值,百分比,或者等份网格容器中可用空间(使用 fr 单位)
    • 【line-name】:你可以选择的任意名称

    CSS代码:

    .container {
      grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
      grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
    }
    

    示例:

    当你在 网格轨道(Grid Track) 值之间留出空格时,网格线会自动分配正数和负数名称:

    CSS代码:

    .container {
      grid-template-columns: 40px 50px auto 50px 40px;
      grid-template-rows: 25% 100px auto;
    }
    

    在这里插入图片描述

    但是你可以明确的指定网格线(Grid Line)名称,例如 值。请注意网格线名称的括号语法:

    CSS 代码:

    .container {
      grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
      grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
    }
    

    在这里插入图片描述
    请注意,一条网格线(Grid Line)可以有多个名称。例如,这里的第二条 行网格线(row grid lines) 将有两个名字:row1-end 和 row2-start :

    CSS代码:

    .container {
      grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
    }
    

    如果你的定义包含多个重复值,则可以使用 repeat() 表示法来简化定义:

    CSS 代码:

    .container {
      grid-template-columns: repeat(3, 20px [col-start]);
    }
    

    上面的代码等价于:

    CSS 代码:

    .container {
      grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
    }
    

    如果多行共享相同的名称,则可以通过其网格线名称和计数来引用它们。
    CSS 代码:

    .item {
      grid-column-start: col-start 2;
    }
    

    fr 单元允许你用等分网格容器剩余可用空间来设置 网格轨道(Grid Track) 的大小 。例如,下面的代码会将每个网格项设置为网格容器宽度的三分之一:
    CSS 代码:

    .container {
      grid-template-columns: 1fr 1fr 1fr;
    }
    

    剩余可用空间是除去所有非灵活网格项 之后 计算得到的。在这个例子中,可用空间总量减去 50px 后,再给 fr 单元的值 3 等分:
    CSS 代码:

    .container {
      grid-template-columns: 1fr 50px 1fr 1fr;
    }
    

    grid-template-areas


    通过引用 grid-area 属性指定的 网格区域(Grid Area) 名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格。一个点号(.)代表一个空单元格。这个语法本身可视作网格的可视化结构。

    值:

    • 【grid-area-name】:由网格项的 grid-area 指定的网格区域名称
    • .(点号) :代表一个空的网格单元
    • none:不定义网格区域

    CSS 代码:

    .container {
      grid-template-areas: 
        "<grid-area-name> | . | none | ..."
        "...";
    }
    

    示例:

    CSS 代码:

    .item-a {
      grid-area: header;
    }
    .item-b {
      grid-area: main;
    }
    .item-c {
      grid-area: sidebar;
    }
    .item-d {
      grid-area: footer;
    }
     
    .container {
      grid-template-columns: 50px 50px 50px 50px;
      grid-template-rows: auto;
      grid-template-areas: 
        "header header header header"
        "main main . sidebar"
        "footer footer footer footer";
    }
    

    上面的代码将创建一个 4 列宽 3 行高的网格。整个顶行将由 header 区域组成。中间一排将由两个 main 区域,一个是空单元格,一个 sidebar 区域组成。最后一行全是 footer 区域组成。

    在这里插入图片描述
    你的声明中的每一行都需要有相同数量的单元格。

    你可以使用任意数量的相邻的 点. 来声明单个空单元格。 只要这些点.之间没有空隙隔开,他们就代表一个单独的单元格。

    注意你 不能 用这个语法来命名网格线,只是命名 网格区域 。当你使用这种语法时,区域两端的网格线实际上会自动命名。如果你的网格区域的名字是 foo,该区域的起始行网格线 和 起始列网格线 的名称将为 foo-start,而最后一条行网格线 和 最后一条列网格线 的名称将为 foo-end。这意味着某些网格线可能有多个名字,如上例中最左边的网格线,它将有三个名称:header-startmain-startfooter-start

    grid-template


    用于定义 【grid-template-rows】 ,【grid-template-columns】 ,【grid-template-areas 】简写属性。

    值:

    • 【none】:将所有三个属性设置为其初始值
    • 【grid-template-rows/ grid-template-columns】:将 【grid-template-columns】 和 【grid-template-rows 】设置为相应地特定的值,并且设置【grid-template-areas】为none

    CSS 代码:

    .container {
      grid-template: none | <grid-template-rows> / <grid-template-columns>;
    }
    

    这个属性也接受一个更复杂但非常方便的语法来指定三个上诉属性。这里有一个例子:

    CSS 代码:

    .container {
      grid-template:
        [row1-start] "header header header" 25px [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
    }
    

    等价于:

    CSS 代码:

    .container {
      grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
      grid-template-columns: auto 50px auto;
      grid-template-areas: 
        "header header header" 
        "footer footer footer";
    }
    

    grid-column-gap / grid-row-gap


    指定网格线(grid lines)的大小。你可以把它想象为设置列/行之间间距的宽度。

    值:

    • 【line-size】 :长度值

    CSS 代码:

    .container {
      grid-column-gap: <line-size>;
      grid-row-gap: <line-size>;
    }
    

    示例:

    CSS 代码:

    .container {
      grid-template-columns: 100px 50px 100px;
      grid-template-rows: 80px auto 80px; 
      grid-column-gap: 10px;
      grid-row-gap: 15px;
    }
    

    在这里插入图片描述
    只能在 列/行 之间创建间距,网格外部边缘不会有这个间距。

    注意:这两个属性将删除 【grid-】 前缀,就是将 【grid-column-gap】 和 【grid-row-gap】重命名为 【column-gap】 和 【row-gap】。 Chrome 68+Safari 11.2 Release 50+Opera 54+ 已经支持无前缀的属性。

    grid-gap


    【grid-column-gap 】和 【grid-row-gap 】的简写语法

    值:

    • 【grid-row-gap】 【grid-column-gap】:长度值

    CSS 代码:

    .container {
      grid-gap: <grid-row-gap> <grid-column-gap>;
    }
    

    示例:

    CSS 代码:

    .container {
      grid-template-columns: 100px 50px 100px;
      grid-template-rows: 80px auto 80px; 
      grid-gap: 15px 10px;
    }
    

    如果【grid-row-gap】没有定义,那么就会被设置为等同于 【grid-column-gap】 的值。例如下面的代码是等价的:

    CSS 代码:

    .container{
      /* 设置 grid-column-gap 和 grid-row-gap */  
      grid-column-gap: 10px;
      grid-row-gap: 10px; 
     
      /* 等价于 */  
      grid-gap: 10px 10px;
     
      /* 等价于 */  
      grid-gap: 10px;
    }
    

    注意:这个属性将删除 【grid- 】前缀,就是将 【grid-gap】 重命名为 【gap】。 Chrome 68+Safari 11.2 Release 50+Opera 54+ 已经支持无前缀的属性。

    justify-items


    沿着 inline(行)轴线对齐网格项(grid items)(相反的属性是 【align-items】 沿着 block(列)轴线对齐)。此值适用于容器内的所有网格项。

    值:

    • start:将网格项对齐到其单元格的左侧起始边缘(左侧对齐)
    • end:将网格项对齐到其单元格的右侧结束边缘(右侧对齐)
    • center:将网格项对齐到其单元格的水平中间位置(水平居中对齐)
    • stretch:填满单元格的宽度(默认值)

    CSS 代码:

    .container {
      justify-items: start | end | center | stretch;
    }
    

    示例:

    CSS 代码:

     .container {
          justify-items: start;
        }
    

    在这里插入图片描述
    CSS 代码:

    .container{
      justify-items: end;
    }
    

    在这里插入图片描述
    CSS 代码:

    .container{
      justify-items: center;
    }
    

    在这里插入图片描述
    CSS 代码:

    .container{
      justify-items: stretch;
    }
    

    在这里插入图片描述
    这些行为也可以通过每个单独网格项(grid items) 的 【justify-self】 属性设置。


    align-items


    沿着 block(列)轴线对齐网格项(grid items)(相反的属性是 justify-items 沿着 inline(行)轴线对齐)。此值适用于容器内的所有网格项。
    值:
    • start:将网格项对齐到其单元格的顶部起始边缘(顶部对齐)
    • end:将网格项对齐到其单元格的底部结束边缘(底部对齐)
    • center:将网格项对齐到其单元格的垂直中间位置(垂直居中对齐)
    • stretch:填满单元格的高度(默认值)

    CSS 代码:

    .container {
      align-items: start | end | center | stretch;
    }
    

    示例:

    CSS 代码:

    .container {
      align-items: start;
    }
    

    在这里插入图片描述
    CSS 代码:

    .container {
      align-items: end;
    }
    

    在这里插入图片描述
    CSS 代码:

    .container {
      align-items: center;
    }
    

    在这里插入图片描述
    CSS 代码:

    .container {
      align-items: center;
    }
    

    在这里插入图片描述
    这些行为也可以通过每个单独网格项(grid items) 的 align-self 属性设置。

    place-items


    `place-items` 是设置 `align-items` 和 `justify-items` 的简写形式。

    值:

    • <align-items> <justify-items>:第一个值设置 align-items 属性,第二个值设置
      justify-items 属性。如果省略第二个值,则将第一个值同时分配给这两个属性。

    除 Edge 之外的所有主要浏览器都支持 place-items 简写属性。

    有关更多详细信息,请参阅align-itemsjustify-items

    justify-content


    有时,你的网格合计大小可能小于其 网格容器(grid container) 大小。 如果你的所有 网格项(grid items) 都使用像 px 这样的非灵活单位设置大小,就可能出现这种情况。在这种情况下,您可以设置网格容器内的网格的对齐方式。 此属性沿着 inline(行)轴线对齐网格(相反的属性是 `align-content` ,沿着 block(列)轴线对齐网格)。

    值:

    • start:将网格对齐到 网格容器(grid container) 的左侧起始边缘(左侧对齐)
    • end:将网格对齐到 网格容器的右侧结束边缘(右侧对齐)
    • center:将网格对齐到 网格容器 的水平中间位置(水平居中对齐)
    • stretch:调整 网格项(grid items) 的宽度,允许该网格填充满整个 网格容器 的宽度
    • space-around:在每个网格项之间放置一个均匀的空间,左右两端放置一半的空间
    • space-between:在每个网格项之间放置一个均匀的空间,左右两端没有空间
    • space-evenly:在每个网格项目之间放置一个均匀的空间,左右两端放置一个均匀的空间

    CSS 代码:

    .container {
      justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
    }
    

    示例:

    CSS 代码:

    .container {
      justify-content: start;
    }
    

    在这里插入图片描述
    CSS 代码:

    .container {
      justify-content: end;
    }
    

    在这里插入图片描述
    CSS 代码:

    .container {
      justify-content: center;
    }
    

    在这里插入图片描述
    CSS 代码:

    .container {
      justify-content: stretch;
    }
    

    在这里插入图片描述
    CSS 代码:

    .container {
      justify-content: space-around;
    }
    

    在这里插入图片描述
    CSS 代码:

    .container {
      justify-content: space-between;
    }
    

    在这里插入图片描述
    CSS 代码:

    .container {
      justify-content: space-evenly;
    }
    

    在这里插入图片描述

    align-content


    有时,你的网格合计大小可能小于其 网格容器(grid container) 大小。 如果你的所有 网格项(grid items) 都使用像 `px` 这样的非灵活单位设置大小,就可能出现这种情况。在这种情况下,您可以设置网格容器内的网格的对齐方式。 此属性沿着 block(列)轴线对齐网格(相反的属性是 `justify-content` ,沿着 inline(行)轴线对齐网格)。

    值:

    • start:将网格对齐到 网格容器(grid container) 的顶部起始边缘(顶部对齐)
    • end:将网格对齐到 网格容器 的底部结束边缘(底部对齐)
    • center:将网格对齐到 网格容器 的垂直中间位置(垂直居中对齐)
    • stretch:调整 网格项(grid items)的高度,允许该网格填充满整个 网格容器 的高度
    • space-around:在每个网格项之间放置一个均匀的空间,上下两端放置一半的空间
    • space-between:在每个网格项之间放置一个均匀的空间,上下两端没有空间
    • space-evenly:在每个网格项目之间放置一个均匀的空间,上下两端放置一个均匀的空间

    CSS 代码:

    .container {
      align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
    }
    

    示例:

    CSS 代码:

    .container {
      align-content: start; 
    }
    

    在这里插入图片描述
    CSS 代码:

    .container {
      align-content: end;   
    }
    

    在这里插入图片描述
    CSS 代码:

    .container {
      align-content: center;    
    }
    

    在这里插入图片描述
    CSS 代码:

    .container {
      align-content: stretch;   
    }
    

    在这里插入图片描述
    CSS 代码:

    .container {
      align-content: space-around;  
    }
    

    在这里插入图片描述
    CSS 代码:

    .container {
      align-content: space-between; 
    }
    

    在这里插入图片描述
    CSS 代码:

    .container {
      align-content: space-evenly;  
    }
    

    在这里插入图片描述

    place-content


    place-content 是设置 align-content 和 justify-content 的简写形式。

    值:

    • <align-content> <justify-content>:第一个值设置 align-content 属性,第二个值设置
      justify-content 属性。如果省略第二个值,则将第一个值同时分配给这两个属性。

    除 Edge 之外的所有主要浏览器都支持 place-content 简写属性。

    有关更多详细信息,请参阅align-contentjustify-content


    grid-auto-columns / grid-auto-rows


    指定任何自动生成的网格轨道(grid tracks)(又名隐式网格轨道)的大小。当网格中的网格项多于单元格时,或者当网格项位于显式网格之外时,就会创建隐式轨道。(参见显式网格和隐式网格之间的区别)

    值:

    • <track-size>:可以是长度值,百分比,或者等份网格容器中可用空间的分数(使用 fr 单位)

    CSS 代码:

    .container {
      grid-auto-columns: <track-size> ...;
      grid-auto-rows: <track-size> ...;
    }
    

    为了说明如何创建隐式网格轨道,请考虑一下以下的代码:

    CSS 代码:

    .container {
      grid-template-columns: 60px 60px;
      grid-template-rows: 90px 90px
    }
    

    这将生成了一个 2×2 的网格。

    但现在想象一下,你使用 grid-column 和 grid-row 来定位你的网格项,像这样:

    CSS 代码:

    .item-a {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
    }
    .item-b {
      grid-column: 5 / 6;
      grid-row: 2 / 3;
    }
    

    我们告诉 .item-b 从第 5 条列网格线开始到第 6 条列网格线结束,但我们从来没有定义过 第5 或 第6 列网格线。
    因为我们引用的网格线不存在,所以创建宽度为 0 的隐式网格轨道以填补空缺。我们可以使用 grid-auto-columnsgrid-auto-rows 来指定这些隐式轨道的大小:

    CSS 代码:

    .container {
      grid-auto-columns: 60px;
    }
    

    grid-auto-flow


    如果你有一些没有明确放置在网格上的网格项(grid items),自动放置算法 会自动放置这些网格项。该属性控制自动布局算法如何工作。

    值:

    • row:告诉自动布局算法依次填充每行,根据需要添加新行 (默认)
    • column:告诉自动布局算法依次填入每列,根据需要添加新列
    • dense:告诉自动布局算法在稍后出现较小的网格项时,尝试填充网格中较早的空缺

    CSS 代码:

    .container {
      grid-auto-flow: row | column | row dense | column dense
    }
    

    请注意,dense 只会更改网格项的可视顺序,并可能导致它们出现乱序,这对可访问性不利。

    示例:

    考虑以下 HTML :

    HTML 代码:

    <section class="container">
      <div class="item-a">item-a</div>
      <div class="item-b">item-b</div>
      <div class="item-c">item-c</div>
      <div class="item-d">item-d</div>
      <div class="item-e">item-e</div>
    </section>
    

    你定义一个有 5 列和 2 行的网格,并将 grid-auto-flow 设置为 row(也就是默认值):

    CSS 代码:

    .container {
      display: grid;
      grid-template-columns: 60px 60px 60px 60px 60px;
      grid-template-rows: 30px 30px;
      grid-auto-flow: row;
    }
    

    将网格项放在网格上时,只能为其中的两个指定位置:

    CSS 代码:

    .item-a {
      grid-column: 1;
      grid-row: 1 / 3;
    }
    .item-e {
      grid-column: 5;
      grid-row: 1 / 3;
    }
    

    因为我们把 grid-auto-flow 设成了 row ,所以我们的网格看起来会是这样。注意 我们没有进行定位的网格项(item-b,item-c,item-d)会这样排列在可用的行中:

    相反地,如果我们把 grid-auto-flow 设成了 column ,那么 item-b,item-c,item-d 会沿着列向下排列:

    CSS 代码:

    .container {
      display: grid;
      grid-template-columns: 60px 60px 60px 60px 60px;
      grid-template-rows: 30px 30px;
      grid-auto-flow: column;
    }
    

    grid


    在一个声明中设置所有以下属性的简写: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 和 grid-auto-flow 。(注意:您只能在单个网格声明中指定显式或隐式网格属性)。

    值:

    • none:将所有子属性设置为其初始值。
    • <grid-template>:与grid-template 简写的工作方式相同。
    • <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?:将grid-template-rows 设置为指定的值。 如果 auto-flow 关键字位于斜杠的右侧,则会将grid-auto-flow 设置为 column。 如果另外指定了 dense 关键字,则自动放置算法使用 “dense” 算法。如果省略 grid-auto-columns ,则将其设置为 auto
    • [ auto-flow && dense? ]<grid-auto-rows>? / <grid-template-columns>:将 grid-template-columns设置为指定值。 如果 auto-flow 关键字位于斜杠的左侧,则会将grid-auto-flow 设置为 row 。 如果另外指定了
      dense 关键字,则自动放置算法使用 “dense” 打包算法。 如果省略 grid-auto-rows ,则将其设置为 auto

    例子:

    以下两个代码块是等效的:

    CSS 代码:

    .container {
      grid: 100px 300px / 3fr 1fr;
    }
    

    CSS 代码:

    .container {
      grid-template-rows: 100px 300px;
      grid-template-columns: 3fr 1fr;
    }
    

    以下两个代码块是等效的:

    CSS 代码:

    .container {
      grid: auto-flow / 200px 1fr;
    }
    

    CSS 代码:

    .container {
      grid-auto-flow: row;
      grid-template-columns: 200px 1fr;
    }
    

    以下两个代码块是等效的:

    CSS 代码:

    .container {
      grid: auto-flow dense 100px / 1fr 2fr;
    }
    

    CSS 代码:

    .container {
      grid-auto-flow: row dense;
      grid-auto-rows: 100px;
      grid-template-columns: 1fr 2fr;
    }
    

    以下两个代码块是等效的:

    CSS 代码:

    .container {
      grid: 100px 300px / auto-flow 200px;
    }
    

    CSS 代码:

    .container {
      grid-template-rows: 100px 300px;
      grid-auto-flow: column;
      grid-auto-columns: 200px;
    }
    

    它也接受一个更复杂但相当方便的语法来一次设置所有内容。您可以指定 grid-template-areas,grid-template-rows和grid-template-columns,并所有其他的子属性都被设置为它们的初始值。这么做可以在它们网格区域内相应地指定网格线名字和网格轨道的大小。用最简单的例子来描述:

    CSS 代码:

    .container {
      grid: [row1-start] "header header header" 1fr [row1-end]
            [row2-start] "footer footer footer" 25px [row2-end]
            / auto 50px auto;
    }
    

    等价于:

    CSS 代码:

    .container {
      grid-template-areas: 
        "header header header"
        "footer footer footer";
      grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
      grid-template-columns: auto 50px auto;    
    }
    

    子元素 网格项(Grid Items) 属性


    注意:float,display: inline-block,display: table-cell,vertical-align 和 column-* 属性对网格项无效。

    grid-column-start / grid-column-end / grid-row-start / grid-row-end
    

    通过引用特定网格线(grid lines) 来确定 网格项(grid item) 在网格内的位置。 grid-column-start / grid-row-start 是网格项开始的网格线,grid-column-end / grid-row-end 是网格项结束的网格线。

    值:

    • <line> :可以是一个数字引用一个编号的网格线,或者一个名字来引用一个命名的网格线
    • span <number>:该网格项将跨越所提供的网格轨道数量
    • span <name> :该网格项将跨越到它与提供的名称位置
    • auto:表示自动放置,自动跨度,默认会扩展一个网格轨道的宽度或者高度

    CSS 代码:

    .item {
      grid-column-start: <number> | <name> | span <number> | span <name> | auto
      grid-column-end: <number> | <name> | span <number> | span <name> | auto
      grid-row-start: <number> | <name> | span <number> | span <name> | auto
      grid-row-end: <number> | <name> | span <number> | span <name> | auto
    }
    

    示例:

    CSS 代码:

    .item-a {
      grid-column-start: 2;
      grid-column-end: five;
      grid-row-start: row1-start
      grid-row-end: 3;
    }
    

    CSS 代码:

    .item-b {
      grid-column-start: 1;
      grid-column-end: span col4-start;
      grid-row-start: 2
      grid-row-end: span 2
    }
    

    如果没有声明指定 grid-column-end / grid-row-end,默认情况下,该网格项将占据 1 个轨道。

    项目可以相互重叠。您可以使用 z-index 来控制它们的重叠顺序。


    grid-column / grid-row


    分别为 grid-column-start + grid-column-endgrid-row-start + grid-row-end 的简写形式。

    值:

    • <start-line> / <end-line>:每个网格项都接受所有相同的值,作为普通书写的版本,包括跨度

    CSS 代码:

    .item {
      grid-column: <start-line> / <end-line> | <start-line> / span <value>;
      grid-row: <start-line> / <end-line> | <start-line> / span <value>;
    }
    

    示例:

    CSS 代码:

    .item-c {
      grid-column: 3 / span 2;
      grid-row: third-line / 4;
    }
    

    如果没有声明分隔线结束位置,则该网格项默认占据 1 个网格轨道。


    grid-area


    为网格项提供一个名称,以便可以 被使用网格容器 grid-template-areas 属性创建的模板进行引用。 另外,这个属性可以用作grid-row-start + grid-column-start + grid-row-end + grid-column-end 的简写。

    值:

    • <name>:你所选的名称 <row-start> / <column-start> / <row-end> /
    • <column-end>:数字或分隔线名称

    CSS 代码:

    .item {
      grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
    }
    

    示例:

    作为为网格项分配名称的一种方法:

    CSS 代码:

    .item-d {
      grid-area: header
    }
    

    作为grid-row-start + grid-column-start + grid-row-end + grid-column-end 属性的简写形式

    CSS 代码:

    .item-d {
        grid-area: 1 / col4-start / last-line / 6
    }
    

    justify-self


    沿着 inline(行)轴线对齐网格项( 相反的属性是 align-self ,沿着 block(列)轴线对齐)。此值适用于单个网格项内的内容。

    值:

    • start:将网格项对齐到其单元格的左侧起始边缘(左侧对齐)
    • end:将网格项对齐到其单元格的右侧结束边缘(右侧对齐)
    • center:将网格项对齐到其单元格的水平中间位置(水平居中对齐)
    • stretch:填满单元格的宽度(默认值)

    CSS 代码:

    .item {
      justify-self: start | end | center | stretch;
    }
    

    示例:

    CSS 代码:

    .item-a {
      justify-self: start;
    }
    

    CSS 代码:

    .item-a {
      justify-self: end;
    }
    

    CSS 代码:

    .item-a {
      justify-self: center;
    }
    

    CSS 代码:

    .item-a {
      justify-self: stretch;
    }
    

    要为网格中的所有网格项设置 行轴线(row axis) 线上对齐方式,也可以在 网格容器 上设置 justify-items 属性。


    #### align-self

    沿着 block(列)轴线对齐网格项(grid items)( 相反的属性是 justify-self ,沿着 inline(行)轴线对齐)。此值适用于单个网格项内的内容。

    值:

    • start:将网格项对齐到其单元格的顶部起始边缘(顶部对齐)
    • end:将网格项对齐到其单元格的底部结束边缘(底部对齐)
    • center:将网格项对齐到其单元格的垂直中间位置(垂直居中对齐)
    • stretch:填满单元格的高度(默认值)

    CSS 代码:

    .item{
      align-self: start | end | center | stretch;
    }
    

    示例:

    CSS 代码:

    .item-a {
        align-self: start;
    }
    

    CSS 代码:

    .item-a {
      align-self: end;
    }
    

    CSS 代码:

    .item-a {
        align-self: center;
    }
    

    CSS 代码:

    .item-a {
        align-self: stretch;
    }
    

    要为网格中的所有网格项设置 列轴线(column axis) 上的对齐方式,也可以在 网格容器 上设置 align-items 属性。

    place-self


    place-self 是设置 align-self 和 justify-self 的简写形式。

    值:

    • auto – 布局模式的 “默认” 对齐方式。
    • <align-self> <justify-self>:第一个值设置 align-self 属性,第二个值设置 justify-self 属性。如果省略第二个值,则将第一个值同时分配给这两个属性。
      示例:

    CSS 代码:

    .item-a {
      place-self: center;
    }
    

    CSS 代码:

    .item-a {
      place-self: center stretch;
    }
    

    除 Edge 之外的所有主要浏览器都支持 place-self 简写属性。

    动画(Animation)


    根据 CSS Grid 布局模块 Level 1 规范,有 5 个可应用动画的网格属性:

    • grid-gap, grid-row-gap,grid-column-gap 作为长度,百分比或 calc。
    • grid-template-columns,grid-template-rows 作为长度,百分比或 calc 的简单列表,只要列表中长度、百分比或calc组件的值不同即可。

    浏览器支持CSS网格属性


    截至今天(2018年5月7日),在测试的几个浏览器中仅实现 (grid-)gap,(grid-)row-gap,(grid-)column-gap 的动画。

    浏览器支持可设置动画的网格属性:

    浏览器 (grid-)gap, (grid-)row-gap, (grid-)column-gap grid-template-columns (grid-template-rows
    Firefox 55+, Firefox 53+ Mobile
    Safari 11.0.2
    Chrome 66+
    Chrome for Android 66+, Opera Mini 33+
    Edge 16+

    CSS网格布局:动画演示


    https://codepen.io/feiwen8772/embed/QJedqL?height=479&theme-id=0&slug-hash=QJedqL&default-tab=result&animations=run&editable=&embed-version=2&user=feiwen8772&name=cp_embed_1

    展开全文
  • CSS Grid布局这样玩

    千次阅读 多人点赞 2017-04-25 09:34:27
    自从去年年半年开始,CSS Grid布局的相关教程在互联网上就铺天盖地,可谓是声势浩大。就针对于Web布局而言,个人认为Grid布局将是Web布局的神器,它改变了以往任何一种布局方式或者方法。不管以前的采用什么布局方法...

    自从去年年半年开始,CSS Grid布局的相关教程在互联网上就铺天盖地,可谓是声势浩大。就针对于Web布局而言,个人认为Grid布局将是Web布局的神器,它改变了以往任何一种布局方式或者方法。不管以前的采用什么布局方法都可以说是一维的布局方式,而Grid最大的特色,采用了二维布局。@Rachel Andrew也一直致力于完善Grid的规范。

    就我个人而言,我也一直在不断的关注这个布局利器的相关更新,自从最初规范的出来,到目前规范的完善。在站上也不断的在更新CSS Grid布局的使用。虽然这方向的教程已经很多了,但各有千秋,我追求以最简单,最直接的方式来阐述它的使用方式方法。让初学者能尽快的掌握其使用规则。

    前段时间@Mirza Joldic在Medium上发布了 一篇文章 ,通过几个Gif动态非常形象的阐述了CSS Grid的几个核心概念以及使用方法,今天我就借花献佛,用这几张图让初学者快速掌握CSS Grid的核心概念和使用技巧。

    Web布局的历史演变

    自从Web出来至今,Web的布局也经过了几个演变,下图可以一目了然:

    有关于Web布局的演变史,去年也整理过一篇相关的文章简单的阐述了这方面的故事,如果你感兴趣的话,可以点击这里进行了解。在Web的学习过程中,学习Web布局是一个不可避免的过程,而随着前端技术的日新月异的变化,布局方式也在不断的更新,早在2013年@Peter Gasston就对CSS布局的未来趋势就做过预判断,文章中就提供了CSS Grid的布局。如果今天来看,这种趋势的预判是正确的,特别是今年3月份之后,各大主流浏览器都发布了对CSS Grid的支持。既然如此,学习CSS Grid相关的知识就很有必要。

    既然掌握CSS Grid很有必要,那用什么样的方式能最快的掌握CSS Grid相关的知识呢?这很重要。 特别是@Mirza Joldic在Medium上发布的文章,里面的动图让我耳目一新,通过简单的几张图,就把CSS Grid的几个核心介绍的非常清楚,我觉得很有必要拿出来与大家分享。

    在继续下面的内容之前,再次感谢@Mirza Joldic的付出。那咱们就不说废话了,开始今天的学习之旅。

    CSS Grid布局的介绍

    学习CSS Grid布局更多的相关知识,我觉得通过一些工具会对大家的理解更有帮助,到目前为止,这方面的在线工具已经有很多种,比如:

    下面的动图是使用@Mirza Joldic写的 CSS Grid Playground 小工具。动图来了:

    这里要提两个核心概念,这两个核心概念有点类似于Flexbox布局:

    • Grid容器(对应Flexbox布局中的Flex容器)
    • Grid项目(对应Flexbox布局中的Flex项目)

    比如一个这样的HTML结构:

    使用 CSS Grid布局首要的第一步,就是通过 display:grid; 来对容器声明一个网格容器,那么这个 div 元素里面对应的子元素就自动成为网格项目。

    虽然你在 div.grid-container 中设置了 display:grid; ,声明了这个元素为Grid容器,但在浏览器中,并看不到有任何的变化。但在在幕后中,他们还是发生了变化, div.grid-container 是一个Grid容器,他的所有子元素就自动变成了网格项目。

    接下来,使用 grid-template-columns: 1fr 1fr 1fr; 来定义三列网格:

    从gif图中就明显的看出来,现在有点变化了,颜色块变小了,但很难区分出有何变化,为了让效果之间有更突出的差异,再给 .grid-container 中添加 grid-gap:5px :

    看到变化了吧,整个网格分了三个列,单元格之间有 5px 的间距,同时每列的列宽是整个宽度的三分之一,那是因为我们采用了 fr 单位,而且把整个网格分成了三列,每列的宽度是 1fr 。这里告诉我们三个知识点:

    • grid-template-columns 用来把网格指定列的宽度
    • grid-gap 用来指定列(或行)的间距
    • fr 可以自动根据网格容器的宽度来计算列的宽度

    现在我们把 grid-template-columns 的值改成: 1fr 2fr 1fr ,对应的效果就会变成:

    现在第二列的宽度是第一列和最后一列的两倍。这也再次证明 fr 单位的强大之处,使用它可以让你很容易定义你的网格尺寸。

    现在越来越接近我们想要的网格。但需求是不断变化的,比如我们现在想让顶部的第一行尽可能的宽,比如说跨整个网格列(比如我们网页的头部,或者说我们常见的导航)。如此一来,只需要在第一个网格上使用 grid-column: 1 / 4 :

    或许第一次接触 1 / 4 会令你感到神秘,其实这个涉及到了CSS Grid中的重要概念之一,那就是网格线,其中第一个数字是列的起始网格线位置,第二个数字是线束网格线的位置。对于一个CSS Grid,可以通过 grid-template-columns 创建列网格线, grid-template-rows 创建行网格线。这种方式创建的是一种显式的网格线。当然,除了这种方式,还可以创建隐式网格线。除此之外,还可以使用 grid-auto-rows 和 grid-auto-columns 可以创建一个隐式网格。这个隐式网格对应的网格线就被称之为隐式网格线。下图简单的展示了示例中的网格线示意图:

    接下来,我们想要有一个 300px 的侧边栏高度,并且让他的位置是垂直方向的 2 / 3 。我们可以使用 grid-row: 2 / 4 来实现,这个特性和 grid-column 非常的类似。这个时候,效果变成这样:

    其实CSS Grid看上去和表格非常的类似,在表格中我们有一个专业的术语,合并单元格。其实在CSS Grid布局中,我们同样有一个类似的特性,那就是在 grid-column 或者 grid-row 中引入关键词 span ,在关键词 span 后面紧跟一个数值,就是表示合并单元格的数量,先来看下图:

    上面的示例中,我们使用到了 grid-column: 2 / span 1 和 grid-row: 2 / span 2 。其中 grid-column: 2 / span 1 表示从列网格线 2 开始,跨度是 1 个列网格线(其实就是合并一个列单元格)。而 grid-row: 2 / span 2 表示的是从行网格线 2 开始,跨度是两个两个线(其实就是合并两个行单元格)。

    接着我们来做页脚,在做页脚之前,我们先删除两个网格项目,因为不需要他们了。做页脚和做页头非常的类似,继续使用 grid-column: 1 / 4 即可:

    通过上面的方式,我们可以轻易的控制网格,也能非常容易的实现一个Web面页的布局,比如一个三列的布局。但我们在布局中经常还需要控制对齐方式,特别是在CSS Grid的布局当中,比如下面的示例中,我们第三列并未占满整个高度,这个时候希望它能底部对齐。此时为了实现这样的效果,需要使用到CSS中的对齐模块特性,比如在这里,我们可以使用 align-self: end 来实现:

    align-self 是CSS中的一个新模块特性 Box Alignment 中的一个属性。有关于这个模块的的功能还是非常的实用。@Rachel Andrew整理了一份 Box Alignment Cheatsheet ,里面详细介绍了Box Alignment的使用。简单的来讲,这个规范中有三个关键部分:

    其实你要是对Flexbox熟悉的话,你或许感觉这个Box Alignment有点类似于Flexbox中的一些控制Flex项目对齐方式的属性。事实是这样的,如果你感兴趣想深入的了解这方面的相关知识,建议你花点时间阅读《 Web布局新系统:CSS Grid,Flexbox和Box Alignment 》一文。

    如果你对上面的相关知识有所了解的话,你就可以很轻易的使用CSS Grid相关知识实现一个常用的Web页面布局效果。比如下面这张图,为了好完,我把主内容的容器设置了具体的宽度,并且通过Box Alignment属性,让这个区域水平垂直居中:

    整个题外话,虽然实现 水平垂直居中的解决方案 已有很多种了,但Box Alignment模块将是最佳方式。

    如果你感兴趣的话,你也可以通过@Mirza Joldic写的 CSS Grid Playground 小工具去尝试各式各样的网格布局效果。从而加强对CSS Grid的概念。当然,在使用它去做一些事情或者做一些创意之前,还是很有必要对CSS Grid基础要有一个简单的了解。个人建议你花点时间阅读一下下面几篇文章:

    当然,如果你深入的学习CSS Grid的相关知识,个人强列你仔细阅读完这里的所有文章。其实我个人也是CSS Grid的极度爱好者,我将在这里不断的更新和发布有关于CSS Grid的相关文章。希望这些文章对你学习和使用CSS Grid有所帮助。

    总结

    这篇文章借助于@Mirza Joldic写的 CSS Grid Playground 小工具以及 博文 中提供的动图,快速帮助大家理解CSS Grid的核心概念,以及快速使用这些知识掌握CSS Grid相关知识,从而通过掌握的CSS Grid知识创建自己想要的Web布局效果。虽然CSS Grid已经很强大了,但为了能更好的满足Web开发者的需求,它还在不断的更新,不断的提供和完善新特性,有关于这方面的变更,大家可以关注W3C规范的相关更新。当然也可以关注小站有关于CSS Grid相关更新。如果您有这方面的经验,欢迎在下面的评论中与我们一起分享。

    展开全文
  • css grid 深度解析

    千次阅读 2018-03-24 14:21:03
    自从去年年半年开始,CSS Grid布局的相关教程在互联网上就铺天盖地,可谓是声势浩大。就针对于Web布局而言,个人认为Grid布局将是Web布局的神器,它改变了以往任何一种布局方式或者方法。不管以前的采用什么布局方法...

    自从去年年半年开始,CSS Grid布局的相关教程在互联网上就铺天盖地,可谓是声势浩大。就针对于Web布局而言,个人认为Grid布局将是Web布局的神器,它改变了以往任何一种布局方式或者方法。不管以前的采用什么布局方法都可以说是一维的布局方式,而Grid最大的特色,采用了二维布局。@Rachel Andrew也一直致力于完善Grid的规范。

    就我个人而言,我也一直在不断的关注这个布局利器的相关更新,自从最初规范的出来,到目前规范的完善。在站上也不断的在更新CSS Grid布局的使用。虽然这方向的教程已经很多了,但各有千秋,我追求以最简单,最直接的方式来阐述它的使用方式方法。让初学者能尽快的掌握其使用规则。

    前段时间@Mirza Joldic在Medium上发布了 一篇文章 ,通过几个Gif动态非常形象的阐述了CSS Grid的几个核心概念以及使用方法,今天我就借花献佛,用这几张图让初学者快速掌握CSS Grid的核心概念和使用技巧。

    Web布局的历史演变

    自从Web出来至今,Web的布局也经过了几个演变,下图可以一目了然:

    有关于Web布局的演变史,去年也整理过一篇相关的文章简单的阐述了这方面的故事,如果你感兴趣的话,可以点击这里进行了解。在Web的学习过程中,学习Web布局是一个不可避免的过程,而随着前端技术的日新月异的变化,布局方式也在不断的更新,早在2013年@Peter Gasston就对CSS布局的未来趋势就做过预判断,文章中就提供了CSS Grid的布局。如果今天来看,这种趋势的预判是正确的,特别是今年3月份之后,各大主流浏览器都发布了对CSS Grid的支持。既然如此,学习CSS Grid相关的知识就很有必要。

    既然掌握CSS Grid很有必要,那用什么样的方式能最快的掌握CSS Grid相关的知识呢?这很重要。 特别是@Mirza Joldic在Medium上发布的文章,里面的动图让我耳目一新,通过简单的几张图,就把CSS Grid的几个核心介绍的非常清楚,我觉得很有必要拿出来与大家分享。

    在继续下面的内容之前,再次感谢@Mirza Joldic的付出。那咱们就不说废话了,开始今天的学习之旅。

    CSS Grid布局的介绍

    学习CSS Grid布局更多的相关知识,我觉得通过一些工具会对大家的理解更有帮助,到目前为止,这方面的在线工具已经有很多种,比如:

    下面的动图是使用@Mirza Joldic写的 CSS Grid Playground 小工具。动图来了:

    这里要提两个核心概念,这两个核心概念有点类似于Flexbox布局:

    • Grid容器(对应Flexbox布局中的Flex容器)
    • Grid项目(对应Flexbox布局中的Flex项目)

    比如一个这样的HTML结构:

    使用 CSS Grid布局首要的第一步,就是通过 display:grid; 来对容器声明一个网格容器,那么这个 div 元素里面对应的子元素就自动成为网格项目。

    虽然你在 div.grid-container 中设置了 display:grid; ,声明了这个元素为Grid容器,但在浏览器中,并看不到有任何的变化。但在在幕后中,他们还是发生了变化, div.grid-container 是一个Grid容器,他的所有子元素就自动变成了网格项目。

    接下来,使用 grid-template-columns: 1fr 1fr 1fr; 来定义三列网格:

    从gif图中就明显的看出来,现在有点变化了,颜色块变小了,但很难区分出有何变化,为了让效果之间有更突出的差异,再给 .grid-container 中添加 grid-gap:5px :

    看到变化了吧,整个网格分了三个列,单元格之间有 5px 的间距,同时每列的列宽是整个宽度的三分之一,那是因为我们采用了 fr 单位,而且把整个网格分成了三列,每列的宽度是 1fr 。这里告诉我们三个知识点:

    • grid-template-columns 用来把网格指定列的宽度
    • grid-gap 用来指定列(或行)的间距
    • fr 可以自动根据网格容器的宽度来计算列的宽度

    现在我们把 grid-template-columns 的值改成: 1fr 2fr 1fr ,对应的效果就会变成:

    现在第二列的宽度是第一列和最后一列的两倍。这也再次证明 fr 单位的强大之处,使用它可以让你很容易定义你的网格尺寸。

    现在越来越接近我们想要的网格。但需求是不断变化的,比如我们现在想让顶部的第一行尽可能的宽,比如说跨整个网格列(比如我们网页的头部,或者说我们常见的导航)。如此一来,只需要在第一个网格上使用 grid-column: 1 / 4 :

    或许第一次接触 1 / 4 会令你感到神秘,其实这个涉及到了CSS Grid中的重要概念之一,那就是网格线,其中第一个数字是列的起始网格线位置,第二个数字是线束网格线的位置。对于一个CSS Grid,可以通过 grid-template-columns 创建列网格线, grid-template-rows 创建行网格线。这种方式创建的是一种显式的网格线。当然,除了这种方式,还可以创建隐式网格线。除此之外,还可以使用 grid-auto-rows 和 grid-auto-columns 可以创建一个隐式网格。这个隐式网格对应的网格线就被称之为隐式网格线。下图简单的展示了示例中的网格线示意图:

    接下来,我们想要有一个 300px 的侧边栏高度,并且让他的位置是垂直方向的 2 / 3 。我们可以使用 grid-row: 2 / 4 来实现,这个特性和 grid-column 非常的类似。这个时候,效果变成这样:

    其实CSS Grid看上去和表格非常的类似,在表格中我们有一个专业的术语,合并单元格。其实在CSS Grid布局中,我们同样有一个类似的特性,那就是在 grid-column 或者 grid-row 中引入关键词 span ,在关键词 span 后面紧跟一个数值,就是表示合并单元格的数量,先来看下图:

    上面的示例中,我们使用到了 grid-column: 2 / span 1 和 grid-row: 2 / span 2 。其中 grid-column: 2 / span 1 表示从列网格线 2 开始,跨度是 1 个列网格线(其实就是合并一个列单元格)。而 grid-row: 2 / span 2 表示的是从行网格线 2 开始,跨度是两个两个线(其实就是合并两个行单元格)。

    接着我们来做页脚,在做页脚之前,我们先删除两个网格项目,因为不需要他们了。做页脚和做页头非常的类似,继续使用 grid-column: 1 / 4 即可:

    通过上面的方式,我们可以轻易的控制网格,也能非常容易的实现一个Web面页的布局,比如一个三列的布局。但我们在布局中经常还需要控制对齐方式,特别是在CSS Grid的布局当中,比如下面的示例中,我们第三列并未占满整个高度,这个时候希望它能底部对齐。此时为了实现这样的效果,需要使用到CSS中的对齐模块特性,比如在这里,我们可以使用 align-self: end 来实现:

    align-self 是CSS中的一个新模块特性 Box Alignment 中的一个属性。有关于这个模块的的功能还是非常的实用。@Rachel Andrew整理了一份 Box Alignment Cheatsheet ,里面详细介绍了Box Alignment的使用。简单的来讲,这个规范中有三个关键部分:

    其实你要是对Flexbox熟悉的话,你或许感觉这个Box Alignment有点类似于Flexbox中的一些控制Flex项目对齐方式的属性。事实是这样的,如果你感兴趣想深入的了解这方面的相关知识,建议你花点时间阅读《 Web布局新系统:CSS Grid,Flexbox和Box Alignment 》一文。

    如果你对上面的相关知识有所了解的话,你就可以很轻易的使用CSS Grid相关知识实现一个常用的Web页面布局效果。比如下面这张图,为了好完,我把主内容的容器设置了具体的宽度,并且通过Box Alignment属性,让这个区域水平垂直居中:

    整个题外话,虽然实现 水平垂直居中的解决方案 已有很多种了,但Box Alignment模块将是最佳方式。

    如果你感兴趣的话,你也可以通过@Mirza Joldic写的 CSS Grid Playground 小工具去尝试各式各样的网格布局效果。从而加强对CSS Grid的概念。当然,在使用它去做一些事情或者做一些创意之前,还是很有必要对CSS Grid基础要有一个简单的了解。个人建议你花点时间阅读一下下面几篇文章:

    当然,如果你深入的学习CSS Grid的相关知识,个人强列你仔细阅读完这里的所有文章。其实我个人也是CSS Grid的极度爱好者,我将在这里不断的更新和发布有关于CSS Grid的相关文章。希望这些文章对你学习和使用CSS Grid有所帮助。

    总结

    这篇文章借助于@Mirza Joldic写的 CSS Grid Playground 小工具以及 博文 中提供的动图,快速帮助大家理解CSS Grid的核心概念,以及快速使用这些知识掌握CSS Grid相关知识,从而通过掌握的CSS Grid知识创建自己想要的Web布局效果。虽然CSS Grid已经很强大了,但为了能更好的满足Web开发者的需求,它还在不断的更新,不断的提供和完善新特性,有关于这方面的变更,大家可以关注W3C规范的相关更新。当然也可以关注小站有关于CSS Grid相关更新。如果您有这方面的经验,欢迎在下面的评论中与我们一起分享。

    展开全文
  • CSS Grid 栅格布局

    千次阅读 2018-06-27 17:06:05
    当你将任何元素的 display 属性设置为 grid 时,那么这个元素就是一个 网格容器(grid container),它的所有直接子元素就成了 网格项(grid items)。 举个栗子: 制作一个九宫格的布局展示: 第一步:HTML ....

    简介

    栅格布局能将网页分成简单属性的行和列;
    Grid(网格) 模块为 display 属性提供了一个新的值:grid。当你将任何元素的 display 属性设置为 grid 时,那么这个元素就是一个 网格容器(grid container),它的所有直接子元素就成了 网格项(grid items)。


    举个栗子:
    制作一个九宫格的布局展示:
    这里写图片描述

    第一步:HTML

     <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
     </div>

    第二步:介绍grid的使用
    .box 是网格栏,.box>div是网格项

    .box
        {
            display: grid;
            grid-template-rows: 200px 200px 200px;   
            grid-template-columns: 200px 200px 200px;
        }

    grid-template-rows 定义网格中行数和行的高度;
    grid-template-columns 定义网格中的列数和列的高度。

    fr 单位(等分)

    fr 是为网格布局定义的一个新单位。它可以帮助我们摆脱计算百分比,并将可用空间等分。

    如果在网格容器中设置这个规则:grid-template-rows: 2fr 3fr,那么你的网格容器将首先被分成 2 行。然后将数字部分加在一起,这里总和为 5, 即 5 等分。
    也就是说,我们将有 2 行:第一排占据垂直空间的 2/5 。 第二排占垂直空间的 3/5 。

    所以,我们可以用 fr 单位代替 px

    .box 
        {
            display: grid;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-columns: 1fr 1fr 1fr;
        }

    为了书写的便利,官方提供 repeat () 函数,第一个是迭代次数,第二个是要重复的值。

    //这种写法跟上面的同效
    .box
        {
            display: grid;
            grid-template-rows: repeat(3, 1fr);
            grid-template-columns: repeat(3, 1fr);
        }

    grid-template 属性

    grid-template 属性是 grid-template-rows 和 grid-template-columns 的简写语法。
    //刚刚的九宫格,只需要2行代码就可以实现

     .box
        {
            display: grid;
            grid-template: repeat(3, 1fr) / repeat(3, 1fr);
        }

    如下展示全部的CSS:

     .box{
           display: grid;
           background-color: #f1f1f1;
           grid-template: repeat(3,1fr) / repeat(3,1fr);
           width: 300px;
           height: 300px;
           margin: auto;
     }
     .box>div{
           text-align: center;
           background-color: #444;
           line-height: 100px;
           font-size: 25px;
     }
     .box>div:nth-of-type(odd){
          background-color: aliceblue;
     }

    如果我们想要改变元素的位置,在不更改HTML的前提下,通过 grid 的属性来实现:
    如下图:
    这里写图片描述

     .box>div:nth-child(6){
             grid-row: 1/2;   //水平网格线
             grid-column: 2/3;    //列网格线的开始和结束
             background-color: red;
         }
    或者这样的简写方式也可以:  grid-area: 1 / 2 / 2 / 3;

    如果我们想要第六个网格跨越两个网格的宽度,如下图,我们可以这样写:
    这里写图片描述

    .box>div:nth-child(6){
                grid-area: 1/2/2/4;
                background-color: red;
          }

    接下来实现一个网格区域的HTML布局展示,如下:

    网格区域命名

    grid-area 属性也可以用来命名网格的某一个部分,然后我们可以用 grid-template-areas 属性来定位。
    创建一个简单的Html:

    <div class="container">
            <header></header>
            <nav></nav>
            <main></main>
            <aside></aside>
            <footer></footer>
    </div>

    需要使用 grid-area 属性来命名每个区域,然后使用 grid-template-areas 属性来指定每个网格区域所占据的行和列,

     .container{
            display: grid;
            grid-template-rows: 1fr 5fr 1fr;
            grid-template-columns: 2fr 5fr 3fr;
            grid-template-areas:
                "header  header  header"
                "nav     main    aside"
                "footer  footer  footer"; 
                    //z注意:header 和 footer 单词重复三次。 这表明,header 和 footer 横跨 3 列的宽度
            grid-gap: .75em;
            background-color: #eee;
            width: 100vw;
            height: 100vh;
        }
          header{
            grid-area: header;
            background-color: #9b59b6;
        }
    
        nav{
            grid-area: nav;
            background-color: #3498db;
        }
    
        main{
            grid-area: main;
            background-color: #2ecc71;
        }
    
        aside{
            grid-area: aside;
            background-color: #f1c40f;
        }
    
        footer{
            grid-area: footer;
            background-color: #1abc9c;
        }

    这里写图片描述

    展开全文
  • CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 ...
  • css display:grid布局

    万次阅读 2018-05-10 13:12:32
    简介CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式。如我们所知,CSS 总是用于网页的样式设置,但它并没有起到很好的作用。刚开始的时候...
  • CSS网格布局(Grid)完全教程

    千次阅读 2017-10-10 17:59:38
    本文译自《A Complete Guide to Grid》。...我们通过为父元素(变为grid container)和子元素(变为grid items)应用CSS规则来使用Grid布局。本文将讲述网格布局的基本概念和网格容器和其项目的全部属性及取值。
  • CSS栅格布局grid详解

    千次阅读 2019-11-12 14:48:35
    这里有一个需要注意的是,如果我们给一个标签设置了栅格布局,有的css属性和功能也就无法使用了,具体如下: 栅格容器上的所有column属性(column-count、columns等)都会被忽略。 栅格元素没有::first-line和::...
  • CSS Grid布局:合并单元格布局

    千次阅读 2016-12-05 20:18:36
    CSS Grid布局:网格单元格布局》一文中通过一些简单的实例介绍了如何给容器定义网格,并且怎么使用网格线或者网格区域来实现单元格这样的简单的布局。在文章结尾之处也提到过,这样的单元格如同表格一样,仅仅一个...
  • CSS3之grid栅格布局(行列同时控制)的布局效果: <div class="container"> <div class="first">第一区域</div> <div>第二区域</div> <div class="three">第三区域</...
  • 栅格布局的思想起源源自于印刷设计。栅格是用来将设计元素精确定位到页面上的的测量工具。这种想法经常被用在网页上来进行内容组织和统一,提升用户的视觉体验。 网页设计刚起步的时候,设计和布局都是是相当简单...
  • grid 栅格布局 (一)

    2018-10-21 18:08:08
    grid 栅格布局 (一) 我们学过的布局方式 我们一直以来了解到的布局方式都有哪一些? table表格布局 float浮动及position定位布局,借助元素盒子模型本身的特性以及float position等属性进行布局。 flex...
  • 栅格布局

    2020-07-20 09:53:40
    1、web页面中,布局方式有三种 2、栅格的概念 我们把每一行布局分成12分 元素的占地宽度靠份数...4、响应式的栅格布局 一行四列,大屏幕1:1:1:1 中屏幕 两个一行1:1/1:1 小屏幕 每个单独一行 col-*-n *:xl/lg/md/s
  • CSS实现栅格布局

    2018-03-19 16:01:00
    CSS实现栅格布局 设置容器container: .grid-container { width: 100%; max-width: 1200px; } 清除浮动: .row:before, .row:after { content: ""; display: block; height: 0; width: 0;...
  • 跟着写一个CSS栅格布局

    千次阅读 2017-06-21 12:53:19
    我们常在诸如Bootstrap的前端框架中见到css栅格系统,如果仅仅为了使用栅格布局而引入一个前端框架是很不明智的行为。所以,这篇文章就是帮助你从零打造一个CSS Grids~ 什么是栅格系统 栅格系统(CSS ...
  • css grid栅格布局

    2017-10-12 09:28:00
    http://www.cnblogs.com/xiaohuochai/p/7083153.html
  • 1、CSS3之新特性grid栅格布局:【行row和列column】都自己控制,完全基于CSS控制(未来的主流趋势,最新的浏览器才兼容) 2、float模拟栅格布局:核心控制【列】的一维布局【使用整体:目前市面上最流行的模拟栅格...
  • el-row代表行,里面嵌套el-col, el-row里面有gutter属性,属性为数字,则gutter前面加冒号,gutter属性代表el-col的间隔 el-col里面有span属性,span为x,则分成24/x列(每列为x) el-col里必须有div,不然span...
  • BootStrap栅格布局初探

    千次阅读 2018-01-22 13:20:01
      任何技术难题可进QQ群提问:【小崔说编程】  对于提问的原则是:没有你不能问的,只有我不会答的 ...小崔认为,在H5页面设计和制作中,布局是最...BootStrap在开篇最重要的位置就是介绍其“栅格系统”,我认为确
  • Bootstrap栅格布局使用

    千次阅读 2019-05-16 10:37:55
    这里是修真院前端小课堂...【Bootstrap栅格布局使用】 大家好,我是IT修真院北京分院第29期学员吴昊杰,一枚正直善良的web程序员。 今天给大家分享一下,修真院官网 CSS任务中可能会使用到的知识点: Bootstra...
  • 在过去的几个星期里,我开始看到基于 CSS Grid布局框架和栅格系统的出现。我们惊讶它为什么出现的这么晚。但除了使用 CSS Grid 栅格布局,我至今还没有看到任何框架能提供其他有价值的东西。他们沉醉于模仿过去...
  • css栅格布局原理

    2010-09-20 18:02:00
    1、Reset.css–样式重置 Reset.css的定义: The foundational CSS Reset removes the inconsistent styling of ...
  • 2.栅格布局

    千次阅读 2018-07-14 20:25:18
     如果要真想实现栅格,那么就必须有一个可以容纳第一个栅格的行,而多个栅格行最终就组成了一个页面.在整个bootstrap之中最多只能够存在有12个栅格 如果现在是一个宽容器的窗口,那么整个栅格都会按照宽屏幕的方式...
  • &lt;!DOCTYPE html&gt; &lt;html lang="zh-cn"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible"...met
  • 主要介绍了Bootstrap实现的经典栅格布局效果,结合具体实例形式分析了基于BootStrap实现栅格布局的完整步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
  • CSS Grid布局

    2018-07-10 19:21:15
     Grid布局即网格或者栅格布局,是一种基于二维网格布局系统。 一、兼容性 ie10、ie11支持带前缀-ms-   二、Grid布局 类似flex布局。grid布局分为重要的两部分,容器和子元素。 这里给父容器设置类...
  • xl对应屏幕 >=1920 px 超大显示器 lg对应屏幕>=1200px,小于 1920px 台式1920*...例如有如下代码将屏幕分成3列,进行响应式布局 <el-row :gutter="10"> <el-col :xs="0" :sm="7" :md="6" :lg="5" :x
  • LESS Grid 实现栅格布局

    2018-04-22 09:23:48
    @import ‘variables.less’; @import ‘module.less’; //- 设备尺寸 ...@grid-count: 12; // 容器名 @container: ~"container"; // 行名 @row: ~"row"; // 列名 @col-na...
  • Qt5之栅格布局

    千次阅读 2018-07-07 06:59:28
    1、创建栅格布局对象// 2018年6月24日 23:22:02 改为栅格布局 gridLayout = new QGridLayout;2、设置控件位置 // 菜单栏, 0行0列 占 1行 11列 gridLayout-&gt;addWidget(topMenuBar, 0, 0, 1, 10); // 工具...
  • 栅格布局的使用方法

    2016-08-09 16:56:00
    栅格布局的使用方法: 1)布局块必须放在.container或.container-fluid中 2)在容器中声明行 <div class="row"> 3)在行中声明列 <div class="col-*">, 4)所有的内容只能放在列中,不能放在行中 5)列...

空空如也

1 2 3 4 5 ... 20
收藏数 58,650
精华内容 23,460
关键字:

css grid