Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > Grid项目在网格单元和容器中对齐的相关属性
Blogger Information
Blog 20
fans 1
comment 0
visits 17681
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项目在网格单元和容器中对齐的相关属性
xosing的博客
Original
817 people have browsed it

1. 将项目在网格单元和容器中对齐的相关属性全部实例演示;

项目在网格容器中的对齐方式

  1. 默认: 项目在网格单元中是拉伸的
  2. 只有项目在网络单元中存在剩余空间的时候,对齐才有必要且有意义

HTML代码

  1. <div class="container">
  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>

CSS代码

  1. .container {
  2.         width: 30em;
  3.         height: 15em;
  4.         background-color: bisque;
  5.         padding: 0.5em;
  6.         display: grid;
  7.         grid-template-columns: repeat(3, 5em);
  8.         grid-template-rows: repeat(2, 3em);
  9.         grid-auto-rows: 3em;
  10.         gap: 0.5em;
  11.     }
  12. .container>.item {
  13.         background-color: lightgoldenrodyellow;
  14.         color: lightblue;
  15.         padding: 0.5em;
  16.     }

1.1 place-content:在容器中使用,排列参数: 垂直 水平; 默认值 place-content: start start;

1.1.1.将所有项目做为一个整体在容器排列; start; center; end;

项目在容器中排列: 垂直居中 水平靠左
  1. .container {
  2. place-content: center start;
  3.  }

项目在容器中排列: 垂直居中 水平居中
  1. .container {
  2. place-content: center center;
  3.  }

项目在容器中排列: 垂直居中 水平靠右
  1. .container {
  2. place-content: center end;
  3.  }

1.1.2.将所有项目打散成独立个体在容器中排列

二端对齐space-between; 分散对齐space-around; 平均对齐space-evenly;

项目在容器中排列: 二端对齐
  1. .container {
  2. place-content: space-between;
  3.  }

项目在容器中排列: 分散对齐
  1. .container {
  2. place-content: space-around;
  3.  }

项目在容器中排列: 平均对齐
  1. .container {
  2. place-content: space-evenly;
  3.  }

1.2 place-items: 在容器中使用,排列参数: 垂直 水平; 默认值 place-items: start start;

place-items: 所有项目在网格单元中的对齐方式

所有项目在单元格中排列: 垂直靠底 水平靠右
  1. .container {
  2. place-items: end end;
  3.  }

所有项目在单元格中排列: 垂直居中 水平居中
  1. .container {
  2. place-items: center center;
  3.  }

1.3. plce-self: 在项目中使用,排列参数: 垂直 水平; 默认值 place-self: start start;

place-self: 某一个项目在网络单元中的对齐方式

第五个项目在单元格中排列: 垂直居中 水平居中
  1. .container>.item:nth-last-of-type(5) {
  2.         background-color: lightgreen;
  3.         color: white;
  4.         place-self: end start;
  5.     }

2. 仿php.cn首页样式

