search

博客列表 >Grid布局学习

Grid布局学习

阿杰
阿杰原创
2020年06月29日 17:50:27818浏览

基本属性

  • 第一个属性就是给display定义 display: grid;
  1.         .container{
  2.             display: grid;
  3.         }
  • 列分布设置 grid-template-columns:，可以自适应也可以固定大小
  1.         .container{
  2.             display: grid;
  3.             grid-template-columns: repeat(3,1fr);  /*自适应平均分布三列*/
  4.             grid-template-columns: 100px 50px 100px;
  5.         }
  • 横分布设置 grid-template-rows:，同理可以自适应也可以固定大小
  1.         .container{
  2.             width: 300px;
  3.             height: 300px;
  4.             border: 1px solid #000000;
  5.             display: grid;
  6.             grid-template-columns: 100px 50px 100px;
  7.             grid-template-columns: repeat(3,1fr);  /*自适应平均分布三列*/
  8.             grid-template-rows: 100px 50px 150px;
  9.             grid-template-rows: repeat(3,1fr);  /*自适应平均分布三行*/
  10.         }
  • 单元格之间的间隙 gap:,
  1.         .container{
  2.             width: 300px;
  3.             height: 300px;
  4.             border: 1px solid #000000;
  5.             display: grid;
  6.             grid-template-columns: 100px 50px 100px;
  7.             grid-template-columns: repeat(3,1fr);  /*自适应平均分布三列*/
  8.             grid-template-rows: 100px 50px 150px;
  9.             grid-template-rows: repeat(3,1fr);  /*自适应平均分布三横*/
  10.             gap: 5px;
  11.         }

  • 矩形区域，默认是跨一行或跨一列（网格区域）
  1.         .container > .item{
  2.             background-color: lightgreen;
  3.             /* grid: 容器-》单元格-》项目 */
  4.             grid-column-start: 1;
  5.             grid-column-end: span 3;
  7.             grid-row-start: 1;
  8.             grid-row-end: 3;
  9.             grid-row-end: span 2;
  11.             /* 简化 */
  12.             /* grid-column:起始列号/结束列号;
  13.             grid-row:起始行号/结束行号; */
  14.             grid-column: 1/3;
  15.             grid-row: 1/3;
  16.         }

