标签:色子 定义 布局 100px 网格 grid template areas
一、基本概念
样式 | 含义 |
grid-area | 定义名称 |
grid-auto-columns | 定义列数 |
grid-auto-flow | 定义单元格流动方向(想象水流的样子) |
grid-auto-rows | 定义行数 |
grid-column | 第几列 / span 合并列数 |
grid-column-start | 第几列 |
grid-column-end | 跨度列 |
column-gap | 列间距 |
grid-gap | 行间距 / 列间距 |
grid-row | 第几行 / 行跨度 |
row-gap | 行间距 |
grid-row-start | 第几行 |
grid-row-end | 跨度 |
grid-template | 定义网格 行 / 列 |
grid-template-columns | 定义网格列数 |
grid-template-rows | 定义网格行数 |
grid-template-areas | 定义区域网格 |
<div class="grid grid1"> <div class="item" style="grid-area:a"></div> </div>
.grid { grid-gap: 10px; display: grid; height: 100px; width: 100px; background: #fff; padding: 15px; border-radius: 5px; margin-top: 10px; } .grid1 { grid-template-areas: ". . ." ". a ." ". . ."; }
.grid2 { grid-template-areas: ". a ." ". . ." ". b ."; }
<div class="grid grid2"> <div class="item" style="grid-area:a"></div> <div class="item" style="grid-area:b"></div> </div>
.grid3 { grid-template-areas: "a . ." ". b ." ". . c"; }
<div class="grid grid3"> <div class="item" style="grid-area:a"></div> <div class="item" style="grid-area:b"></div> <div class="item" style="grid-area:c"></div> </div>
.grid4 { grid-template-areas: "a . b" ". . ." "c . d"; }
<div class="grid grid4"> <div class="item" style="grid-area:a"></div> <div class="item" style="grid-area:b"></div> <div class="item" style="grid-area:c"></div> <div class="item" style="grid-area:d"></div> </div>
<div class="grid grid5"> <div class="item" style="grid-area:a"></div> <div class="item" style="grid-area:b"></div> <div class="item" style="grid-area:c"></div> <div class="item" style="grid-area:d"></div> <div class="item" style="grid-area:e"></div> </div>
.grid5 { grid-template-areas: "a . b" ". c ." "d . e"; }
.grid6 { grid-template: repeat(3, calc((100px - 20px) / 3)) / repeat(2, calc((100px - 20px) / 3)); justify-content: space-between; }
<div class="grid grid6"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
标签:色子,定义,布局,100px,网格,grid,template,areas 来源: https://www.cnblogs.com/whnba/p/11876008.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。