search

博客列表 >Grid项目在网格单元和容器中对齐的相关属性

Grid项目在网格单元和容器中对齐的相关属性

xosing的博客
xosing的博客原创
2020年12月28日 12:33:29815浏览

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个列宽的网格，水平方向也类似绘制，空轨折叠，不占据容器空间。

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

上一条：Html 标签理解及应用下一条：h5+plus检查手机上是否已经安装了百度地图、腾讯地图、高德地图，如果安装了就打开地图并导航过去
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多