search

博客列表 >grid对齐方式以及简单实战

grid对齐方式以及简单实战

咸鱼老爷
咸鱼老爷原创
2021年02月27日 17:15:411712浏览

网格单元的对齐方式

只有项目在网格单元中存在剩余空间时，对齐才有意义；
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%));
上一条：常用数据库操作指令下一条：数据库操作：增删改查-CURD
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多