grid布局实战演示

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
grid布局基本属性容器属性

在父元素中写入display: grid; 使其转为grid容器

创建显式网格(创建行与列)
  1.      <div class="cnt">
  2.         <div class="item">item1</div>
  3.         <div class="item">item2</div>
  4.         <div class="item">item3</div>
  5.         <div class="item">item4</div>
  6.         <div class="item">item5</div>
  7.         <div class="item">item6</div>
  8.         <div class="item">item7</div>
  9.         <div class="item">item8</div>
  10.         <div class="item">item9</div>
  11.     </div>
  1. .cnt{
  2.     /* 转换为grid网格容器 */
  3.     display: grid;
  5.     /* 相同并且相邻的值，可以用repeat()简化 (个数, 比例 单位用fr) */
  6.     /* grid-template-columns /rows: 1fr 2fr 1fr; 使用不同比例操作*/
  7.     grid-template-columns: repeat(3, 1fr);
  8.     grid-template-rows: repeat(3, 1fr);
  9. }

排列规则

grid-auto-flow: row/column; row默认 column垂直排列

  1.     <div class="cnt">
  2.         <div class="item">item1</div>
  3.         <div class="item">item2</div>
  4.         <div class="item">item3</div>
  5.         <div class="item">item4</div>
  6.         <div class="item">item5</div>
  7.         <div class="item">item6</div>
  8.         <div class="item">item7</div>
  9.         <div class="item">item8</div>
  10.         <div class="item">item9</div>
  11.     </div>
  1.     .cnt{
  2.         /* 转换为grid网格容器 */
  3.         display: grid;
  4.         grid-template-columns: repeat(3, 1fr);
  5.         grid-template-rows: repeat(3, 1fr);
  6.         /*默认 row*/
  7.         /*grid-auto-flow: row;*/
  8.         /*column垂直排列*/
  9.         grid-auto-flow: column;
  10.     }


隐式网格

grid-auto-rows: 1fr 超出固定高度后自动分配位置

  1.     <div class="cnt">
  2.         <div class="item">item1</div>
  3.         <div class="item">item2</div>
  4.         <div class="item">item3</div>
  5.         <div class="item">item4</div>
  6.         <div class="item">item5</div>
  7.         <div class="item">item6</div>
  8.         <div class="item">item7</div>
  9.         <div class="item">item8</div>
  10.         <div class="item">item9</div>
  11.         <div class="item">item10</div>
  12.         <div class="item">item11</div>
  13.         <div class="item">item12</div>
  14.     </div>
  1.     .cnt{
  2.         /* 转换为grid网格容器 */
  3.         display: grid;
  4.         grid-template-columns: repeat(3, 1fr);
  5.         grid-template-rows: repeat(3, 1fr);
  7.         /* 超出显示网格数量的子元素，创建在隐式网格中（自动分配位置） */
  8.         grid-auto-rows: 1fr;
  9.     }

对齐方式

子元素在容器中对齐方式 两个值
place-content: 垂直方向 水平方向; start center end

  1.     <div class="cnt">
  2.         <div class="item">item1</div>
  3.         <div class="item">item2</div>
  4.         <div class="item">item3</div>
  5.         <div class="item">item4</div>
  6.         <div class="item">item5</div>
  7.         <div class="item">item6</div>
  8.     </div>
  1.     .cnt{
  2.         width: 500px;
  3.         height: 500px;
  4.         background-color: antiquewhite;
  5.         /* 转换为grid网格容器 */
  6.         display: grid;
  7.         /*子元素宽度总和需要小于父元素才会有效果*/
  8.         grid-template-columns: repeat(3, 100px);
  9.         grid-template-rows: repeat(3, 100px);
  11.         /*垂直居中 水平靠右*/
  12.         place-content: center end;
  14.         /* 如果两个值相同，可以简写 */
  15.         place-content: center;
  17.         /* 剩余空间还可以在所有项目之间进行分配 两个值相同，可以简写*/
  18.         place-content: space-between space-around;
  19.     }





控制子元素在网格中 垂直方向 水平方向

place-items: 垂直方向 水平方向 可选值start center end

  1.     <div class="cnt">
  2.         <div class="item">item1</div>
  3.         <div class="item">item2</div>
  4.         <div class="item">item3</div>
  5.         <div class="item">item4</div>
  6.         <div class="item">item5</div>
  7.         <div class="item">item6</div>
  8.     </div>
  1.     .cnt{
  2.         width: 500px;
  3.         height: 500px;
  4.         background-color: antiquewhite;
  5.         /* 转换为grid网格容器 */
  6.         display: grid;
  7.         /*子元素宽度总和需要小于父元素才会有效果*/
  8.         grid-template-columns: repeat(3, 100px);
  9.         grid-template-rows: repeat(3, 100px);
  11.         /*place-items: 垂直方向 水平方向*/
  12.         place-items: center center;
  13.     }
  15.     .cnt > .item{
  16.         width: 100px;
  17.         height: 100px;
  18.         background-color: blue;
  19.     }

