1. 首页首页
  2. 科技前沿科技前沿

2025年grid布局兼容性问题（grid布局和flex布局）

科技前沿 • • 阅读 43

grid布局兼容性问题（grid布局和flex布局）svg xmlns http www w3 org 2000 svg style display none svg

大家好，我是讯享网，很高兴认识大家。



 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p></p>

讯享网

相信写过前端对齐布局的前端都知道 Flex 布局，它是一种轴线布局，指定“项目”针对轴线的位置，针对行对齐、列对齐（居中对齐、两端对齐）这些布局场景使用 Flex 布局是一种非常常见且高效的方法。Grid 布局则是将容器分成“行”和“列”，产生单元格，然后指定“项目”所占的单元格，远比 Flex 布局更强大。

在这里插入图片描述
讯享网

在这里插入图片描述

跟 Flex 布局类似，Grid 也有两种属性：容器属性和项目属性。

讯享网
 
在这里插入图片描述
 
 
grid-template-columns 划分列
 
   
     
    
  1. 固定列 ，“项目”会自动撑满容器高度
     请添加图片描述 
    2.  
    
  2. 当容器宽度未知时， 第一个参数将无法得知，可以使用 它会自动以一列 宽度显示，若容器宽度400就展示4列，若容器宽度500就展示5个，无需手动计算设置。
     请添加图片描述 
    3.  
    
  3. 设置不同列为不同宽度 
    4.  
   
 
四列宽度分别为 
 
讯享网
 
在这里插入图片描述
 
   
     
    
  1. 比例片段 
    2.  
   
 
列宽分成7份，各列占比为 
 
 
在这里插入图片描述
 
 
   
     
    
  1. 长度范围 minmax()
    2.  
   
 
讯享网
 
在这里插入图片描述
 
   
     
    
  1. 浏览器自动分配 auto
    2.  
   
 
 
在这里插入图片描述
 
grid-gap / grid-column-gap 间距
 
讯享网
 
在这里插入图片描述
 
简写方式：
 
 
justify-items(水平方向) / align-items(垂直方向) 单元格内容的对齐方式
 
请添加图片描述
 
简写方式：
 
讯享网
 
justify-content(水平方向) / align-content(垂直方向) 整个内容区域的对齐方式
 
请添加图片描述
 
 
 
占单元格从 grid-column-start / grid-row-start 到 grid-column-end / grid-row-end
 
   
     
    
  1. 合并单元格行或列
    2.  
   
 
 
在这里插入图片描述
 
简写方式：
 
讯享网
 
   
     
    
  1. 合并单元格区域
    2.  
   
 
 
在这里插入图片描述
 
简写方式：
 
讯享网
 
justify-self(水平方向) / align-self(垂直方向) 项目对齐方式
 
请添加图片描述
 简写方式：
 
 
 

  

                    


                    


                    

                        

                            

                                小讯
                            

                            

                                

                                    
                                        
                                    
                                

                            

                        

                    

                


                

                    
                    
                    

                        
                        

                             上一篇
                            2025-04-23 17:31
                        

                    

                    
                    


                    
                    
                    

                        
                        

                            下一篇 
                            2025-05-05 22:24
                        

                    

                    
                    
                


                

                    
相关推荐

                    
                

                

                    

                        版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/142377.html