Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid对齐方式以及简单实战
Blogger Information
Blog 45
fans 0
comment 0
visits 34512
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对齐方式以及简单实战
咸鱼老爷
Original
1713 people have browsed it

网格单元的对齐方式

只有项目在网格单元中存在剩余空间时，对齐才有意义；
1、设置所有项目的对齐方式
书写在容器中:place-items: 垂直方向 水平方向；
方位词start end center
垂直居上，水平居中：place-items: start center;
水平垂直居中：place-items: center;
normal->auto同义词
inherit:继承默认值
initial:初始化
unset:在继承和初始化之间切换
默认是拉伸：stretch 没有固定尺寸才有效果
2、设置容器中某一个项目在网格单元中的对齐方式
书写在项目中：place-self：垂直方向 水平方向；
同1中的用法一样

网格容器的对齐方式

书写在容器中place-content:垂直方向 水平方向；
1、将所有项目作为一个整体在容器中对齐
place-content：start start；默认
place-content: center；
2、将所有项目打散成独立个体在容器中设置对齐方式
place-content: space-between;俩端对齐
place-content: space-around ；分散对齐
place-content: space-evenly;平均对齐

使用命名网格区域实现圣杯布局

grid-area可以命名网格区域
效果图

  1. <style>
  2.       body {
  3.             display: grid;
  4.             grid-template-columns: 15em minmax(50vh, auto) 15em;
  5.             grid-template-rows: 3em minmax(80vh, auto) 3em;
  6.             gap: .5em;
  7.             grid-template-areas: 'header header header' 'left main right' 'footer footer foot';
  8.             grid-template-areas: 'header header header' '. main .' 'footer footer foot';
  9.         }
  10.         body * {
  11.             border: 1px solid #ccc;
  12.         }
  13.         header {
  14.             grid-area: header;
  15.         }
  16.         footer {
  17.             grid-area: footer;
  18.         }
  19.         /* aside.left {
  20.             grid-area: left;
  21.         }
  22.         aside.right {
  23.             grid-area: right;
  24.         } */
  25.         main {
  26.             grid-area: main;
  27.         }
  28.     </style>
  29.     <body>
  30.     <header>header</header>
  31.     <main>main</main>
  32.     <aside class="left">left</aside>
  33.     <aside class="right">right</aside>
  34.     <footer>footer</footer>
  35. </body>

使用grid模拟栅格

效果图

  1.  <style>
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  5.             box-sizing: border-box;
  6.         }
  8.         body {
  9.             width: 100vw;
  10.             height: 100vh;
  11.             display: grid;
  12.         }
  14.         .row {
  15.             display: grid;
  16.             grid-template-columns: repeat(12, 1fr);
  17.             gap: .2em;
  18.         }
  20.         .item {
  21.             border: 1px solid #ccc;
  22.             background-color: chocolate;
  23.         }
  25.         .col-12 {
  26.             grid-area: auto / span 12;
  27.         }
  29.         .col-11 {
  30.             grid-area: auto / span 11;
  31.         }
  33.         .col-10 {
  34.             grid-area: auto / span 10;
  35.         }
  37.         .col-9 {
  38.             grid-area: auto / span 9;
  39.         }
  41.         .col-8 {
  42.             grid-area: auto / span 8;
  43.         }
  45.         .col-7 {
  46.             grid-area: auto / span 7;
  47.         }
  49.         .col-6 {
  50.             grid-area: auto / span 6;
  51.         }
  53.         .col-5 {
  54.             grid-area: auto / span 5;
  55.         }
  57.         .col-4 {
  58.             grid-area: auto / span 4;
  59.         }
  61.         .col-3 {
  62.             grid-area: auto / span 3;
  63.         }
  64.         .col-2 {
  65.             grid-area: auto / span 2;
  66.         }
  67.         .col-1 {
  68.             grid-area: auto / span 1;
  69.         }
  70.     </style>
  72. <body>
  73.     <div class="container">
  74.         <div class="row">
  75.             <div class=" item col-12">12列</div>
  76.             <div class=" item col-6">6列</div>
  77.             <div class=" item col-6">6列</div>
  78.             <div class=" item col-5">5列</div>
  79.             <div class=" item col-5">5列</div>
  80.             <div class=" item col-4">4列</div>
  81.             <div class=" item col-4">4列</div>
  82.             <div class=" item col-4">4列</div>
  83.             <div class=" item col-3">3列</div>
  84.             <div class=" item col-3">3列</div>
  85.             <div class=" item col-3">3列</div>
  86.             <div class=" item col-3">3列</div>
  87.             <div class=" item col-1">1列</div>
  88.             <div class=" item col-1">1列</div>
  89.             <div class=" item col-1">1列</div>
  90.             <div class=" item col-1">1列</div>
  91.             <div class=" item col-1">1列</div>
  92.             <div class=" item col-1">1列</div>
  93.             <div class=" item col-1">1列</div>
  94.             <div class=" item col-1">1列</div>
  95.             <div class=" item col-1">1列</div>
  96.             <div class=" item col-1">1列</div>
  97.             <div class=" item col-1">1列</div>
  98.             <div class=" item col-1">1列</div>
  99.         </div>
  100.     </div>
  101. </body>