html代码

  1. <!DOCTYPE html>
  2. <html lang="Zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>简易仿制php.cn首页</title>
  7.     <link rel="stylesheet" href="style/1227.css">
  8. </head>
  9. <body>
  10.     <header>
  11.         <div class="logo">
  12.             <a href="">
  13.                 <h1><img src="images/logo.png" title="php中文网"></h1>
  14.             </a>
  15.         </div>
  16.         <div class="menu">
  17.             <li><a href="">首页</a></li>
  18.             <li><a href="">视频教程</a></li>
  19.             <li><a href="">入门教程</a></li>
  20.             <li><a href="">社区问答</a></li>
  21.             <li><a href="">技术文章</a>
  22.                 <span class="iconfont icon-arrow-down-filling"></span>
  23.             </li>
  24.             <li><a href="">编程词典</a>
  25.                 <span class="iconfont icon-arrow-down-filling"></span>
  26.             </li>
  27.             <li><a href="">资源下载</a>
  28.                 <span class="iconfont icon-arrow-down-filling"></span>
  29.             </li>
  30.             <li><a href="">工具下载</a>
  31.                 <span class="iconfont icon-direction-down-circle"></span>
  32.             </li>
  33.             <li><a href="">PHP培训</a>
  34.                 <span class="iconfont icon-play"></span>
  35.             </li>
  36.         </div>
  37.         <div class="login">
  38.             <a href="">登录</a>
  39.             <a href="">注册</a>
  40.         </div>
  41.     </header>
  42.     <main>
  43.         <div class="top">
  44.             <div class="top-left">
  45.                 <li><a href="">php开发</a><span class="iconfont icon-arrow-right"></span></li>
  46.                 <li><a href="">前端开发</a><span class="iconfont icon-arrow-right"></span></li>
  47.                 <li><a href="">服务端开发</a><span class="iconfont icon-arrow-right"></span></li>
  48.                 <li><a href="">移动开发</a><span class="iconfont icon-arrow-right"></span></li>
  49.                 <li><a href="">数据库</a><span class="iconfont icon-arrow-right"></span></li>
  50.                 <li><a href="">服务器运维&下载</a><span class="iconfont icon-arrow-right"></span></li>
  51.                 <li><a href="">在线工具</a><span class="iconfont icon-arrow-right"></span></li>
  52.                 <li><a href="">常用类库</a><span class="iconfont icon-arrow-right"></span></li>
  53.             </div>
  54.             <div class="top-right">
  55.                 <div class="top-nav">
  56.                     <li><a href="">php头条</a> <span class="orangered">新</span></li>
  57.                     <li><a href="">独孤九贱</a></li>
  58.                     <li><a href="">学习路线</a> <span class="darkslategray">新</span></li>
  59.                     <li><a href="">在线工具</a></li>
  60.                     <li><a href="">趣味课堂</a> <span class="orange">新</span></li>
  61.                     <li><a href="">社区问答</a></li>
  62.                     <li><a href="">课程直播</a></li>
  63.                     <div class="top-search">
  64.                         <input type="text" name="search" placeholder="输入关键字">
  65.                         <span class="iconfont icon-search"></span>
  66.                     </div>
  67.                 </div>
  68.                 <div class="top-slider"><img src="images/slider.jpg" alt=""></div>
  69.                 <div class="top-img">
  70.                     <li>
  71.                         <a href=""><img src="images/slider1.jpg" alt=""></a>
  72.                     </li>
  73.                     <li>
  74.                         <a href=""><img src="images/slider2.jpg" alt=""></a>
  75.                     </li>
  76.                     <li>
  77.                         <a href=""><img src="images/slider3.png" alt=""></a>
  78.                     </li>
  79.                     <li>
  80.                         <a href=""><img src="images/slider4.jpg" alt=""></a>
  81.                     </li>
  82.                 </div>
  83.             </div>
  84.         </div>
  85.         <div class="ad">
  86.             <a href=""><img src="images/slider5.jpg" alt=""></a>
  87.         </div>
  88.         <div class="main-two">
  90.             <div class="toutao">
  91.                 <div class="toutao-title">
  92.                     <h2>头条</h2>
  93.                 </div>
  94.                 <li><a href="">php中文网原创视频：《天龙八部》公益ph</a></li>
  95.                 <li><a href="">php中文网《玉女心经》公益PHP WEB培</a></li>
  96.                 <li><a href="">十款炫酷的程序员圣诞节代码特效【免费下</a></li>
  97.                 <li><a href="">值得研究的20个Vue开源项目</a></li>
  98.                 <li><a href="">【推荐】17个提升用户体验图像特效库</a></li>
  99.                 <li><a href="">各种知名网站的404页面，看看谁更有创意？</a></li>
  100.                 <li><a href="">Chrome性能有了最大提升！（Chrome87</a></li>
  101.                 <li><a href="">PHP 8 正式发布了！</a></li>
  102.                 <li><a href="">推荐10款GitHub中高价值的PHP项目（值</a></li>
  103.                 <li><a href="">推荐2020前端开发者11个必备的网站</a></li>
  104.                 <li><a href="">这15个有用的Github功能，你知道吗！</a></li>
  105.                 <li><a href="">八个写JavaScript代码的小技巧！</a></li>
  106.             </div>
  107.             <div class="course">
  108.                 <div class="course-title">
  109.                     <h2>最新课程</h2>
  110.                 </div>
  111.                 <li>
  112.                     <a href=""><img src="images/course1.png" alt=""></a>
  113.                     <a href="">
  114.                         <p><span>高级</span>通用后台管理系统实战开发</p>
  115.                     </a>
  116.                 </li>
  117.                 <li>
  118.                     <a href=""><img src="images/course2.png" alt=""></a>
  119.                     <a href="">
  120.                         <p><span>中级</span>通用后台管理系统实战开发</p>
  121.                     </a>
  122.                 </li>
  123.                 <li>
  124.                     <a href=""><img src="images/course3.png" alt=""></a>
  125.                     <a href="">
  126.                         <p><span>高级</span>通用后台管理系统实战开发</p>
  127.                     </a>
  128.                 </li>
  129.                 <li>
  130.                     <a href=""><img src="images/course4.png" alt=""></a>
  131.                     <a href="">
  132.                         <p><span>初级</span>通用后台管理系统实战开发</p>
  133.                     </a>
  134.                 </li>
  135.                 <li>
  136.                     <a href=""><img src="images/course5.png" alt=""></a>
  137.                     <a href="">
  138.                         <p><span>中级</span>通用后台管理系统实战开发</p>
  139.                     </a>
  140.                 </li>
  141.                 <li>
  142.                     <a href=""><img src="images/course6.jpg" alt=""></a>
  143.                     <a href="">
  144.                         <p><span>高级</span>通用后台管理系统实战开发</p>
  145.                     </a>
  146.                 </li>
  147.             </div>
  148.             <div class="notebook">
  149.                 <div class="notebook-title">
  150.                     <h2>常用手册</h2><a href="">更多</a>
  151.                 </div>
  152.                 <li><img src="images/notebook1.png"><a href="">ThinkPHP6.0CI手册大全</a><a href="">php手册Linux手册</a></li>
  153.                 <li><img src="images/notebook2.png"><a href="">MySQL参考手册大全</a><a href="">laravel5.8速查表</a></li>
  154.                 <li><img src="images/notebook3.png"><a href="">Python参考手册大全</a><a href="">Node.js中文学习手册</a></li>
  155.                 <li><img src="images/notebook4.png"><a href="">html手册CSS手册</a><a href="">phpjQuery手册大全</a></li>
  156.                 <li><img src="images/notebook5.png"><a href="">ThinkPHP6.0CI手册大全</a><a href="">AngularJSAjax手册</a></li>
  157.                 <li><img src="images/notebook6.jpg"><a href="">ASP参考手册大全</a><a href="">Bootstrap3参考手册</a></li>
  158.             </div>
  159.     </main>
  160.     <footer>
  161.         <div class="footer-main">
  162.             <div class="footer-content">
  163.                 <ul>
  164.                     <li> <a href=""> 网站首页</a></li>
  165.                     <li> <a href=""> PHP视频</a></li>
  166.                     <li> <a href=""> PHP实战</a></li>
  167.                     <li> <a href=""> PHP代码</a></li>
  168.                     <li> <a href=""> PHP手册</a></li>
  169.                     <li> <a href=""> 词条</a></li>
  170.                     <li> <a href=""> 手记</a></li>
  171.                     <li> <a href=""> 编程词典</a></li>
  172.                     <li> <a href=""> php培训</a></li>
  173.                 </ul>
  174.                 <p>php中文网：公益在线php培训，帮助PHP学习者快速成长！</p>
  175.                 <div>
  176.                     <p>Copyright 2014-2020 www.php.cn All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1 </p>
  177.                     <img src="https://www.php.cn/static/images/foot_line.gif" alt="">
  178.                     <a href="">关于我们</a>
  179.                     <a href="">免责申明</a>
  180.                     <a href="">赞助与捐赠</a>
  181.                     <a href="">广告合作</a>
  182.                 </div>
  183.             </div>
  184.             <div class="code"><img src="images/phpcn_erwei.jpg" alt=""></div>
  185.             <div class="code"><img src="images/qq.jpg" alt=""></div>
  186.         </div>
  187.     </footer>
  188. </body>
  189. </html>

