Grid 布局基础常见场景

  • SomeTips

    • CSS Grid Layout
    • 二维布局方案
    • 容器:最外层
    • 项目:只能是容器的顶层子元素
    • Grid 布局只对项目生效
    • 目前兼容性只有:IE10以上; chrome57以上
  • 经典案例

    • 场景:单元格的栅格矩阵,栅格布局比较合适
        <div class="main">
        	<div class="item">1</div>
        	<div class="item">2</div>
        	<div class="item">3</div>
        	<div class="item">4</div>
        	<div class="item">5</div>
        </div>
      ****************
        .main{
    		display: grid;
    		grid-template-columns:100px 200px 200px;
    		grid-template-rows:100px 200px;
    		grid-gap:10px;
    	}
        或者
        .main{
    		display: grid;
    		grid-template-columns:repeat(2,100px);
    		grid-template-rows:repeat(3,100px);
    		grid-gap:10px;
    	}
        或者
        .main{
    		display: grid;
    		grid-template-columns:repeat(auto-fit,200px);
    		grid-template-rows:repeat(3,100px);
    		grid-gap:10px;
    	}
    	或者
        .main{
    		display: grid;
    		grid-template-columns:repeat(auto-fit,200px);
    		grid-auto-rows:100px; //行自适应
    		grid-gap:10px;
    	}
    	或者
        .main{
    		display: grid;
    		grid-template-rows:repeat(auto-fit,200px);
    		grid-auto-columns:100px; //列自适应
    		grid-gap:10px;
    	}
        或者
        .main{
    		display: grid;
    		grid-template-columns:1fr 2fr;
    		grid-template-rows:1fr 1fr 2fr;
    		grid-gap:10px;
    	}
    
    
posted @   Yogic  阅读(544)  评论(0编辑  收藏  举报
编辑推荐:
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
阅读排行:
· 为DeepSeek添加本地知识库
· 精选4款基于.NET开源、功能强大的通讯调试工具
· DeepSeek智能编程
· 大模型工具KTransformer的安装
· [计算机/硬件/GPU] 显卡
点击右上角即可分享
微信分享提示