Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 深刻理解 grid 实现 12 列栅格布局的原理与实现,仿写小米商城(1029)
Blogger Information
Blog 21
fans 0
comment 0
visits 14737
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
深刻理解 grid 实现 12 列栅格布局的原理与实现,仿写小米商城(1029)
Yuming
Original
1153 people have browsed it

深刻理解 grid 实现 12 列栅格布局的原理与实现,并用它写一个页面(类型自定义)

grid 可以实现栅格布局，掌握了就能满足网页开发的大部分需求，特别是移动端的布局，能够快速的开发好一个页面，省去了很多重复的劳动力，是一个不可多得的布局，也是必须要掌握的布局。

12 列栅格系统用于通过一系列的行（row）与列（col-*）的组合来创建页面布局，它的栅格系统最大分为 12 份，这样通过网格布局实现的栅格布局使用起来也是十分方便的，就好像你已经写了一个通用的表格模板，以后你需要做的只是怎么把材料填进去，而不是怎么去重复的造轮子，写模板。
12 列栅格布局已经给了你教程，你只需要按照他提供的方法重复地做就好了

页面(类型自定义)

由于时间比较少，再加上刚接触没几天，以前也没用过，可能会存在一些问题，效果如下

  1. <div class="container">
  2.       <div class="row">
  3.         <span class="row header item col-12">
  4.           <div class="item col-2" style="color: chocolate">MI</div>
  5.           <div class="item col-8">
  6.             <input placeholder="请输入商品名称" type="text" />
  7.           </div>
  8.           <div class="item col-2">
  9.             <div class="fa fa-address-card" aria-hidden="true"></div>
  10.           </div>
  11.         </span>
  12.       </div>
  13.       <div class="row">
  14.         <span class="nav item col-12">
  15.           <span class="col-1" style="color: chocolate">推荐</span>
  16.           <span class="col-1">手机</span>
  17.           <span class="col-1">智能</span>
  18.           <span class="col-1">电视</span>
  19.           <span class="col-1">笔记本</span>
  20.           <span class="col-1">家电</span>
  21.           <span class="col-1"
  22.             ><i class="fa fa-angle-down" aria-hidden="true"></i
  23.           ></span>
  24.         </span>
  25.       </div>
  26.       <div class="row-bannner">
  27.         <div class="banner">
  28.           <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b09cccd67154b8c9d17a16ba0ce6120.jpg?thumb=1&w=720&h=360" alt="">
  29.         </div>
  30.         </span>
  31.       </div>
  32.       <div class="row">
  33.         <div class="tab item col-12">
  34.           <a class="col-1"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb65daec7ef7b52cc785f88f78efba37.png?w=216&h=228&bg=FDF1E6" alt=""></a>
  35.           <a class="col-1"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb4cbd9dabf2c2aef15e43f5bcab5cb9.jpg?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a>
  36.           <a class="col-1"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d436f30612651fffe1d6c5aaa3fdb816.png?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a>
  37.           <a class="col-1"><img src="https://i8.mifile.cn/v1/a1/e8bc849a-0a3b-21a0-6810-7da3a3903dee.webp?w=216&h=228&bg=FDEFDE" alt=""></a>
  38.           <a class="col-1"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb4cbd9dabf2c2aef15e43f5bcab5cb9.jpg?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a>
  39.           <a class="col-1"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb4cbd9dabf2c2aef15e43f5bcab5cb9.jpg?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a>
  40.           <a class="col-1"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb4cbd9dabf2c2aef15e43f5bcab5cb9.jpg?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a>
  41.           <a class="col-1"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb4cbd9dabf2c2aef15e43f5bcab5cb9.jpg?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a>
  42.           <a class="col-1"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb4cbd9dabf2c2aef15e43f5bcab5cb9.jpg?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a>
  43.           <a class="col-1"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb4cbd9dabf2c2aef15e43f5bcab5cb9.jpg?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a>
  44.         </div>
  45.       </div>
  46.       <div class="row">
  47.         <div class="redmi item col-12">
  48.           <span>
  49.             <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d692a30ee3d586c4274575eec255d3c5.jpg?f=webp&w=537&h=762&bg=C1DDE9" alt="">
  50.           </span>
  51.           <span>
  52.             <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e32e68b1a554cd84af032d8ee03bf6d.jpeg?f=webp&w=537&h=378&bg=C1DDE9" alt="">
  53.           </span>
  54.           <span>
  55.             <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e2dd638ceb36697af693973ff85a7a9b.jpg?f=webp&w=537&h=378&bg=E0FCFF" alt="">
  56.           </span>
  57.         </div>
  58.       </div>
  59.       <div class="row-bannner">
  60.         <div class="banner">
  61.           <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/189acdf7e9b807cfc22d394df87c1958.jpg?f=webp&w=1080&h=420&bg=FEFEFE" alt="">
  62.         </div>
  63.       </div>
  64.       <div class="row">
  65.         <span class="item col-3">12</span>
  66.         <span class="item col-6">12</span>
  67.         <span class="item col-3">12</span>
  68.       </div>
  69.       <div class="row footer">
  70.         <span class="row col-12">
  71.           <div class="tarbar">
  72.             <span class="item col-1"
  73.               ><div class="fa fa-address-card" aria-hidden="true"></div>
  74.               首页</span
  75.             ><span class="item col-1"
  76.               ><div class="fa fa-address-card" aria-hidden="true"></div>
  77.               分类</span
  78.             ><span class="item col-1"
  79.               ><div class="fa fa-address-card" aria-hidden="true"></div>
  80.               星球</span
  81.             ><span class="item col-1"
  82.               ><div class="fa fa-address-card" aria-hidden="true"></div>
  83.               购物车</span
  84.             ><span class="item col-1"
  85.               ><div class="fa fa-address-card" aria-hidden="true"></div>
  86.               我的</span
  87.             >
  88.           </div>
  89.         </span>
  90.       </div>
  91.     </div>
  1. .container {
  2.   .row:nth-child(6) {
  3.     min-height: 85vh;
  4.   }
  5. }
  7. .container .row .header input {
  8.   min-width: 80%;
  9.   min-height: 3em;
  10.   text-indent: 2em;
  11.   border: none;
  12. }
  13. .container .row .header {
  14.   background-color: #f2f2f2;
  15.   place-content: center;
  16.   align-items: center;
  17. }
  19. // nav
  20. .container .row .nav {
  21.   display: grid;
  22.   grid-template-columns: repeat(7, 1fr);
  23.   gap: 0.5em;
  24.   background-color: #f2f2f2;
  25.   span {
  26.     display: flex;
  27.     justify-content: center;
  28.     align-items: center;
  29.   }
  30. }
  31. .container .row-bannner .banner img {
  32.   max-width: 100vw;
  33. }
  34. // tab选项卡
  35. .container .row .tab {
  36.   display: grid;
  37.   grid-template-columns: repeat(5, 1fr);
  38.   grid-template-rows: repeat(2, 1fr);
  39.   img {
  40.     width: 100%;
  41.     height: 100%;
  42.   }
  43. }
  44. // redmi展示栏
  45. .container .row .redmi {
  46.   display: grid;
  47.   grid-template-columns: repeat(2, 1fr);
  48.   grid-template-rows: repeat(2, 1fr);
  49.   //   background-color: #fff; //有了grid空白间隙也不用操心了哪里要加， 哪里不要加
  50.   gap: 0.2em;
  51.   span img {
  52.     width: 100%;
  53.     height: 100%;
  54.   }
  55.   span:first-child {
  56.     grid-row: span 2;
  57.   }
  58. }
  60. // footer
  62. .footer {
  63.   position: fixed;
  64.   bottom: 0;
  65.   left: 0;
  66.   right: 0;
  67.   background-color: #fff;
  68.   padding: 0.5em 0;
  69. }
  70. .container .row .row .tarbar {
  71.   display: grid;
  72.   grid-template-columns: repeat(5, 1fr);
  73.   gap: 0.5em;
  74.   place-items: center center;
  75.   .item {
  76.     div {
  77.       display: block;
  78.       text-align: center;
  79.       margin-bottom: 0.5em;
  80.     }
  81.     &:nth-child(1) {
  82.       color: chocolate;
  83.     }
  84.   }
  85. }

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：太谦虚了, 挺不错的
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post