相对于单元格调整对齐方式

place-self: 垂直方向 水平方向 可选值start center end

  1.     <div class="cnt">
  2.         <div class="item">item1</div>
  3.         <div class="item">item2</div>
  4.         <div class="item">item3</div>
  5.         <div class="item">item4</div>
  6.         <div class="item">item5</div>
  7.         <div class="item">item6</div>
  8.     </div>
  1.     .cnt{
  2.         width: 500px;
  3.         height: 500px;
  4.         background-color: antiquewhite;
  5.         /* 转换为grid网格容器 */
  6.         display: grid;
  7.         /*子元素宽度总和需要小于父元素才会有效果*/
  8.         grid-template-columns: repeat(3, 100px);
  9.         grid-template-rows: repeat(3, 100px);
  10.     }
  12.     .cnt > .item{
  13.         width: 100px;
  14.         height: 100px;
  15.         background-color: blue;
  16.     }
  17.     .cnt .item:first-child{
  18.         /* 相对于单元格调整对齐方式 */
  19.         place-self: center end;
  20.     }

单元格跨越多个行列

grid-column/row: 开始 结束

  1. <div class="cnt">
  2.     <div class="item">item1</div>
  3.     <div class="item">item2</div>
  4.     <div class="item">item3</div>
  5.     <div class="item">item4</div>
  6.     <div class="item">item5</div>
  7.     <div class="item">item6</div>
  8. </div>
  1. .cnt{
  2.     width: 500px;
  3.     height: 500px;
  4.     background-color: antiquewhite;
  5.     /* 转换为grid网格容器 */
  6.     display: grid;
  7.     /*子元素宽度总和需要小于父元素才会有效果*/
  8.     grid-template-columns: repeat(3, 100px);
  9.     grid-template-rows: repeat(3, 100px);
  10. }
  12. .cnt > .item{
  13.     width: 100px;
  14.     height: 100px;
  15.     background-color: blue;
  16. }
  18. .cnt .item:first-child{
  19.      /* 跨越单元格 */
  20.     grid-row: 2;
  21.     grid-column: 1;
  22.     background-color: firebrick;
  23. }

  2. .cnt .item:first-child{
  3.     width: auto;
  4.     /* 占据多个单元格 */
  5.     /* grid-area: 行开始 / 列开始 / 行结束 / 列结束; */
  6.     /* tips: 如果是span 1 可以简化，如果span 1不在最后位置不能简化 */
  7.     grid-area: 1 / 2 / span 2 / span 2;
  8.     background-color: firebrick;
  9. }

行列间隙

gap: 垂直方向 水平方向

  1. <div class="cnt">
  2.     <div class="item">item1</div>
  3.     <div class="item">item2</div>
  4.     <div class="item">item3</div>
  5.     <div class="item">item4</div>
  6.     <div class="item">item5</div>
  7.     <div class="item">item6</div>
  8. </div>
  1. .cnt{
  2.     width: 500px;
  3.     height: 500px;
  4.     background-color: antiquewhite;
  5.     /* 转换为grid网格容器 */
  6.     display: grid;
  7.     /*子元素宽度总和需要小于父元素才会有效果*/
  8.     grid-template-columns: repeat(3, 100px);
  9.     grid-template-rows: repeat(3, 100px);
  11.     /* 行列间隙 垂直方向 水平方向 数值相同可以简写*/
  12.     gap: 5px 5px;
  13. }

