1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
      <output id="hzk7v"></output>
    2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
    3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

      解析CSS中的Grid布局完全指南

        发布时间£º2019-04-09 16:08:40   作者£ºwopen   我要评论

      这篇文章主要介绍了解析CSS中的Grid布局完全指南的相关资料£¬文中通过示例代码介绍的非常详细£¬对大家的学习或者工作具有一定的参考学习价值£¬需要的朋友们下面随着小编来一起学习学习吧

      Grid 是一个基于二维网格布局的系?#24120;?#26377;了它我们可以非常方便的实现过去很复杂布局£¬无需再使用 float , inline-block , position 这些?#23616;?#19978;是 hack 的方法¡£

      CSS网格布局擅长于将一个页面划分为几个主要区域£¬以及定义这些区域的大小¡¢位置¡¢层次等关系£¨前提是HTML生成了这些区域£©¡£

      它像表格一样£¬网格布局让我们能够按行或列来对齐元素¡£ 然而在布局上£¬网格比表格更可能做到或更简单¡£

      网格布局概念

      在学习之前需要了解以下网格的几个概念¡£

      网格轨道£¨Grid Tracks£©

      网格轨道 是?#25945;?#32593;格线之间的空间¡£它们通过使用属性 grid-template-columnsgrid-template-rows 在网格中定义¡£

      上图中有两行三列£¬一行或一列就叫做轨道¡£

      网格线£¨Grid Lines£©

      使用 Grid 布局在显式网格中定义轨道的同时会创建网格线¡£

      网格线可以用它们的编号来寻址¡£在从左到右的语言中£¬ 列线1 将位于网格的左侧£¬ 行线1 将位于其顶部¡£线编号遵循文档的写入模式£¬因此在从右到左的语言中£¬ 列线1 行将位于网格的右侧¡£下面的?#35745;?#23637;示了该网格的线编号£¬假设语言是从左到右的¡£

       

      网络单元格£¨Grid Cell£©

      Grid 布局中£¬网络单元格是 CSS 网格中的最小单元¡£它是四条网格线之间的空间£¬非常像表格单元格¡£

       

      网格区域£¨Grid Areas£©

      网格区域是网格中由一个或者多个网格单元格组成的一个矩形区域¡£?#23616;?#19978;£¬网格区域一定是矩形的¡£例如£¬不可能创建T形或L形的网格区域¡£

       

      网格间距£¨Gutters£©

      网格间距是网格轨道之间的间距£¬可以通过 grid-column-gap £¬ grid-row-gap 在Grid布局中创建¡£

       

      使用 Grid 布局

      和 flex 类似£¬要使用网格布局£¬首先要有一个容器£¬将一个元素的 display 设置为 grid 就可以得到一个 grid 容器¡£容器的子项就是网格项£¨grid items£©£¬它有点类似 table 中的 td £¬但是更加灵活¡£

      float , clear , 和 vertical-align 元素对网格容器不起作用¡£

      容器上的属性

      网格模板

      创建了网格容器£¬我们就可以定义这个网格有多少行有多少列£¬并且每一行每一列的大小¡£

      grid-template-rows

      我们使用 grid-template-rows 来显性定义网格有多少?#23567;?#23427;可以取如下的值£º

      none 关键字£¬表示不明确的网格¡£所有的行和其大小都将由 grid-auto-rows 属性隐式的指定¡£

      非负值的长度大小 £º如 px, em, vw

      百分比 £º相对于网格容器的£¬如果是 inline-grid £¬则百分比值将被视为 auto

      flex £º非负值£¬用单位 fr 来定义网格轨道大小的弹性系数¡£每个定义了 flex 的网格轨道会按比例分配剩余的可用空间

      max-content 关键字£¬表示以网格项的最大的内容来占据网格轨道的

      min-content 关键字£¬表示以网格项的最大的最小内容来占据网格轨道

      auto 如果该网格轨道为最大时£¬等同于 max-content £¬为最小时£¬等同于 min-content

      grid-template-columns

      它和 grid-template-rows 类似£¬一个设置网格行£¬一个是设置网格?#23567;?/p>

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

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

       

      Grid 中可以使用的函数

      在 Grid 布局中我们还可以使用如下 3 个函数

      repeat()

      repeat 函数可以以一?#25351;?#31616;洁的方式去表示大量而且重复行的表达式¡£

      比如上面 grid-template-columns: 1fr 1fr 1fr; 我们可以写成 repeat(3, 1fr) ¡£它的第一个参数是重复的次数£¬而可以为 auto-fillauto-fit ¡£

      auto-fill

      如果容器有明确的大小或最大大小£¬则重复次数是最大可能的正整数£¬不会导致网格溢出其网格容器¡£如果任何重复次数都会溢出£¬则重复次数为1¡£

      auto-fit

      auto-fill 的行为相同£¬只是在放置网格项后£¬任何空的重复轨道都会折叠¡£

      #container {
        display: grid;
        grid-template-columns: repeat(2, 50px 1fr) 100px;
        grid-gap: 5px;
        box-sizing: border-box;
        height: 200px;
        width: 100%;
        background-color: #8cffa0;
        padding: 10px;
      }
      
      #container > div {
        background-color: #8ca0ff;
        padding: 5px;
      }

       

      minmax()

      定义了一个长宽范围的闭区间¡£它接受两个参数£¬最小值 和 最大值¡£它返回这个区间中的值¡£

      minmax(max-content, 300px) £¬最大不能大于 300px

      minmax(200px, 1fr) 最小不能小于 200px

      fit-content()

      它相当于 min(maximum size, max(minimum size, argument)) ¡£参数可以是长度值和百分比¡£

      它在内容的最小值和参数中去一个最大值£¬然后再在内容的最大值中取一个最小值¡£

      也就是当内容少时£¬它取内容的长度£¬如果内容多£¬内容长度大于参数长度时£¬它取参数长?#21462;?/p>

      grid-template-areas

      这个属性网格区块£¬需要和 grid-area 配合使用£¬它的值可以是 none字符串 ¡£

      为字符串时每一个给定的字符串会生成一行£¬一个字符串中用空格?#25351;?#30340;每一个单元(cell)会生成一?#23567;?#22810;个同名的£¬跨越相邻行或列的单元称为网格区块(grid area)¡£非矩形的网格区块是无效的¡£

      #page {
        display: grid;
        width: 100%;
        height: 250px;
        grid-template-areas: "head head"
                             "nav  main"
                             "nav  foot";
        grid-template-rows: 50px 1fr 30px;
        grid-template-columns: 150px 1fr;
      }
      
      #page > header {
        grid-area: head;
        background-color: #8ca0ff;
      }
      
      #page > nav {
        grid-area: nav;
        background-color: #ffa08c;
      }
      
      #page > main {
        grid-area: main;
        background-color: #ffff64;
      }
      
      #page > footer {
        grid-area: foot;
        background-color: #8cffa0;
      }

      grid-template-areas 字符串£¬关联 grid item 的 grid-area £¬用它定义一片区域¡£

      grid-template

      grid-template-rows ¡¢ grid-template-columnsgrid-template-areas 的简?#30784;?/p>

      它的值可以分三种情况£º

      • none
      • 只有定义行和列时可以使用 rows/columns 语法£¬如 grid-template: 100px 1fr / 50px 1fr;
      • ?#27604;?#20010;都有时£¬也用一个 / ?#25351;ô£?#32780;且它的右边?#19981;?#26159; columns £¬但是它的左边语法是 <line-names>? <string> <track-size>? <line-names>? ¡£
      .page {
          grid-template: [header-top] "a a a"     [header-bottom]
                         [main-top]   "b b b" 1fr [main-bottom]
                         / auto 1fr auto;
      }
      /*
      line-names 是可选的£¬自定义名称£¬需要使用中括号包裹£¬它其实相当于注释
      string 网格项 grid-area 的关联值
      track-size 这一行的大小
      */
      #page {
        display: grid;
        width: 100%;
        height: 200px;
        grid-template: [header-left] "head head" 30px [header-right]
                       [main-left]   "nav  main" 1fr  [main-right]
                       [footer-left] "nav  foot" 30px [footer-right]
                       / 120px 1fr;
      }
      
      header {
        background-color: lime;
        grid-area: head;
      }
      
      nav {
        background-color: lightblue;
        grid-area: nav;
      }
      
      main {
        background-color: yellow;
        grid-area: main;
      }
      
      footer {
        background-color: red;
        grid-column: foot;
      }

       

      grid-row-gap / row-gap

      用来设置行元素之间的间隙(gutter) 大小¡£它的值可以是长度值¡¢百分比和 normal ¡£

      CSS Grid Layout 起初是用 grid-row-gap 属性来定义的£¬目前逐渐被 row-gap 替代¡£但是£¬为了兼容那些不支持 row-gap 属性的浏览器£¬你需要使用带有前缀的属性¡£

      .box{
          grid-row-gap: 1em;
      }

       

      grid-column-gap / column-gap

      用来设置元素列之间的间隔 (gutter) 大小¡£它的值可以是长度值¡¢百分比和 normal ¡£

      normal 在 多列布局 时默认间隔为1em£¬其他类型布局默认间隔为 0¡£

      grid-row-gap 一样£¬它渐渐被 column-gap 取代¡£

      .page {
          grid-column-gap: 1em;
      }

       

      grid-gap / gap

      是上面两个属性的简写£¬语法是 row-gap column-gap ¡£如果没有 column-gap 那么它将被设置成跟 row-gap 一样的的值¡£

      它也渐渐被 gap 取代¡£

      #grid {
        display: grid;
        height: 200px;
        grid-template: repeat(3, 1fr) / repeat(3, 1fr);
        gap: 20px 5px;
      }
      
      #grid > div {
        background-color: lime;
      }

       

      隐式创建的行和列

      css gird 会根据周围项目的大小和跨度自动调整网格上每个项目的位置¡£

      比如£º

      .box {
        display: grid;
        grid-template: 25px / 100px 160px;
        background: #000;
      }
      .box * {
        background: #ccc;
      }
      .box *:nth-child(even) {
        background: #777;
      }

      我们只定义了一行£¬两?#23567;?#20294;是我们却有 5 个子元素¡£CSS网格决定将它们扩展到隐式创建的空间£¬新建的隐式行中的列自动从先前指定的 grid-template-rows 属性继?#34892;?#39640;¡£

      grid-column-start , grid-column-end , grid-row-startgrid-row-end 这 4 个属性是 grid item 上的£¬它可以定义一个 grid item 的位置£¬如果我们将它的位置设置的超出我们定义的网格£¬那时也会隐式创建行或?#23567;?/p>

      grid-auto-rows

      指定了隐式创建行的大小¡£它的值可以是£º

      • 长度值 £º px em vmax
      • 百分比 £º相对于网格容器
      • flex £º非负值£¬用单位 fr 来定义网格轨道大小的弹性系数¡£每个定义了 flex 的网格轨道会按比例分配剩余的可用空间
      • max-content 关键字£¬表示以网格项的最大的内容来占据网格轨道的
      • min-content 关键字£¬表示以网格项的最大的最小内容来占据网格轨道
      • auto 如果该网格轨道为最大时£¬等同于 max-content £¬为最小时£¬等同于 min-content

      它的值和 grid-template-rows 是一样的¡£

      .box {
        display: grid;
        grid-template: 25px / 100px 160px;
        gap: 10px 20px;
        grid-auto-rows: 50px;
        background: #000;
      }
      .box * {
        background: #ccc;
      }
      .box *:nth-child(even) {
        background: #777;
      }

       

      grid-auto-columns

      指定了隐式创建的网格的列宽¡£它的取值和 grid-auto-rows 一样¡£

      #grid {
        height: 100px;
        display: grid;
        grid-template-areas: "a a";
        grid-gap: 10px;
        grid-auto-columns: 200px;
      }
      
      #grid > div {
        background-color: lime;
      }

       

      grid-auto-flow

      控制着自动布局算法怎样运作£¬精确指定在网格中被自动布局的元素怎样排?#23567;?/p>

      如果我们在一个 div 中写几个 div £¬再对父级设置 display: grid; £¬从视觉的角度可以发?#32622;?#20160;么变化¡£但是如果我们再将父级 div 加上一句 grid-auto-flow: column; 我们就发现现在子元素在一行显示£¬和弹性盒?#26377;?#26524;差不多¡£

      grid-auto-flow 的值如下£º

      • row指定自动布局算法按照通过逐行填充来排列元素£¬在必要时增?#26377;ž´小££?#40664;认值£©
      • column指定自动布局算法通过逐列填充来排列元素£¬在必要时增?#26377;äX小?/li>

      在这两个关键字后面还可以加上 dense 关键字¡£语法是 [ row | column ] || dense ¡£

      该关键字指定自动布局算法使用一种“稠密”堆积算法£¬如果后面出现了稍小的元素£¬则会试图去填充网格中前面留下的空白¡£这样做会填上稍大元素留下的空白£¬但同时也可能导致原来出现的次序被打乱¡£

      如果省?#36816;ü£?#20351;用一种¡¸稀疏¡¹算法£¬在网格中布局元素时£¬布局算法只会¡¸向前¡¹移动£¬永远不会?#22815;?#21435;填补空白¡£这保证了所有自动布局元素¡¸按照次序¡¹出现£¬?#35789;?#21487;能会留下被后面元素填充的空白¡£

      grid-auto-flow: row;

      grid-auto-flow: row dense;

       grid

      grid 是 CSS 简?#35789;?#24615;£¬它几乎包括上面提到的所有属性£¨除了 gap £©¡£

      与其他简?#35789;?#24615;同样£¬若有次级属性未被声明£¬其将使用初始值¡£另外£¬尽管此简写声明无法设置网格的槽£¨gutter£©£¬槽会被该声明重置¡£

      它的值可以分为 3 类

      grid-template

      就和 grid-template 简写一样£¬如 grid: [linename1] "a" 100px [linename2];

      grid-template-rows / [ auto-flow && dense? ] grid-auto-columns?

      grid-template-rows 设置行高£¨ grid-template-columns 被设置为 none £©£¬ / 后面的 auto-flow 必须要写£¨ grid-auto-flow 被设置为 column £©£¬最后 grid-auto-columns 置明确该如何自动重复列轨道£¨ grid-auto-rows 属性设为 auto £©¡£

      grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;

      [ auto-flow && dense? ] grid-auto-rows? / grid-template-columns

      这?#20013;?#27861;和?#29616;中?#27861;相反£¬这种是设置 grid-template-columns £¨ rows 属性为 none £©¡£可选的设置 grid-auto-rows 属性£¨ columnsauto £©

      grid: auto-flow dense / 30%;

      网格项上的属性

       grid-row-start, grid-row-end, grid-column-start, grid-column-end

      分别指定 grid item 在网格中的行起始位£¬行结束位£¬列起始位£¬列结束位¡£

      这就需要了解之前介绍的网格线概念£¬横线£¨row£©从?#31995;?#19979;递增£¬竖线£¨column£©从做到右递增£¬都是从 1 开始算¡£

      它们可以取如下值£º

      auto 表示自动放置£¬自动跨度或默认 span 为 1 数字 表示网格线 span 数字 表示跨越几个格子£¬ 数字 小于等于 0 无效¡£如果超过网格大小会隐式创建行或?#23567;?/p>

      它和 table 有点相似

      如果设置的位置超出指定大小£¬会得到不稳定的效果£¬应该避免这种情况¡£

      .box {
        display: grid;
        grid: 100px 100px / 100px 100px;
        background: #000;
      }
      .box * {
        background: #ccc;
      }
      .box *:nth-child(even) {
        background: #777;
      }
      .box1 {
        grid-column-start: span 5;
      }

       

      grid-row, grid-column

      grid-rowgrid-column 分别是上面 4 个属性简?#30784;?/p>

      它们值的语法是 start / end ¡£如果只有一个?#30340;?#20040;它是 start £¬ end 值为默认 auto ¡£

      当列数未知时£¬可以使用 -1 让它一直扩展到网格末尾¡£

      使用负值

       

      grid-area

      上面我们已经展示了 grid-areagrid-template-areas 结合的用法¡£ grid-area 其实是 grid-row-start ¡¢ grid-column-start ¡¢ grid-row-endgrid-column-end 的简?#30784;?/p>

      它的默认值是 grid-area: auto;

      如果设置了 4 个值的话那么它的?#25215;?#26159;

      grid-area: row-start / column-start / row-end / column-end;

      如果设置了 3 个值£¬那么最后一个为 auto

      如果设置了 2 个值£¬那么后两个为 auto

      如果设置了 1 个值£¬那么后三个为 auto

      如果第一项是 自定义表示 £¬那么被忽略的都为自定义表示

      .box1 {
        grid-area: a / a;
      }
      
      /* 相当于 */
      
      .box1 {
          grid-row-start: a;
          grid-column-start: a;
          grid-row-end: a;
          grid-column-end: a;
      }

      网格项的内容对齐

      我们可以使用 align-selfjustify-self 调整 grid item 的内容对齐方式¡£

      align-self 用来垂直方向对齐£¬ justify-self 用来水平方向对齐¡£

      align-self

      flex 布局也可以使用这个属性¡£它常用如下 3 个值£º

      1. start: 内容顶端对齐
      2. center: 内容垂?#26412;?#20013;
      3. end: 内容底部对齐

       

      justify-self

      它常用如下 3 个值£º

      • start / left : 内容左对齐
      • cneter : 内容水平居中
      • end / right : 内容右对齐

      以上就是本文的全部内容£¬希望对大家的学习有所帮助£¬也希望大家多多支持脚?#23616;?#23478;¡£

      相关文章

      • 10分?#27704;?#35299;CSS3 Grid布局

        Grid做前端的同学应该都很熟悉了£¬这篇文章主要介绍了10分?#27704;?#35299;CSS3 Grid布局£¬小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
        2018-12-20
      • CSS Grid 网格布局全解析

        这篇文章主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
        2018-03-29
      • 5分钟教你学会 CSS Grid 布局

        这篇文章主要介绍了5分钟教你学会 CSS Grid 布局的相关资料,小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
        2017-12-04
      • CSS Grid布局教程之网格单元格布局

        本文通过各种实例向大家阐述CSS Grid布局£¬让我们一起领略其强大的魅力,需要的朋友可以参考下
        2014-12-30
      • CSS Grid布局教程之浏览器开启CSS Grid Layout汇总

        在这篇文章中£¬主要向大家介绍如何让自己的浏览器支持CSS Grid Layout模块功能,需要的朋友可以参考下
        2014-12-30
      • CSS Grid布局教程之什?#35789;?#32593;格布局

        在这篇文章中简单的介绍了CSS Grid Layout£¬以及为什么要使用他£¬并且介绍了其一些术语£º网格线¡¢网格轨道¡¢网格单元格¡¢网格区域和网格容器等£¬为后面如何学习和使用CSS G
        2014-12-30
      • 使用CSS Grid布局实现网格的流动

        这篇文章主要介绍了使用CSS Grid布局实现网格的流动,需要的朋友可以参考下
        2014-12-30

      最新评论

      3dÊÔ»úºÅÖвÊÍø

        1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
          <output id="hzk7v"></output>
        2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
        3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

            1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
              <output id="hzk7v"></output>
            2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
            3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>