Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid布局实战演示
Blogger Information
Blog 37
fans 0
comment 1
visits 28532
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布局实战演示
kong
Original
829 people have browsed it

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布局一起使用会更轻松

Correcting teacher：PHPzPHPz

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