使用给grid布局实现php中文网首页简单案例

效果图

html代码

  1. <body>
  2.     <header>
  3.         <div class="logo">
  4.             <a href=""><img src="https://www.php.cn/static/images/logo.png" alt=""></a>
  5.         </div>
  6.         <ul class="navs">
  7.             <li><a href="">首页</a></li>
  8.             <li><a href="">视频教程</a></li>
  9.             <li><a href="">入门教程</a></li>
  10.             <li><a href="">社区问答</a></li>
  11.             <li><a href="">技术文章</a></li>
  12.             <li><a href="">资源下载</a></li>
  13.             <li><a href="">编程词典</a></li>
  14.             <li><a href="">工具下载</a></li>
  15.         </ul>
  16.         <div class="reg">
  17.             <a href="">注册</a>
  18.             <a href="">登录</a>
  19.         </div>
  20.     </header>
  21.     <div class="main-top">
  22.         <ul class="menus">
  23.             <li>
  24.                 <a href="">php开发</a>
  25.             </li>
  26.             <li>
  27.                 <a href="">前端开发</a>
  28.             </li>
  29.             <li>
  30.                 <a href="">服务端开发</a>
  31.             </li>
  32.             <li>
  33.                 <a href="">移动开发</a>
  34.             </li>
  35.             <li>
  36.                 <a href="">数据库</a>
  37.             </li>
  38.             <li>
  39.                 <a href="">服务器运维&下载</a>
  40.             </li>
  41.             <li>
  42.                 <a href="">在线工具箱</a>
  43.             </li>
  44.             <li>
  45.                 <a href="">常用类库</a>
  46.             </li>
  47.         </ul>
  48.         <ul class="tuijian">
  49.             <li>
  50.                 <a href="">php头条</a>
  51.             </li>
  52.             <li>
  53.                 <a href="">独孤九剑</a>
  54.             </li>
  55.             <li>
  56.                 <a href="">学习路线</a>
  57.             </li>
  58.             <li>
  59.                 <a href="">在线工具</a>
  60.             </li>
  61.             <li>
  62.                 <a href="">趣味课堂</a>
  63.             </li>
  64.             <li>
  65.                 <a href="">社区问答</a>
  66.             </li>
  67.             <li>
  68.                 <a href="">课程直播</a>
  69.             </li>
  70.             <li>
  71.                 <input type="text" placeholder="输入关键词搜索">
  72.             </li>
  73.         </ul>
  74.         <div class="slider"><img src="https://img.php.cn/upload/article/000/000/001/5fabba9a8557c153.jpg" alt=""></div>
  75.         <ul class="course">
  76.             <li>
  77.                 <a href=""><img src="https://www.php.cn/static/images/index_yunv.jpg" alt=""></a>
  78.             </li>
  79.             <li>
  80.                 <a href=""><img src="https://www.php.cn/static/images/index_php_item2_.png?1" alt=""></a>
  81.             </li>
  82.             <li>
  83.                 <a href=""><img src="https://www.php.cn/static/images/index_php_item3.jpg?1" alt=""></a>
  84.             </li>
  85.             <li>
  86.                 <a href=""><img src="https://www.php.cn/static/images/index_php_new4.jpg?1" alt=""></a>
  87.             </li>
  88.         </ul>
  89.     </div>
  90.     <!-- 课程列表 -->
  91.     <div class="main-coures">
  92.         <h3>&lt;\&gt;PHP入门精品课程&lt;\&gt;</h3>
  93.         <ul class="course-list">
  94.             <li>
  95.                 <a href=""><img src="https://www.php.cn/static/images/index_learn_first.jpg" alt=""></a>
  96.             </li>
  97.             <li>
  98.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
  99.                     <div class="desc">
  100.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  101.                     </div>
  102.                     <div class="desc-bottom">
  103.                         <span>1w次播放</span>
  104.                     </div>
  105.                 </a>
  106.             </li>
  107.             <li>
  108.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
  109.                     <div class="desc">
  110.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  111.                     </div>
  112.                     <div class="desc-bottom">
  113.                         <span>1w次播放</span>
  114.                     </div>
  115.                 </a>
  116.             </li>
  117.             <li>
  118.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
  119.                     <div class="desc">
  120.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  121.                     </div>
  122.                     <div class="desc-bottom">
  123.                         <span>1w次播放</span>
  124.                     </div>
  125.                 </a>
  126.             </li>
  127.             <li>
  128.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
  129.                     <div class="desc">
  130.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  131.                     </div>
  132.                     <div class="desc-bottom">
  133.                         <span>1w次播放</span>
  134.                     </div>
  135.                 </a>
  136.             </li>
  137.             <li>
  138.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
  139.                     <div class="desc">
  140.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  141.                     </div>
  142.                     <div class="desc-bottom">
  143.                         <span>1w次播放</span>
  144.                     </div>
  145.                 </a>
  146.             </li>
  147.             <li>
  148.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
  149.                     <div class="desc">
  150.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  151.                     </div>
  152.                     <div class="desc-bottom">
  153.                         <span>1w次播放</span>
  154.                     </div>
  155.                 </a>
  156.             </li>
  157.             <li>
  158.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
  159.                     <div class="desc">
  160.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  161.                     </div>
  162.                     <div class="desc-bottom">
  163.                         <span>1w次播放</span>
  164.                     </div>
  165.                 </a>
  166.             </li>
  167.             <li>
  168.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
  169.                     <div class="desc">
  170.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  171.                     </div>
  172.                     <div class="desc-bottom">
  173.                         <span>1w次播放</span>
  174.                     </div>
  175.                 </a>
  176.             </li>
  177.             <li>
  178.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
  179.                     <div class="desc">
  180.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  181.                     </div>
  182.                     <div class="desc-bottom">
  183.                         <span>1w次播放</span>
  184.                     </div>
  185.                 </a>
  186.             </li>
  187.             <li>
  188.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
  189.                     <div class="desc">
  190.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  191.                     </div>
  192.                     <div class="desc-bottom">
  193.                         <span>1w次播放</span>
  194.                     </div>
  195.                 </a>
  196.             </li>
  197.             <li>
  198.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
  199.                     <div class="desc">
  200.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  201.                     </div>
  202.                     <div class="desc-bottom">
  203.                         <span>1w次播放</span>
  204.                     </div>
  205.                 </a>
  206.             </li>
  207.             <li>
  208.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
  209.                     <div class="desc">
  210.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  211.                     </div>
  212.                     <div class="desc-bottom">
  213.                         <span>1w次播放</span>
  214.                     </div>
  215.                 </a>
  216.             </li>
  217.             <li>
  218.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
  219.                     <div class="desc">
  220.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  221.                     </div>
  222.                     <div class="desc-bottom">
  223.                         <span>1w次播放</span>
  224.                     </div>
  225.                 </a>
  226.             </li>
  227.         </ul>
  228.     </div>
  230.     <div class="main-coures">
  231.         <h3>&lt;\&gt;PHP进阶课程&lt;\&gt;</h3>
  232.         <ul class="course-list">
  233.             <li>
  234.                 <a href=""><img src="https://www.php.cn/static/images/index_learn_middel.jpg" alt=""></a>
  235.             </li>
  236.             <li>
  237.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg" alt="">
  238.                     <div class="desc">
  239.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  240.                     </div>
  241.                     <div class="desc-bottom">
  242.                         <span>1w次播放</span>
  243.                     </div>
  244.                 </a>
  245.             </li>
  246.             <li>
  247.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg" alt="">
  248.                     <div class="desc">
  249.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  250.                     </div>
  251.                     <div class="desc-bottom">
  252.                         <span>1w次播放</span>
  253.                     </div>
  254.                 </a>
  255.             </li>
  256.             <li>
  257.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg" alt="">
  258.                     <div class="desc">
  259.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  260.                     </div>
  261.                     <div class="desc-bottom">
  262.                         <span>1w次播放</span>
  263.                     </div>
  264.                 </a>
  265.             </li>
  266.             <li>
  267.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg" alt="">
  268.                     <div class="desc">
  269.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  270.                     </div>
  271.                     <div class="desc-bottom">
  272.                         <span>1w次播放</span>
  273.                     </div>
  274.                 </a>
  275.             </li>
  276.             <li>
  277.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
  278.                     <div class="desc">
  279.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  280.                     </div>
  281.                     <div class="desc-bottom">
  282.                         <span>1w次播放</span>
  283.                     </div>
  284.                 </a>
  285.             </li>
  286.             <li>
  287.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
  288.                     <div class="desc">
  289.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  290.                     </div>
  291.                     <div class="desc-bottom">
  292.                         <span>1w次播放</span>
  293.                     </div>
  294.                 </a>
  295.             </li>
  296.             <li>
  297.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
  298.                     <div class="desc">
  299.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  300.                     </div>
  301.                     <div class="desc-bottom">
  302.                         <span>1w次播放</span>
  303.                     </div>
  304.                 </a>
  305.             </li>
  306.             <li>
  307.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg" alt="">
  308.                     <div class="desc">
  309.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  310.                     </div>
  311.                     <div class="desc-bottom">
  312.                         <span>1w次播放</span>
  313.                     </div>
  314.                 </a>
  315.             </li>
  316.             <li>
  317.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
  318.                     <div class="desc">
  319.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  320.                     </div>
  321.                     <div class="desc-bottom">
  322.                         <span>1w次播放</span>
  323.                     </div>
  324.                 </a>
  325.             </li>
  326.             <li>
  327.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg" alt="">
  328.                     <div class="desc">
  329.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  330.                     </div>
  331.                     <div class="desc-bottom">
  332.                         <span>1w次播放</span>
  333.                     </div>
  334.                 </a>
  335.             </li>
  336.             <li>
  337.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg" alt="">
  338.                     <div class="desc">
  339.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  340.                     </div>
  341.                     <div class="desc-bottom">
  342.                         <span>1w次播放</span>
  343.                     </div>
  344.                 </a>
  345.             </li>
  346.             <li>
  347.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
  348.                     <div class="desc">
  349.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  350.                     </div>
  351.                     <div class="desc-bottom">
  352.                         <span>1w次播放</span>
  353.                     </div>
  354.                 </a>
  355.             </li>
  356.             <li>
  357.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
  358.                     <div class="desc">
  359.                         <h4><i>初级</i>编程学习方法分享直播公益课</h4>
  360.                     </div>
  361.                     <div class="desc-bottom">
  362.                         <span>1w次播放</span>
  363.                     </div>
  364.                 </a>
  365.             </li>
  366.         </ul>
  367.     </div>
  368.     <footer></footer>
  369. </body>

