比定位更方便的叠加布局

image.png
通过设置grid-area，使各子项在同一个网格，以达到叠加效果

  1. .box {
  2.   display: grid;
  3.   width: 500px;
  4.   height: 300px;
  5. }
  6. img {
  7.   grid-area: 1/1/1/1;
  8. }
  9. span {
  10.   grid-area: 1/1/1/1;
  11.   justify-self: end;
  12.   align-self: start;
  13.   background: greenyellow;
  14.   margin-top: 20px;
  15. }
  16. p { 
  17.   margin: 0;
  18.   padding: 0 20px 0 0;
  19.   align-self: end;
  20.   grid-area: 1/1/1/1;
  21.   background: rgba(0,0,0,.5);
  22.   color: white;
  23. }

多重组合布局

image.png
设置最大子项的grid-area， 其他子项自动重排

  1. .box {
  2.   background: skyblue;
  3.   width: 300px;
  4.   height: 300px;
  5.   display: grid;
  6.   grid-template-columns: repeat(auto-fill, 100px);
  7.     grid-template-rows: repeat(auto-fill, 100px);
  8. }
  10. div:nth-of-type(1) {
  11.   grid-area: 2/1/span 2/span 2;
  12. }
  14. .box > div {
  15.   background: pink;
  16.   border: 1px solid;
  17. }

栅格布局

将一行平均分成12份
grid-area设置auto使子项自适应排列
image.png

容器自适应行列布局

image.png

