search

博客列表 >Grid布局的基本排列方式。

Grid布局的基本排列方式。

XFY_肆意De...
XFY_肆意De...原创
2020年07月08日 12:51:092706浏览
单元格在容器中的对齐方式；
  • 同flex 布局一样，grid布局里面一样的有justify-content , align-content,
    align-items:这些基本的对多行容器，单行容器上的排列方式！
    但是为区分这样的属性，建议使用grid专用布局关键字place-content
    place-content:垂直方向 水平方向;
    三种排列方式:start center end ;

既然有了这三种基本的排列方式,那就有关于单元格之间的排列方式,也就是说也有单元格之间的排列方式[三种方式]:

-项目在单元格中对齐方案
  1. space-between;
  2. space-around;
  3. space-evenly;

同理是和flex布局的模式一样，什么二端对齐，中间格子对齐，那些。这里就不详细描述，忘了就度娘一哈！只需要记住格式依旧是：垂直方向，水平方向

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>grid布局</title>
  7.     <style>
  8.       .container {
  9.         display: grid;
  10.         width: 300px;
  11.         height: 300px;
  12.         background: wheat;
  13.         grid-template-columns: repeat(3, 50px);
  14.         grid-template-rows: repeat(3, 50px);
  15.         /* 
  16.         剩余空间分配方案：在顶部和左侧分配，简单的理解为二边分配。
  17.         当容器存在剩余空间的时候，才有意义 
  18.         place-content: 垂直方向  水平方向;
  19.         */
  20.         /* place-content: start center ; */
  21.         /* 
  22.         空间分配方案：在每个单元格之间分配;
  23.         垂直方向二端对齐,水平方向分散对齐.
  24.         */
  25.         /* place-content: space-between space-around; space-evenly*/
  26.         /* 垂直分散对齐 ,水平平均对齐  */
  27.         place-content: space-between space-between;
  28.       }
  29.       .container > .item {
  30.         background: violet;
  31.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <div class="container">
  36.       <div class="item">1</div>
  37.       <div class="item">1</div>
  38.       <div class="item">1</div>
  39.       <div class="item">1</div>
  40.       <div class="item">1</div>
  41.       <div class="item">1</div>
  42.       <div class="item">1</div>
  43.       <div class="item">1</div>
  44.       <div class="item">1</div>
  45.     </div>
  46.   </body>
  47. </html>
项目在区域中对齐方案

引申为项目在区域中的对齐方案：
place-self: 垂直方向 水平方向
place-self: center start;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>grid布局-项目在区域中对齐方案</title>
  7.     <style>
  8.       .container {
  9.         display: grid;
  10.         width: 300px;
  11.         height: 300px;
  12.         background: wheat;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         grid-template-rows: repeat(3, 1fr);
  15.         /* 网格区域，就是由一个或多个单元格组装的 */
  16.         /* 整体对齐 */
  17.         place-items: center;
  18.         gap: 10px 5px;
  19.       }
  20.       .container > .item {
  21.         width: 50px;
  22.         height: 50px;
  23.       }
  24.       .container > .item:first-of-type {
  25.         background: violet;
  26.         grid-area: span 2 / span 2;
  27.         /* 具体覆盖全局 */
  28.         place-self: center start;
  29.       }
  30.       .container > .item:last-of-type {
  31.         background: lightblue;
  32.         grid-area: span 3;
  33.         place-self: end center;
  34.       }
  35.     </style>
  36.   </head>
  37.   <body>
  38.     <div class="container">
  39.       <div class="item">1</div>
  40.       <div class="item">1</div>
  41.     </div>
  42.   </body>
  43. </html>

作业：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>作业</title>
  7.     <style>
  8.       * {
  9.         padding: 0;
  10.         margin: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       a {
  14.         text-decoration: none;
  15.         color: #666;
  16.         font-size: 14px;
  17.       }
  18.       /* 大容器 */
  19.       .php {
  20.         width: 1200px;
  21.         min-height: 646px;
  22.         display: grid;
  23.         border-radius: 8px;
  24.         margin: auto;
  25.         border: 1px solid red;
  26.       }
  27.       /* 大标题 */
  28.       .php > .title {
  29.         text-align: center;
  30.         color: #555;
  31.       }
  32.       /* 课程列表 */
  33.       .php > .container {
  34.         display: grid;
  35.         grid-template-columns: repeat(5, 1fr);
  36.         grid-template-rows: repeat(3.1fr);
  37.       }
  38.       /* 课程单元格设置相对定位 */
  39.       .php > .container > .li-kc {
  40.         width: 217px;
  41.         height: 166px;
  42.         border-radius: 5%;
  43.         box-shadow: 0 0 10px #888;
  44.         place-self: start center;
  45.         position: relative;
  46.       }
  47.       /* 课程图片 */
  48.       .php > .container > .li-kc img {
  49.         width: 100%;
  50.         border-radius: 5%;
  51.         position: relative;
  52.       }
  53.       /* 第一个区域 */
  54.       .php > .container > .li-kc:first-of-type {
  55.         grid-row: 1 / 3;
  56.       }
  57.       /* 弹出层 */
  58.       .php > .container > .li-kc > .desc {
  59.         display: grid;
  60.         place-content: space-between;
  61.         min-height: 85px;
  62.         height: 20px;
  63.         background-color: #fff;
  64.         border-radius: 5%;
  65.         padding: 10px;
  66.         position: relative;
  67.         top: -42px;
  68.         overflow: hidden;
  69.         transition: 0.9s;
  70.       }
  71.       /* 弹出层hover效果 */
  72.       .php > .container > .li-kc > .desc:hover {
  73.         min-height: 132px;
  74.         position: relative;
  75.         top: -90px;
  76.         transition: 0.9s;
  77.       }
  78.       .php > .container > .li-kc > span {
  79.         font-size: smaller;
  80.         color: #555;
  81.         position: absolute;
  82.         bottom: 5px;
  83.         left: 10px;
  84.       }
  85.       .php > .container > .li-kc > .desc a span {
  86.         background-color: #939999;
  87.         color: cornsilk;
  88.         padding: 3px;
  89.         border-radius: 1px;
  90.       }
  91.       .php > .container > .li-kc > .desc a p {
  92.         margin-top: 10px;
  93.         display: block;
  94.         width: 200px;
  95.         color: #999;
  96.       }
  97.     </style>
  98.   </head>
  99.   <body>
  100.     <div class="php">
  101.       <h3 class="title">PHP课程</h3>
  102.       <div class="container">
  103.         <div class="li-kc">
  104.           <a href="#"
  105.             ><img src="https://www.php.cn/static/images/index_learn_first.jpg"
  106.           /></a>
  107.         </div>
  108.         <div class="li-kc">
  109.           <a href="#"
  110.             ><img
  111.               src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"
  112.           /></a>
  113.           <div class="desc">
  114.             <a href=""
  115.               ><span>初级</span>30分钟学会网站布局
  116.               <p>
  117.                 30分钟学会网站布局30分钟学
  118.               </p>
  119.             </a>
  120.           </div>
  121.           <span>播放6W+次</span>
  122.         </div>
  123.         <div class="li-kc">
  124.           <a href="#"
  125.             ><img
  126.               src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"
  127.           /></a>
  128.           <div class="desc">
  129.             <a href=""
  130.               ><span>初级</span>30分钟学会网站布局
  131.               <p>
  132.                 30分钟学会网站布局30分钟学
  133.               </p>
  134.             </a>
  135.           </div>
  136.           <span>播放6W+次</span>
  137.         </div>
  138.         <div class="li-kc">
  139.           <a href="#"
  140.             ><img
  141.               src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"
  142.           /></a>
  143.           <div class="desc">
  144.             <a href=""
  145.               ><span>初级</span>30分钟学会网站布局
  146.               <p>
  147.                 30分钟学会网站布局30分钟学
  148.               </p>
  149.             </a>
  150.           </div>
  151.           <span>播放6W+次</span>
  152.         </div>
  153.         <div class="li-kc">
  154.           <a href="#"
  155.             ><img
  156.               src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"
  157.           /></a>
  158.           <div class="desc">
  159.             <a href=""
  160.               ><span>初级</span>30分钟学会网站布局
  161.               <p>
  162.                 30分钟学会网站布局30分钟学
  163.               </p>
  164.             </a>
  165.           </div>
  166.           <span>播放6W+次</span>
  167.         </div>
  168.         <div class="li-kc">
  169.           <a href="#"
  170.             ><img
  171.               src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"
  172.           /></a>
  173.           <div class="desc">
  174.             <a href=""
  175.               ><span>初级</span>30分钟学会网站布局
  176.               <p>
  177.                 30分钟学会网站布局30分钟学
  178.               </p>
  179.             </a>
  180.           </div>
  181.           <span>播放6W+次</span>
  182.         </div>
  183.         <div class="li-kc">
  184.           <a href="#"
  185.             ><img
  186.               src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"
  187.           /></a>
  188.           <div class="desc">
  189.             <a href=""
  190.               ><span>初级</span>30分钟学会网站布局
  191.               <p>
  192.                 30分钟学会网站布局30分钟学
  193.               </p>
  194.             </a>
  195.           </div>
  196.           <span>播放6W+次</span>
  197.         </div>
  198.         <div class="li-kc">
  199.           <a href="#"
  200.             ><img
  201.               src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"
  202.           /></a>
  203.           <div class="desc">
  204.             <a href=""
  205.               ><span>初级</span>30分钟学会网站布局
  206.               <p>
  207.                 30分钟学会网站布局30分钟学
  208.               </p>
  209.             </a>
  210.           </div>
  211.           <span>播放6W+次</span>
  212.         </div>
  213.         <div class="li-kc">
  214.           <a href="#"
  215.             ><img
  216.               src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"
  217.           /></a>
  218.           <div class="desc">
  219.             <a href=""
  220.               ><span>初级</span>30分钟学会网站布局
  221.               <p>
  222.                 30分钟学会网站布局30分钟学
  223.               </p>
  224.             </a>
  225.           </div>
  226.           <span>播放6W+次</span>
  227.         </div>
  228.         <div class="li-kc">
  229.           <a href="#"
  230.             ><img
  231.               src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"
  232.           /></a>
  233.           <div class="desc">
  234.             <a href=""
  235.               ><span>初级</span>30分钟学会网站布局
  236.               <p>
  237.                 30分钟学会网站布局30分钟学
  238.               </p>
  239.             </a>
  240.           </div>
  241.           <span>播放6W+次</span>
  242.         </div>
  243.         <div class="li-kc">
  244.           <a href="#"
  245.             ><img
  246.               src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"
  247.           /></a>
  248.           <div class="desc">
  249.             <a href=""
  250.               ><span>初级</span>30分钟学会网站布局
  251.               <p>
  252.                 30分钟学会网站布局30分钟学
  253.               </p>
  254.             </a>
  255.           </div>
  256.           <span>播放6W+次</span>
  257.         </div>
  258.         <div class="li-kc">
  259.           <a href="#"
  260.             ><img
  261.               src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"
  262.           /></a>
  263.           <div class="desc">
  264.             <a href=""
  265.               ><span>初级</span>30分钟学会网站布局
  266.               <p>
  267.                 30分钟学会网站布局30分钟学
  268.               </p>
  269.             </a>
  270.           </div>
  271.           <span>播放6W+次</span>
  272.         </div>
  273.         <div class="li-kc">
  274.           <a href="#"
  275.             ><img
  276.               src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"
  277.           /></a>
  278.           <div class="desc">
  279.             <a href=""
  280.               ><span>初级</span>30分钟学会网站布局
  281.               <p>
  282.                 30分钟学会网站布局30分钟学
  283.               </p>
  284.             </a>
  285.           </div>
  286.           <span>播放6W+次</span>
  287.         </div>
  288.         <div class="li-kc">
  289.           <a href="#"
  290.             ><img
  291.               src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"
  292.           /></a>
  293.           <div class="desc">
  294.             <a href=""
  295.               ><span>初级</span>30分钟学会网站布局
  296.               <p>
  297.                 30分钟学会网站布局30分钟学
  298.               </p>
  299.             </a>
  300.           </div>
  301.           <span>播放6W+次</span>
  302.         </div>
  303.       </div>
  304.     </div>
  305.   </body>
  306. </html>
上一条：宝塔面板phpmyadmin导入MYSQL数据库限制大小修改办法下一条：phpmyadmin #1045 无法登录 MySQL 服务器的解决方法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议