经典案例
<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;
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 为DeepSeek添加本地知识库
· 精选4款基于.NET开源、功能强大的通讯调试工具
· DeepSeek智能编程
· 大模型工具KTransformer的安装
· [计算机/硬件/GPU] 显卡