css代码

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  7. li {
  8.     list-style: none;
  9. }
  11. a {
  12.     color: #7b7b7b;
  13.     text-decoration: none;
  14. }
  16. html {
  17.     font-size: 14px;
  18.     height: 100vh;
  19. }
  20. @import '../icon-font/iconfont.css';
  21. body {
  22.     display: grid;
  23.     grid-template-rows: 60px 1fr 175px;
  24. }
  27. /* 头部菜单css */
  29. header {
  30.     background-color: black;
  31.     display: grid;
  32.     grid-template-columns: 140px 1fr 150px;
  33.     place-items: center start;
  34. }
  36. header .logo img {
  37.     width: 140px;
  38.     height: 60px;
  39. }
  41. header .menu {
  42.     height: 52px;
  43.     font-size: 1rem;
  44.     display: grid;
  45.     gap: 5px;
  46.     place-content: center;
  47.     grid-template-columns: repeat(9, 9rem);
  48. }
  50. header .menu li {
  51.     place-self: center;
  52.     width: 80px;
  53.     height: 52px;
  54.     line-height: 52px;
  55.     text-align: center;
  56. }
  58. header .menu .icon-arrow-down-filling {
  59.     color: #aaa;
  60. }
  62. header .menu .icon-direction-down-circle {
  63.     color: #FF5722;
  64. }
  66. header .menu .icon-play {
  67.     color: #FF5722;
  68. }
  70. header .menu a {
  71.     border-bottom: 5px solid black;
  72. }
  74. header .menu li:hover {
  75.     border-bottom: 5px solid #5FB878;
  76.     transition: .1s;
  77. }
  79. header .menu a {
  80.     color: #aaa;
  81.     ;
  82. }
  84. header .login {
  85.     /* background-color: aqua; */
  86.     display: grid;
  87.     grid-template-columns: repeat(2, 5rem);
  88.     place-items: start end;
  89.     grid-template-rows: 3rem;
  90.     place-items: center;
  91. }
  93. header .login a {
  94.     font-weight: bold;
  95.     color: #aaa;
  96. }
  99. /* 主体css */
  101. main {
  102.     /* min-height: 82.3vh; */
  103.     /* background-color: lightslategray; */
  104.     display: grid;
  105.     place-content: stretch center;
  106. }
  108. main .top {
  109.     width: 1200px;
  110.     height: 510px;
  111.     display: grid;
  112.     margin: 20px 0;
  113.     grid-template-columns: 216px 1fr;
  114.     box-shadow: 1px 1px 10px #bbbbbb;
  115.     border-radius: 10px;
  116. }
  119. /* 主体 > 头部左侧菜单栏css */
  121. main .top .top-left {
  122.     height: 510px;
  123.     background-color: #2B333B;
  124.     border-radius: 10px 0 0 10px;
  125.     padding-top: 15px;
  126. }
  128. main .top .top-left li {
  129.     line-height: 50px;
  130.     padding: 5px 10px 5px 20px;
  131.     color: #999;
  132.     display: grid;
  133.     grid-template-columns: 1fr 20px;
  134. }
  136. main .top .top-left li:hover {
  137.     background-color: #6B7176;
  138. }
  140. main .top .top-left li a {
  141.     color: #999;
  142.     font-size: 1.2rem;
  143. }
  145. main .top .top-left li a:hover {
  146.     color: white;
  147. }
  149. main .top .top-right {
  150.     /* border-radius: 0 10px 0 0; */
  151. }
  154. /* 主体 > 头部 > 顶部菜单栏css */
  156. main .top .top-right .top-nav {
  157.     display: grid;
  158.     grid-template-columns: repeat(7, 1fr) 3fr;
  159.     grid-template-rows: 60px;
  160.     gap: 5px;
  161. }
  163. main .top .top-right .top-nav li {
  164.     line-height: 60px;
  165.     text-align: center;
  166. }
  168. main .top .top-right .top-nav li a {
  169.     color: #333;
  170. }
  172. main .top .top-right .top-nav li a:hover {
  173.     color: #999;
  174. }
  176. main .top .top-right .top-nav span {
  177.     font-size: 0.9rem;
  178.     color: white;
  179.     padding: 1px 5px;
  180.     border-radius: 2px;
  181. }
  183. main .top .top-right .top-nav span.orange {
  184.     background-color: orange;
  185. }
  187. main .top .top-right .top-nav span.darkslategray {
  188.     background-color: darkslategray;
  189. }
  191. main .top .top-right .top-nav span.orangered {
  192.     background-color: orangered;
  193. }
  195. main .top .top-right .top-search {
  196.     display: grid;
  197.     width: 260px;
  198.     grid-template-columns: 4fr 1fr;
  199.     place-self: center start;
  200.     background-color: #F1F0F0;
  201.     border-bottom: 1px solid #fff;
  202. }
  204. main .top .top-right .top-search:hover {
  205.     border-bottom: 1px solid #d6d6d6;
  206.     transition: .3s;
  207. }
  209. main .top .top-right .top-search input {
  210.     border: none;
  211.     outline: none;
  212.     height: 40px;
  213.     padding-left: 10px;
  214.     background-color: #F1F0F0;
  215. }
  217. main .top .top-right .top-search span {
  218.     padding-right: 10px;
  219.     text-align: center;
  220.     line-height: 40px;
  221.     background-color: #F1F0F0;
  222.     color: #b9b9b9;
  223.     cursor: pointer;
  224. }
  226. main .top .top-right .top-slider img {
  227.     width: 984px;
  228. }
  230. main .top .top-right .top-img {
  231.     width: 984px;
  232.     display: grid;
  233.     grid-template-columns: repeat(4, 1fr);
  234.     grid-template-rows: 108px;
  235.     place-items: center;
  236. }
  238. main .top .top-right .top-img img {
  239.     border-radius: 5px;
  240. }
  243. /* 主体 > 广告图 */
  245. main .ad img {
  246.     border-radius: 5px;
  247. }
  250. /* 主体 > 第二个框架 */
  252. main .main-two {
  253.     width: 1200px;
  254.     height: 420px;
  255.     display: grid;
  256.     gap: 10px;
  257.     margin: 20px 0;
  258.     grid-template-columns: 300px 620px 260px;
  259. }
  261. main .main-two h2 {
  262.     font-size: 1.1rem;
  263.     padding: 3px;
  264.     margin: 0 5px;
  265.     line-height: 30px;
  266.     color: #292727;
  267. }
  269. main .main-two .toutao {
  270.     box-shadow: 2px 2px 10px #e1e1e1;
  271.     border-radius: 10px;
  272.     padding: 10px;
  273.     display: grid;
  274. }
  276. main .main-two .toutao li {
  277.     line-height: 30px;
  278. }
  280. main .main-two .toutao li a {
  281.     color: #444;
  282. }
  284. main .main-two .toutao li a:hover {
  285.     color: #999;
  286. }
  288. .toutao-title {
  289.     border-bottom: 1px solid #f0f0f0;
  290. }
  292. main .main-two .course {
  293.     display: grid;
  294.     gap: 10px;
  295.     grid-template-columns: repeat(3, 170px);
  296.     grid-template-rows: auto repeat(2, 150px);
  297.     place-content: space-evenly;
  298.     box-shadow: 2px 2px 10px #e1e1e1;
  299.     border-radius: 10px;
  300. }
  302. .course-title {
  303.     grid-area: span 1 / 3 span;
  304.     margin-top: -6px;
  305.     border-bottom: 1px solid #f0f0f0;
  306. }
  308. main .main-two .course li {
  309.     box-shadow: 2px 2px 10px #e1e1e1;
  310.     position: relative;
  311.     display: grid;
  312.     margin-bottom: 10px;
  313.     grid-template-rows: 2fr 1fr;
  314.     border-radius: 10px;
  315. }
  317. main .main-two .course li a {
  318.     width: 170px;
  319.     background-color: white;
  320. }
  322. main .main-two .course li a:last-of-type {
  323.     height: 50px;
  324.     position: absolute;
  325.     top: 70px;
  326.     border-radius: 10px;
  327.     padding: 10px;
  328. }
  330. main .main-two .course li span {
  331.     background-color: #93999F;
  332.     padding: 1px 3px;
  333.     margin-right: 5px;
  334.     color: white;
  335.     font-size: 0.8rem;
  336. }
  338. main .main-two .course img {
  339.     width: 170px;
  340.     border-radius: 10px;
  341. }
  343. main .main-two .course img:hover {
  344.     opacity: 0.7;
  345.     transition: 0.2s;
  346. }
  348. main .main-two .notebook {
  349.     display: grid;
  350.     gap: 5px;
  351.     grid-template-rows: auto repeat(6, 1fr);
  352.     box-shadow: 2px 2px 10px #e1e1e1;
  353.     border-radius: 10px;
  354. }
  356. main .main-two .notebook-title {
  357.     display: grid;
  358.     border-bottom: 1px solid #f0f0f0;
  359.     grid-template-columns: 1fr 40px;
  360.     margin: 10px 10px 0 10px;
  361.     place-items: center start;
  362. }
  364. main .main-two .notebook img {
  365.     width: 40px;
  366.     height: 40px;
  367.     grid-area: span 2;
  368. }
  370. main .main-two .notebook li {
  371.     display: grid;
  372.     padding: 5px;
  373.     gap: 5px;
  374.     grid-template-columns: 40px 1fr;
  375.     grid-template-rows: 20px 20px;
  376.     place-items: center start;
  377. }
  379. main .main-two .notebook li a {
  380.     color: #333;
  381. }
  383. main .main-two .notebook li a:hover {
  384.     color: #999;
  385. }
  388. /* 底部css */
  390. footer {
  391.     background-color: #393D49;
  392.     display: grid;
  393.     place-content: stretch center;
  394. }
  396. footer .footer-main {
  397.     width: 1200px;
  398.     display: grid;
  399.     gap: 5px;
  400.     grid-template-columns: 1fr 10rem 10rem;
  401. }
  403. footer .footer-main .footer-content {
  404.     display: grid;
  405.     grid-template-rows: repeat(3, 1fr);
  406. }
  408. footer .footer-main .footer-content>ul {
  409.     display: grid;
  410.     place-content: end start;
  411.     grid-template-columns: repeat(9, auto);
  412.     gap: 10px;
  413. }
  415. footer .footer-main .footer-content>ul a {
  416.     color: #eee;
  417. }
  419. footer .footer-main .footer-content>div {
  420.     display: grid;
  421.     color: #979797;
  422.     place-content: start;
  423.     grid-template-columns: 7fr 25px repeat(4, 1fr);
  424. }
  426. footer .footer-main .footer-content>p {
  427.     font-size: 12px;
  428.     place-self: center start;
  429.     color: #979797;
  430. }
  432. footer .footer-main .footer-content>div>p {
  433.     font-size: 10.5px;
  434.     place-self: center start;
  435. }
  437. footer .footer-main .footer-content>div>img {
  438.     width: 20px;
  439. }
  441. footer .footer-main .code {
  442.     place-self: center;
  443. }
  445. footer .footer-main .code img {
  446.     width: 100px;
  447. }

3. 理解grid的媒体查询与专业的媒体查询有什么区别？

Grid的媒体查询，根据Grid容器的宽度，除以最小最大值之间的项目宽度，获得auto-fit的值，垂直方向绘制auto-fit个列宽的网格，水平方向也类似绘制，空轨折叠，不占据容器空间。

专业的媒体查询，不是依据某元素的父级容器宽度计算，以屏幕宽度查询

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