实战小案例

  1.         .container{
  2.             width: 1000px;
  3.             /* height: 600px; */
  4.             /* border: 1px solid #000000; */
  6.             display: grid;
  7.             grid-template-columns: repeat(5,1fr);
  8.             grid-template-rows: repeat(3,1fr);
  9.             gap: 10px;
  10.         }
  11.         .container > .item:first-of-type{
  12.             grid-row-end: span 2;
  13.             /* background-color: lightgreen; */
  14.             background-image: url('https://www.php.cn/static/images/index_learn_first.jpg');
  15.             background-size: 100% 100%;
  16.             box-shadow: 2px 2px 8px #ccc;
  17.             border-radius: 8px;
  18.             overflow: hidden;            
  19.         }
  20.         .itemTop{
  21.             height: 100px;
  22.             background-color: #cccccc;
  23.             background-image: url('https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png');
  24.             background-size: 100% 100%;
  25.         }
  26.         .container > .item:not(:first-of-type){
  27.             box-shadow: 2px 2px 8px #ccc;
  28.             border-radius: 8px;
  29.             overflow: hidden;
  30.         }
  31.         .itemBottom{
  32.             padding: 10px;
  33.             display: flex;
  34.             flex-direction: column;
  35.             justify-content: space-evenly;
  36.         }
  37.         .bottomTx1{
  38.             display: flex;
  39.             font-size: 12px;
  40.         }
  41.         .bottomTx2{
  42.             font-size: 12px;
  43.             color: #cccccc;
  44.             margin-top: 5px;
  45.         }
  46.         .txBg{
  47.             background: #cccccc;
  48.             color: #ffffff;
  49.             margin-right: 10px;
  50.             padding: 0 2px;
  51.         }
  1.     <div class="container">
  2.         <div class="item"></div>
  3.         <div class="item">
  4.             <div class="itemTop"></div>
  5.             <div class="itemBottom">
  6.                 <div class="bottomTx1">
  7.                     <div class="txBg">初级</div>
  8.                     <div>编辑学习方法分享直播</div>
  9.                 </div>
  10.                 <div class="bottomTx2">18w+次播放</div>
  11.             </div>
  12.         </div>
  13.         <div class="item">
  14.             <div class="itemTop"></div>
  15.             <div class="itemBottom">
  16.                 <div class="bottomTx1">
  17.                     <div class="txBg">初级</div>
  18.                     <div>编辑学习方法分享直播</div>
  19.                 </div>
  20.                 <div class="bottomTx2">18w+次播放</div>
  21.             </div>            
  22.         </div>
  23.         <div class="item">
  24.             <div class="itemTop"></div>
  25.             <div class="itemBottom">
  26.                 <div class="bottomTx1">
  27.                     <div class="txBg">初级</div>
  28.                     <div>编辑学习方法分享直播</div>
  29.                 </div>
  30.                 <div class="bottomTx2">18w+次播放</div>
  31.             </div>
  32.         </div>
  33.         <div class="item">
  34.             <div class="itemTop"></div>
  35.             <div class="itemBottom">
  36.                 <div class="bottomTx1">
  37.                     <div class="txBg">初级</div>
  38.                     <div>编辑学习方法分享直播</div>
  39.                 </div>
  40.                 <div class="bottomTx2">18w+次播放</div>
  41.             </div>            
  42.         </div>
  43.         <div class="item">
  44.             <div class="itemTop"></div>
  45.             <div class="itemBottom">
  46.                 <div class="bottomTx1">
  47.                     <div class="txBg">初级</div>
  48.                     <div>编辑学习方法分享直播</div>
  49.                 </div>
  50.                 <div class="bottomTx2">18w+次播放</div>
  51.             </div>            
  52.         </div>
  53.         <div class="item">
  54.             <div class="itemTop"></div>
  55.             <div class="itemBottom">
  56.                 <div class="bottomTx1">
  57.                     <div class="txBg">初级</div>
  58.                     <div>编辑学习方法分享直播</div>
  59.                 </div>
  60.                 <div class="bottomTx2">18w+次播放</div>
  61.             </div>
  62.         </div>
  63.         <div class="item">
  64.             <div class="itemTop"></div>
  65.             <div class="itemBottom">
  66.                 <div class="bottomTx1">
  67.                     <div class="txBg">初级</div>
  68.                     <div>编辑学习方法分享直播</div>
  69.                 </div>
  70.                 <div class="bottomTx2">18w+次播放</div>
  71.             </div>
  72.         </div>
  73.         <div class="item">
  74.             <div class="itemTop"></div>
  75.             <div class="itemBottom">
  76.                 <div class="bottomTx1">
  77.                     <div class="txBg">初级</div>
  78.                     <div>编辑学习方法分享直播</div>
  79.                 </div>
  80.                 <div class="bottomTx2">18w+次播放</div>
  81.             </div>            
  82.         </div>
  83.         <div class="item">
  84.             <div class="itemTop"></div>
  85.             <div class="itemBottom">
  86.                 <div class="bottomTx1">
  87.                     <div class="txBg">初级</div>
  88.                     <div>编辑学习方法分享直播</div>
  89.                 </div>
  90.                 <div class="bottomTx2">18w+次播放</div>
  91.             </div>
  92.         </div>
  93.         <div class="item">
  94.             <div class="itemTop"></div>
  95.             <div class="itemBottom">
  96.                 <div class="bottomTx1">
  97.                     <div class="txBg">初级</div>
  98.                     <div>编辑学习方法分享直播</div>
  99.                 </div>
  100.                 <div class="bottomTx2">18w+次播放</div>
  101.             </div>
  102.         </div>
  103.         <div class="item">
  104.             <div class="itemTop"></div>
  105.             <div class="itemBottom">
  106.                 <div class="bottomTx1">
  107.                     <div class="txBg">初级</div>
  108.                     <div>编辑学习方法分享直播</div>
  109.                 </div>
  110.                 <div class="bottomTx2">18w+次播放</div>
  111.             </div>
  112.         </div>
  113.         <div class="item">
  114.             <div class="itemTop"></div>
  115.             <div class="itemBottom">
  116.                 <div class="bottomTx1">
  117.                     <div class="txBg">初级</div>
  118.                     <div>编辑学习方法分享直播</div>
  119.                 </div>
  120.                 <div class="bottomTx2">18w+次播放</div>
  121.             </div>
  122.         </div>
  123.         <div class="item">
  124.             <div class="itemTop"></div>
  125.             <div class="itemBottom">
  126.                 <div class="bottomTx1">
  127.                     <div class="txBg">初级</div>
  128.                     <div>编辑学习方法分享直播</div>
  129.                 </div>
  130.                 <div class="bottomTx2">18w+次播放</div>
  131.             </div>
  132.         </div>
  133.     </div>

上一条：仿html.cn-PC页面-web前端第11章6.24下一条：Grid(网格)布局-仿php中文网模块
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多