百度热词风云榜

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>百度热榜</title>
  8.     <link rel="stylesheet" href="../reset.css">
  9.     <style>
  10.         * {
  11.             margin:0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.         }
  15.         .top {
  16.             width: 310px;
  17.             border: 1px #dadadc solid;
  18.             margin: 0 auto;
  19.             font-size: 14px;
  20.         }
  22.         .title {
  23.             height: 30px;
  24.             line-height: 30px;
  25.             font-weight: bold;
  26.             margin-left: 16px;
  27.         }
  28.         .list {
  29.             height: 350px;
  30.             margin: 0 14px;
  31.             display: grid;
  32.             grid-template-columns: repeat(3, 1fr);
  33.             grid-template-rows: repeat(4, 1fr);
  34.             grid-template-areas: 
  35.               "a1 a2 a2"
  36.               "a3 a2 a2"
  37.               "a4 a4 a5"
  38.               "a6 a7 a7";
  39.             gap: 8px 8px;
  40.         }
  41.         .list div:nth-of-type(1) {
  42.             grid-area: a1;
  43.         }
  44.         .list div:nth-of-type(2) {
  45.             grid-area: a2;
  46.         }
  47.         .list div:nth-of-type(3) {
  48.             grid-area: a3;
  49.         }
  50.         .list div:nth-of-type(4) {
  51.             grid-area: a4;
  52.         }
  53.         .list div:nth-of-type(5) {
  54.             grid-area: a5;
  55.         }
  56.         .list div:nth-of-type(6) {
  57.             grid-area: a6;
  58.         }
  59.         .list div:nth-of-type(7) {
  60.             grid-area: a7;
  61.         }
  62.         .theme1 {
  63.             background-image: linear-gradient(#187fe6, #32aff2);
  64.             border: 2px solid #299bda;
  65.         }
  66.         .theme2 {
  67.             background-image: linear-gradient(#f2246c, #fe5bac);
  68.             border: 2px solid #dc1f61;
  69.         }
  70.         .theme3 {
  71.             background-image: linear-gradient(#d46300, #e5ad1c);
  72.             border: 2px solid #d39818;
  73.         }
  75.         .page {
  76.             height: 40px;
  77.             padding-right: 10px;
  78.             display: flex;
  79.             justify-content: flex-end;
  80.             align-items: center;
  81.         }
  82.         .page span {
  83.             padding: 4px;
  84.         }
  85.         .page a {
  86.             text-decoration: none;
  87.             display: block;
  88.             border: 1px solid #cccccc;
  89.             padding: 5px 4px;
  90.             margin-left: 2px;
  91.         }
  92.         .list a {
  93.             text-decoration: none;
  94.             display: block;
  95.             color: white;
  96.             width: 100%;
  97.             height: 100%;
  98.             line-height: 30px;
  99.         }
  101.         .list a > h3 {
  102.             margin-right: 4px;
  103.             text-align: right;
  104.         }
  106.         .list a > p {
  107.             text-align: center;
  108.         }
  109.     </style>
  110. </head>
  111. <body>
  112.      <div class="top">
  113.          <div class="title">
  114.              今日热榜
  115.          </div>
  116.          <div class="list">
  117.              <div class="theme1">
  118.                 <a href="#">
  119.                     <h3>实时热点</h3>
  120.                     <p>阿里第一颗芯</p>
  121.                 </a>
  122.              </div>
  123.              <div class="theme1">                 
  124.                 <a href="#">
  125.                     <h3>实时热点</h3>
  126.                     <p>阿里第一颗芯</p>
  127.                 </a>
  128.                 </div>
  129.              <div class="theme2">                 
  130.                 <a href="#">
  131.                     <h3>实时热点</h3>
  132.                     <p>阿里第一颗芯</p>
  133.                 </a>
  134.                 </div>
  135.              <div class="theme1">                 
  136.                 <a href="#">
  137.                     <h3>实时热点</h3>
  138.                     <p>阿里第一颗芯</p>
  139.                 </a>
  140.                 </div>
  141.              <div class="theme1">                 
  142.                 <a href="#">
  143.                     <h3>实时热点</h3>
  144.                     <p>阿里第一颗芯</p>
  145.                 </a>
  146.                 </div>
  147.              <div class="theme3">                 
  148.                 <a href="#">
  149.                     <h3>实时热点</h3>
  150.                     <p>阿里第一颗芯</p>
  151.                 </a>
  152.                 </div>
  153.              <div class="theme3">                 
  154.                 <a href="#">
  155.                     <h3>实时热点</h3>
  156.                     <p>阿里第一颗芯</p>
  157.                 </a>
  158.                 </div>
  159.          </div>
  160.          <div class="page">
  161.              <span>1</span>
  162.              <a href="#">2</a>
  163.              <a href="#">3</a>
  164.          </div>
  165.      </div> 
  166. </body>
  167. </html>

小米商品导航菜单

右边的弹出面板使用绝对定位

  1. .panel {
  2.   display: none;
  3.   position: absolute;
  4.   height: 460px;
  5.   background: white;
  6.   left: 100%;
  7.   top: 0;
  8.   border: 1px solid #e0e0e0;
  9.   padding: 0 26px;
  10.   color: black;
  11.   grid-template-columns: 305px;
  12.   grid-template-rows: repeat(6, 1fr);
  13.   grid-auto-flow: column;
  14.   grid-auto-columns: 305px;
  15.   justify-items: start;
  16. }

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>小米导航</title>
  8.     <link
  9.       rel="stylesheet"
  10.       href="//at.alicdn.com/t/font_2941503_ny0b8aku22.css"
  11.     />
  12.     <style>
  13.       * {
  14.         margin: 0;
  15.         padding: 0;
  16.         box-sizing: border-box;
  17.       }
  18.       a {
  19.         text-decoration: none;
  20.         color: inherit;
  21.       }
  23.       ul {
  24.         list-style: none;
  25.       }
  27.       .mall {
  28.         height: 100vh;
  29.         background: #f5f5f5;
  30.       }
  31.       .sidebar {
  32.         width: 233px;
  33.         background: #7b7b7b;
  34.         height: 100%;
  35.         color: white;
  36.         padding-top: 20px;
  37.       }
  39.       .sidebar > li {
  40.         display: flex;
  41.         justify-content: space-between;
  42.         align-items: center;
  43.         padding: 16px 28px;
  44.         position: relative;
  45.         font-size: 14px;
  46.       }
  48.       .panel {
  49.         display: none;
  50.         position: absolute;
  51.         height: 460px;
  52.         background: white;
  53.         left: 100%;
  54.         top: 0;
  55.         border: 1px solid #e0e0e0;
  56.         padding: 0 26px;
  57.         color: black;
  58.         grid-template-columns: 305px;
  59.         grid-template-rows: repeat(6, 1fr);
  60.         grid-auto-flow: column;
  61.         grid-auto-columns: 305px;
  62.         justify-items: start;
  63.       }
  65.       .panel > li {
  66.         display: flex;
  67.         justify-content: center;
  68.         align-items: center;
  69.         cursor: auto;
  70.       }
  72.       .panel span {
  73.         margin-left: 20px;
  74.       }
  76.       .sidebar > li:hover .panel {
  77.         display: grid;
  78.       }
  80.       .sidebar > li:hover {
  81.         background: #ff6801;
  82.         cursor: pointer;
  83.       }
  84.     </style>
  85.   </head>
  86.   <body>
  87.     <div class="mall">
  88.       <ul class="sidebar">
  89.         <li>
  90.           <div class="items">
  91.             <a href="#">手机</a>
  92.             <a href="#">电话卡</a>
  93.           </div>
  94.           <i class="iconfont icon-youjiantou1"></i>
  95.           <ul class="panel">
  96.             <li>
  97.               <img src="./phone.png" alt="" />
  98.               <span>小米MIX FOLD</span>
  99.             </li>
  100.             <li>
  101.                 <img src="./phone.png" alt="" />
  102.                 <span>小米MIX FOLD</span>
  103.               </li>
  104.               <li>
  105.                 <img src="./phone.png" alt="" />
  106.                 <span>小米MIX FOLD</span>
  107.               </li>
  108.               <li>
  109.                 <img src="./phone.png" alt="" />
  110.                 <span>小米MIX FOLD</span>
  111.               </li>
  112.               <li>
  113.                 <img src="./phone.png" alt="" />
  114.                 <span>小米MIX FOLD</span>
  115.               </li>
  116.               <li>
  117.                 <img src="./phone.png" alt="" />
  118.                 <span>小米MIX FOLD</span>
  119.               </li>
  120.               <li>
  121.                 <img src="./phone.png" alt="" />
  122.                 <span>小米MIX FOLD</span>
  123.               </li>
  124.               <li>
  125.                 <img src="./phone.png" alt="" />
  126.                 <span>小米MIX FOLD</span>
  127.               </li>
  128.             </ul>
  129.         </li>
  130.         <li>
  131.           <div class="items">
  132.             <a href="#">手机</a>
  133.             <a href="#">电话卡</a>
  134.           </div>
  135.           <i class="iconfont icon-youjiantou1"></i>
  136.           <ul class="panel">
  137.             <li>
  138.               <img src="./phone.png" alt="" />
  139.               <span>小米MIX FOLD</span>
  140.             </li>
  141.             <li>
  142.                 <img src="./phone.png" alt="" />
  143.                 <span>小米MIX FOLD</span>
  144.               </li>
  145.               <li>
  146.                 <img src="./phone.png" alt="" />
  147.                 <span>小米MIX FOLD</span>
  148.               </li>
  149.               <li>
  150.                 <img src="./phone.png" alt="" />
  151.                 <span>小米MIX FOLD</span>
  152.               </li>
  153.               <li>
  154.                 <img src="./phone.png" alt="" />
  155.                 <span>小米MIX FOLD</span>
  156.               </li>
  157.               <li>
  158.                 <img src="./phone.png" alt="" />
  159.                 <span>小米MIX FOLD</span>
  160.               </li>
  161.               <li>
  162.                 <img src="./phone.png" alt="" />
  163.                 <span>小米MIX FOLD</span>
  164.               </li>
  165.               <li>
  166.                 <img src="./phone.png" alt="" />
  167.                 <span>小米MIX FOLD</span>
  168.               </li>
  169.               <li>
  170.                 <img src="./phone.png" alt="" />
  171.                 <span>小米MIX FOLD</span>
  172.               </li>
  173.               <li>
  174.                 <img src="./phone.png" alt="" />
  175.                 <span>小米MIX FOLD</span>
  176.               </li>
  177.               <li>
  178.                 <img src="./phone.png" alt="" />
  179.                 <span>小米MIX FOLD</span>
  180.               </li>
  181.               <li>
  182.                 <img src="./phone.png" alt="" />
  183.                 <span>小米MIX FOLD</span>
  184.               </li>
  185.               <li>
  186.                 <img src="./phone.png" alt="" />
  187.                 <span>小米MIX FOLD</span>
  188.               </li>
  189.             </ul>
  190.         </li>
  191.         <li>
  192.           <div class="items">
  193.             <a href="#">手机</a>
  194.             <a href="#">电话卡</a>
  195.           </div>
  196.           <i class="iconfont icon-youjiantou1"></i>
  197.         </li>
  198.         <li>
  199.           <div class="items">
  200.             <a href="#">手机</a>
  201.             <a href="#">电话卡</a>
  202.           </div>
  203.           <i class="iconfont icon-youjiantou1"></i>
  204.         </li>
  205.         <li>
  206.           <div class="items">
  207.             <a href="#">手机</a>
  208.             <a href="#">电话卡</a>
  209.           </div>
  210.           <i class="iconfont icon-youjiantou1"></i>
  211.         </li>
  212.         <li>
  213.           <div class="items">
  214.             <a href="#">手机</a>
  215.             <a href="#">电话卡</a>
  216.           </div>
  217.           <i class="iconfont icon-youjiantou1"></i>
  218.         </li>
  219.         <li>
  220.           <div class="items">
  221.             <a href="#">手机</a>
  222.             <a href="#">电话卡</a>
  223.           </div>
  224.           <i class="iconfont icon-youjiantou1"></i>
  225.         </li>
  226.       </ul>
  227.     </div>
  228.   </body>
  229. </html>

练习题

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>练习题</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.         }
  12.         .main {
  13.             display: grid;
  14.             grid-template-columns: 100px 1fr 100px;
  15.             grid-template-rows: 100px 300px 100px;
  16.             gap: 10px 10px;
  17.             background: skyblue;
  18.         }
  19.         .main > div {
  20.             background: pink;
  21.             display: flex;
  22.             align-items: center;
  23.             justify-content: center;
  24.         }
  26.         div:nth-of-type(1) {
  27.             grid-area: 1/1/2/4;
  28.         }
  30.         div:nth-of-type(5) {
  31.             grid-area: 3/1/4/4;
  32.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <div class="main">
  38.         <div>header</div>
  39.         <div>left</div>
  40.         <div>center</div>
  41.         <div>right</div>
  42.         <div>footer</div>
  43.     </div>
  44. </body>
  45. </html>