CSS

grid 网格布局之自我理解

联系站长 作者:web知道 来源:未知 2020-09-10 09:14 我要评论

grid 网格布局之自我理解...

container 容量
    
    // 列布局
    grid-template-columns
   // 行布局
    grid-template-rows: repeat(3,100px);
               使用方式
              grid-template-columns: repeat(3,200px);  /* 指的是重复三列 宽为200px     1fr指的是多少份,和flex:1比较相似*/
                                                                               /* minmax(100px 1fr) 有两个参数,一个最小值,一个最大值 */
              grid-template-columns: repeat(auto-fill,100px);  auto-fill指的是以最上一层宽度全屏排列,每个100px */
 
   // 间距
            /* row-gap: 10px;行间距 */
            /* column-gap: 10px; 列间距 */
           简写 gap:10px;

   // 子项的排序方式
          grid_auto-flow
               使用
                     grid_auto-flow 指的是items的排序方式,是横着排rows还是竖着排columns dense*/
              如图
                     rows
                             

                     columns
                             
                             

    // 设置未定义的行或列的子项宽高
           grid-auto-rows
               属性
               grid-auto-rows
               grid-auto-columns
               指的是,当grid-template-rows或grid-template-columns没有设置到的行或列数,使用上述两个参数可以为超出行和列的子项设置宽高

   //区域布局
              grid-template-areas:'a b c'
                                              'd e g'
                                              'h  f  i'
 
              grid-template-areas:'a a c'
                                              'd e g'
                                              'd  f  i' 
                                              代表第一和第二个一个区域    .  为不分配区域,匿名区域   
 
   //items对齐方式如flex
               justify-items
               align-items
               place-items 前面两者的组合 如center center
 
   //container的对齐方式 -- 整个items就是一个内容区 属性和flex相似
               justify-content
               align-content
 

items 子项
    
   //根据网格线合并单元格
               grid-column-start
               grid-column-end
               grid-row-start
               grid-row-end
                  参数为网格线的顺序  如grid-row-start:1; grid-row-end:3; 即行的第一条网格线到第三条网格线合并
                  参数为网格线的顺序  如grid-column-start:span 3  就是从当前线跨越多少格  下面的写法等同上面
               简写
               grid-column
               grid-row
                  属性写法 1 / 3  第一条开始,第三条结束
 
  //使用区域  此处使用的是就是container设好的区域布局
               grid-area  把当前的子项移到指定区域内 如当前是c,此处填入f,即c和f位置互换   ,如container处有a a那么在此处使用a的话,那第一第二个单元格合并
 
 //子项内部定位
               justify-self
               align-self
               laace-self
                  和container容量写法一致  只是容量是针对全部,这里针对自身    
 




本文如有侵犯版权请联系站长删除。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 解决display:flex布局下默认为flex:1

    解决display:flex布局下默认为flex:1

    2020-07-09 16:31

  • flex 弹性布局

    flex 弹性布局

    2019-12-05 12:15

网友点评
精彩导读