grid布局

最新推荐文章于 2024-07-21 08:56:16 发布

一个对前端瑟瑟发抖的小白

最新推荐文章于 2024-07-21 08:56:16 发布

阅读量389

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/weixin_46578458/article/details/105569735

版权

grid

      grid  网格布局  

        添加在容器身上的
        1   display:grid;    inline-grid   触发网格布局


        2   划分行和列  
             
                grid-template-columns:;
                grid-template-rows:;

                               属性值可以跟 px  /  百分比

        3   关键字
         
               repeat(重复的次数  重复的值)  比如 grid-template-rows:repeat(3,200px);  重复三次每次200px
               
               aotu-fill  自动填充  grid-template-rows:repeat(auto-fill,200px);
               
               fr关键字  （列宽片段） 每列元素成比例分配

               minmax   子元素的列宽的最小值 和最大值

               auto     子元素分配 剩余父元素的宽度

        4   网格间距  

             grid-column-gap:;  
             grid-column-gap:;  
             grid-gap:;    下 右

        5   网格线名称  
                  grid-template-columns:[c1] 100px [c2] 100px [c3] auto [c4];
                  grid-template-rows:[r1] 100px [r2] 100px [r3] auto [r4];


        6   grid-area  需要给子元素起名字 

            grid-template-areas: "a b c"
                                 "d e f"
                                 "g o p";
        
        7   设置子元素在容器中的排列方式

            grid-auto-flow:;   
                            row
                            column

        8   设置子元素中内容的排列方式
             justify-items 
             align-items
             place-itesm       
                          center/start/end/stretch

        9   设置子元素在容器中的排列方式
             justify-content
             align-content
             place-content      
                          center/start/end/stretch /space-between/ space-around
          
            写在子元素身上              
        10   grid-column:1/3;  从开始的第一条网格线到第三条网格线