CSS代码

  1. <style>
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  5.             box-sizing: border-box;
  6.         }
  8.         body {
  9.             background-color: #f3f5f7;
  10.         }
  12.         li {
  13.             list-style: none;
  14.         }
  16.         a {
  17.             color: #444;
  18.             text-decoration: none;
  19.         }
  21.         header {
  22.             height: 60px;
  23.             background-color: #000;
  24.             margin-bottom: 30px;
  25.         }
  27.         footer {
  28.             height: 8em;
  29.             background-color: darkgray;
  30.         }
  32.         .main-top {
  33.             height: 510px;
  34.             width: 1200px;
  35.             background-color: #fff;
  36.             display: grid;
  37.             grid-template-columns: 200px 1fr;
  38.             grid-template-rows: 60px 1fr 120px;
  39.             margin: auto;
  40.             border-radius: .5em;
  41.         }
  43.         .main-top ul.menus {
  44.             grid-area: span 3;
  45.             display: grid;
  46.             grid-template-rows: repeat(8, 1fr);
  47.             background-color: #2b333b;
  48.             border-top-left-radius: .5em;
  49.             border-bottom-left-radius: .5em;
  50.             place-content: center;
  51.             padding: 2em;
  52.         }
  54.         .main-top ul.menus li a {
  55.             color: rgba(255, 255, 255, .6);
  56.         }
  58.         .main-top .tuijian {
  59.             display: grid;
  60.             grid-template-columns: repeat(7, 100px) 1fr;
  61.             place-items: center;
  62.         }
  64.         .main-top .tuijian li:last-of-type {
  65.             place-self: center start;
  66.             margin-left: 30px;
  67.         }
  69.         .main-top .tuijian li:last-of-type input {
  70.             outline: none;
  71.             background-color: #f1f0f0;
  72.             height: 2.5em;
  73.             border-radius: .3em;
  74.             border: none;
  75.             padding: 1em;
  76.         }
  78.         .main-top .slider {
  79.             height: 330px;
  80.         }
  82.         .main-top .slider img {
  83.             width: 100%;
  84.         }
  86.         .course li img {
  87.             width: 100%;
  88.             border-radius: .5em;
  89.         }
  91.         .course {
  92.             display: grid;
  93.             padding: 10px;
  94.             grid-template-columns: repeat(4, 1fr);
  95.             gap: 10px;
  96.             place-content: center;
  97.             margin-top: 10px;
  98.         }
  100.         header {
  101.             overflow: hidden;
  102.         }
  104.         header .logo {
  105.             height: 60px;
  106.             float: left;
  107.         }
  109.         header .navs {
  110.             float: left;
  111.         }
  113.         header .navs li {
  114.             float: left;
  115.             height: 60px;
  116.             line-height: 60px;
  117.             padding: 0 20px;
  118.             margin: 0 10px;
  119.         }
  121.         header a {
  122.             color: rgba(255, 255, 255, .7)
  123.         }
  125.         header .reg {
  126.             float: right;
  127.             height: 60px;
  128.             line-height: 60px;
  129.         }
  130.         /* 课程列表 */
  132.         .main-coures {
  133.             width: 1200px;
  134.             height: 646px;
  135.             padding: 15px;
  136.             background-color: #FFF;
  137.             border-radius: 10px;
  138.             margin: 30px auto;
  139.             display: grid;
  140.             grid-template-rows: 50px 1fr;
  141.         }
  143.         .main-coures h3 {
  144.             text-align: center;
  145.             color: #444;
  146.         }
  148.         .main-coures .course-list {
  149.             display: grid;
  150.             grid-template-columns: repeat(5, 1fr);
  151.             grid-template-rows: repeat(3, 1fr);
  152.             gap: 10px;
  153.         }
  155.         .main-coures .course-list img {
  156.             width: 100%;
  157.         }
  158.         .main-coures .course-list li:first-of-type {
  159.             grid-area: span 2;
  160.         }
  162.         .main-coures .course-list li {
  163.             position: relative;
  164.             border-radius: 10px;
  165.         }
  166.         .main-coures .course-list li img {
  167.             border-radius: 10px;
  168.         }
  169.         .desc {
  170.             background-color: #fff;
  171.             height: 38px;
  172.             width: 100%;
  173.             position: absolute;
  174.             bottom: 45px;
  175.             left: 0;
  176.             right: 0;
  177.             border-top-right-radius: 10px;
  178.             border-top-left-radius: 10px;
  179.             transition: .5s;
  180.         }
  181.         .main-coures .course-list a:hover .desc {
  182.             height: 100px;
  183.             right: 0;
  184.             left: 0;
  185.         }
  186.         .desc-bottom {
  187.             position: absolute;
  188.             left: 0;
  189.             right: 0;
  190.             background-color: #fff;
  191.             padding: 10px 0;
  192.             width: 100%;
  193.             height: 42px;
  194.             background-color: #fff;
  195.             color: #93999f;
  196.             font-size: 12px;
  197.             line-height: 36px;
  198.             border-bottom-left-radius: 10px;
  199.             border-bottom-right-radius: 10px;
  200.         }
  201.         .desc i {
  202.             padding: 2px;
  203.             font-style: normal;
  204.             font-size: 12px;
  205.             color: #fff;
  206.             line-height: 12px;
  207.             border-radius: 5px;
  208.             background-color: #93999f;
  209.             margin-left: 5px;
  210.         }
  211.     </style>

grid实现媒体查询

根据自动填充,根据当前宽度自动决定放几行几列；
auto-fit auto-fill

  1. grid-template-columns: repeat(auto-fit,minmax(15em,1fr));
  2. grid-template-rows: repeat(auto-fit,minmax(13em,70%));
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