实战布局
  1. <!DOCTYPE html>
  2. <html>
  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>grid布局</title>
  8.     <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3013559_4hesy2xv8of.css">
  9.   </head>
  10.   <body>
  11.     <div class="cnt">
  12.       <div class="title">
  13.         <h1>最新课程</h1>
  14.         <a href="">更多 &gt;</a>
  15.       </div>
  16.       <div class="list">
  17.         <ul>
  18.           <li>
  19.             <div class="list-img">
  20.               <a href="http://" target="_blank" rel="noopener noreferrer">
  21.                 <img
  22.                   src="https://img.php.cn/upload/course/000/000/068/63f73a6b8fc1b115.jpg"
  23.                   alt=""
  24.                 />
  25.               </a>
  26.             </div>
  27.             <div class="list-txt">
  28.                 <div class="txt-title">
  29.                     <i>中级</i>
  30.                     <a href="">
  31.                         Symfony5【从0开始开发博客系统】
  32.                     </a>
  33.                 </div>
  34.                 <div class="txt-bottom">
  35.                     <span>25633次学习</span>
  36.                     <span>
  37.                         <i class="icon-shoucang"></i>收藏
  38.                     </span>
  39.                 </div>
  40.             </div>
  41.           </li>
  42.           <li>
  43.             <div class="list-img">
  44.               <a href="http://" target="_blank" rel="noopener noreferrer">
  45.                 <img
  46.                   src="https://img.php.cn/upload/course/000/000/068/63ef5bd17f8cc894.jpg"
  47.                   alt=""
  48.                 />
  49.               </a>
  50.             </div>
  51.             <div class="list-txt">
  52.                 <div class="txt-title">
  53.                     <i>中级</i>
  54.                     <a href="">
  55.                         Symfony5【从0开始开发博客系统】
  56.                     </a>
  57.                 </div>
  58.                 <div class="txt-bottom">
  59.                     <span>25633次学习</span>
  60.                     <span>
  61.                         <i class="icon-shoucang"></i>收藏
  62.                     </span>
  63.                 </div>
  64.             </div>
  65.           </li>
  66.           <li>
  67.             <div class="list-img">
  68.               <a href="http://" target="_blank" rel="noopener noreferrer">
  69.                 <img
  70.                   src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg"
  71.                   alt=""
  72.                 />
  73.               </a>
  74.             </div>
  75.             <div class="list-txt">
  76.                 <div class="txt-title">
  77.                     <i>中级</i>
  78.                     <a href="">
  79.                         Symfony5【从0开始开发博客系统】
  80.                     </a>
  81.                 </div>
  82.                 <div class="txt-bottom">
  83.                     <span>25633次学习</span>
  84.                     <span>
  85.                         <i class="icon-shoucang"></i>收藏
  86.                     </span>
  87.                 </div>
  88.             </div>
  89.           </li>
  90.           <li>
  91.             <div class="list-img">
  92.               <a href="http://" target="_blank" rel="noopener noreferrer">
  93.                 <img
  94.                   src="https://img.php.cn/upload/course/000/000/068/63db6ec52e1a3840.jpg"
  95.                   alt=""
  96.                 />
  97.               </a>
  98.             </div>
  99.             <div class="list-txt">
  100.                 <div class="txt-title">
  101.                     <i>中级</i>
  102.                     <a href="">
  103.                         Symfony5【从0开始开发博客系统】
  104.                     </a>
  105.                 </div>
  106.                 <div class="txt-bottom">
  107.                     <span>25633次学习</span>
  108.                     <span>
  109.                         <i class="icon-shoucang"></i>收藏
  110.                     </span>
  111.                 </div>
  112.             </div>
  113.           </li>
  114.           <li>
  115.             <div class="list-img">
  116.               <a href="http://" target="_blank" rel="noopener noreferrer">
  117.                 <img
  118.                   src="https://img.php.cn/upload/course/000/000/068/63db62f3d0b65880.jpg"
  119.                   alt=""
  120.                 />
  121.               </a>
  122.             </div>
  123.             <div class="list-txt">
  124.                 <div class="txt-title">
  125.                     <i>中级</i>
  126.                     <a href="">
  127.                         Symfony5【从0开始开发博客系统】
  128.                     </a>
  129.                 </div>
  130.                 <div class="txt-bottom">
  131.                     <span>25633次学习</span>
  132.                     <span>
  133.                         <i class="icon-shoucang"></i>收藏
  134.                     </span>
  135.                 </div>
  136.             </div>
  137.           </li>
  138.           <li>
  139.             <div class="list-img">
  140.               <a href="http://" target="_blank" rel="noopener noreferrer">
  141.                 <img
  142.                   src="https://img.php.cn/upload/course/000/000/068/63d8e62db5e5c880.png"
  143.                   alt=""
  144.                 />
  145.               </a>
  146.             </div>
  147.             <div class="list-txt">
  148.                 <div class="txt-title">
  149.                     <i>中级</i>
  150.                     <a href="">
  151.                         Symfony5【从0开始开发博客系统】
  152.                     </a>
  153.                 </div>
  154.                 <div class="txt-bottom">
  155.                     <span>25633次学习</span>
  156.                     <span>
  157.                         <i class="icon-shoucang"></i>收藏
  158.                     </span>
  159.                 </div>
  160.             </div>
  161.           </li>
  162.           <li>
  163.             <div class="list-img">
  164.               <a href="http://" target="_blank" rel="noopener noreferrer">
  165.                 <img
  166.                   src="https://img.php.cn/upload/course/000/000/068/63c64f278df45107.jpg"
  167.                   alt=""
  168.                 />
  169.               </a>
  170.             </div>
  171.             <div class="list-txt">
  172.                 <div class="txt-title">
  173.                     <i>中级</i>
  174.                     <a href="">
  175.                         Symfony5【从0开始开发博客系统】
  176.                     </a>
  177.                 </div>
  178.                 <div class="txt-bottom">
  179.                     <span>25633次学习</span>
  180.                     <span>
  181.                         <i class="icon-shoucang"></i>收藏
  182.                     </span>
  183.                 </div>
  184.             </div>
  185.           </li>
  186.           <li>
  187.             <div class="list-img">
  188.               <a href="http://" target="_blank" rel="noopener noreferrer">
  189.                 <img
  190.                   src="https://img.php.cn/upload/course/000/000/068/63c4f5a167a4b379.jpg"
  191.                   alt=""
  192.                 />
  193.               </a>
  194.             </div>
  195.             <div class="list-txt">
  196.                 <div class="txt-title">
  197.                     <i>中级</i>
  198.                     <a href="">
  199.                         Symfony5【从0开始开发博客系统】
  200.                     </a>
  201.                 </div>
  202.                 <div class="txt-bottom">
  203.                     <span>25633次学习</span>
  204.                     <span>
  205.                         <i class="icon-shoucang"></i>收藏
  206.                     </span>
  207.                 </div>
  208.             </div>
  209.           </li>
  210.           <li>
  211.             <div class="list-img">
  212.               <a href="http://" target="_blank" rel="noopener noreferrer">
  213.                 <img
  214.                   src="https://img.php.cn/upload/course/000/000/068/63c251a5378af408.jpg"
  215.                   alt=""
  216.                 />
  217.               </a>
  218.             </div>
  219.             <div class="list-txt">
  220.                 <div class="txt-title">
  221.                     <i>中级</i>
  222.                     <a href="">
  223.                         Symfony5【从0开始开发博客系统】
  224.                     </a>
  225.                 </div>
  226.                 <div class="txt-bottom">
  227.                     <span>25633次学习</span>
  228.                     <span>
  229.                         <i class="icon-shoucang"></i>收藏
  230.                     </span>
  231.                 </div>
  232.             </div>
  233.           </li>
  234.           <li>
  235.             <div class="list-img">
  236.               <a href="http://" target="_blank" rel="noopener noreferrer">
  237.                 <img
  238.                   src="https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg"
  239.                   alt=""
  240.                 />
  241.               </a>
  242.             </div>
  243.             <div class="list-txt">
  244.                 <div class="txt-title">
  245.                     <i>中级</i>
  246.                     <a href="">
  247.                         Symfony5【从0开始开发博客系统】
  248.                     </a>
  249.                 </div>
  250.                 <div class="txt-bottom">
  251.                     <span>25633次学习</span>
  252.                     <span>
  253.                         <i class="icon-shoucang"></i>收藏
  254.                     </span>
  255.                 </div>
  256.             </div>
  257.           </li>
  258.         </ul>
  259.       </div>
  260.     </div>
  261.     <style>
  262.       * {
  263.         padding: 0;
  264.         margin: 0;
  265.       }
  266.       html {
  267.         font-size: 16px;
  268.         background-color: #f3f5f7;
  269.         padding-top: 100px;
  270.       }
  271.       a {
  272.         text-decoration: none;
  273.       }
  274.       ul{
  275.         list-style: none;
  276.       }
  277.       i{
  278.         font-style: normal;
  279.         font-family: 'iconfont';
  280.       }
  281.       .cnt {
  282.         max-width: 1200px;
  283.         margin: 0 auto;
  284.       }
  285.       .title {
  286.         display: grid;
  287.         grid-template-rows: repeat(1, 1fr);
  288.         grid-template-columns: repeat(2, 1fr);
  289.         margin-bottom: 1.875rem;
  290.       }
  291.       .title a {
  292.         width: 4.875rem;
  293.         height: 2rem;
  294.         background: #f0f1f4;
  295.         border-radius: 100px;
  296.         text-align: center;
  297.         line-height: 32px;
  298.         overflow: hidden;
  299.         color: #999999;
  300.         place-self: center end;
  301.       }
  302.       .list ul{
  303.         /* 容器转换grid */
  304.         display: grid;
  305.         /* 创建显式网格 */
  306.         /*两行五列*/
  307.         grid-template-rows: repeat(2, 1fr);
  308.         grid-template-columns: repeat(5, 1fr);
  309.         /* 设置间距 垂直 水平 */
  310.         gap: 1.875rem 1.25rem;
  311.       }
  313.       .list ul > li{
  314.         border-radius: 6px;
  315.         background-color: #fff;
  316.         padding-bottom: .6875rem;
  317.         overflow: hidden;
  318.       }
  320.       .list ul > li img{
  321.         display: block;
  322.         max-width: 100%;
  323.         object-fit: cover;
  324.       }
  326.       .list-txt{
  327.         padding: 1.125rem;
  328.         padding-bottom: 0;
  329.         font-size: .875rem;
  330.       }
  332.       .txt-title{
  333.         height: 2.8125rem;
  334.         line-height: 1.5625rem;
  335.         color: #333;
  336.         overflow: hidden;
  337.       }
  339.       .txt-title > i{
  340.         display: inline-block;
  341.         width: 1.75rem;
  342.         height: 1rem;
  343.         line-height: 1rem;
  344.         overflow: hidden;
  345.         text-align: center;
  346.         font-size: .75rem;
  347.         border-radius: 2px;
  348.         padding: .125rem .25rem;
  349.         background: #FCE7E0;
  350.         color: #FD4029;
  351.         vertical-align: middle;
  352.         margin-right: .3125rem;
  353.       }
  355.       .txt-bottom{
  356.         display: flex;
  357.         justify-content: space-between;
  358.         margin-top: .9375rem;
  359.         color: #b7b7b7;
  360.       }
  362.       .txt-bottom i{
  363.         display: inline-block;
  364.         margin-right: .3125rem;
  365.       }
  367.       .txt-title a{
  368.         color: #333;
  369.       }
  371.       h1 {
  372.         font-size: 1.375rem;
  373.         color: #333333;
  374.       }
  375.     </style>
  376.   </body>
  377. </html>

总结
  1. /* 转换为grid网格容器 */
  2. display: grid;
  3. /* 创建显式网格 */
  4. /* 相同并且相邻的值，可以用repeat()简化 (个数, 比例 单位用fr) */
  5. /* grid-template-columns /rows: 1fr 2fr 1fr; 使用不同比例操作*/
  7. grid-template-columns: repeat(3, 1fr);
  8. grid-template-rows: repeat(3, 1fr);
  10. /* 排列规则 */
  11. /* row行优先 默认 column 垂直排列*/
  12. grid-auto-flow: row;
  13. grid-auto-flow: column;
  15. /* 隐式网格 */
  16. /* 超出显示网格数量的子元素，创建在隐式网格中（自动分配位置） */
  17. grid-auto-rows: 1fr;
  19. /* 子元素在容器中对齐方式 两个值*/
  20. /* place-content: 垂直方向 水平方向; */
  21. /* 可选值start center end */
  22. place-content: center end;
  24. /* 剩余空间还可以在所有项目之间进行分配 */
  25. place-content: space-around space-between;
  26. place-content: space-between space-around;
  27. place-content: space-between;
  28. place-content: space-around;
  30. /*控制子元素在网格中 垂直方向 水平方向*/
  31. /* place-items: 垂直方向 水平方向; 两个值*/
  32. /* 可选值start center end */
  33. /* 与上方相同 */
  34. place-items: start center;
  35. place-items: center center;
  36. place-items: center end;
  37. place-items: center center;
  39. /* 行列间隙 垂直方向 水平方向 数值相同可以简写*/
  40. gap: 5px 5px;
  42. item
  43. /* 相对于单元格调整对齐方式 */
  44. /* place-self: 垂直方向 水平方向; */
  45. /* 可选值start/center/end; */
  46. place-self: center end;
  48. /* 跨越单元格 */
  49. grid-row: 2;
  50. grid-column: 1;
  52. /* 占据多个单元格 */
  53. grid-row: 2 / span 1;
  54. grid-column: 2 / span 2;
  56. /* grid-area: 行开始 / 列开始 / 行结束 / 列结束; */
  57. /* tips: 如果是span 1 可以简化，如果span 1不在最后位置不能简化 */
  58. grid-area: 1 / 2 / span 2 / span 2;
结合案例：可以配合着 flex布局一起使用会更轻松【文章转自国外服务器 http://www.558idc.com处的文章,转载请说明出处】
更多阅读