Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid对齐属性|grid仿写php中文网局部|grid媒体查询
Blogger Information
Blog 41
fans 0
comment 0
visits 41138
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对齐属性|grid仿写php中文网局部|grid媒体查询
幸福敲门的博客
Original
728 people have browsed it

一、plce-sele: 某一个项目在网络单元中的对齐方式

序号 属性 说明
1 start 起始位置
2 end 结束位置
3 center 居中对齐
4 stretch 拉伸
5 space-around 在每个网格项之间放置一个均匀的空间，两端放置一半的空间
6 space-between 在每个网格项之间放置一个均匀的空间，两端没有空间
7 space-evenly 在每个网格项目之间放置一个均匀的空间，两端放置一个均匀的空间

实例：在grid三行四列容器中的对齐方式

  1. <!DOCTYPE  html>
  2. <html  lang="en">
  3. <head>
  4.      <meta   charset="utf-8">
  5.      <meta   name="viewport" content="width=divice-width,initial-scale=1.0">
  6.      <title>plce-sele对齐方式演示</title>
  7.        <style>
  8.          .container{
  9.             height: 40em;
  10.             width:50em;
  11.             border: 2px solid #000;
  12.             margin: auto;
  13.             display: grid;
  14.             grid-template-columns: repeat(4,10em);
  15.             grid-template-rows: repeat(3,10em);
  16.             gap: 0.5em;
  17.         /* 所有项目挤到容器中间 */ 
  18.         /*  place-content:center center; */ 
  19.         /* 所有项目对齐到右下角 */
  20.         /* place-content:end end; */
  21.         /* 分布均匀的空间，左右两端没有空间，两个值都一样可以只写一个 */ 
  22.          /*  place-content:space-between space-between; */
  23.          /* 分布均匀的空间，左右两端放置一半的空间*/
  24.         /* / place-content: space-around space-between;*/
  25.         }
  26.         .container>.item{
  27.             width:10em;
  28.             height: 10em;
  29.             background-color:red;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.      <div  class="container">
  35.      <div  class="item"></div>
  36.      <div  class="item"></div>
  37.      <div  class="item"></div>
  38.      <div  class="item"></div>
  39.      <div  class="item"></div>
  40.      <div  class="item"></div>
  41.      <div  class="item"></div>
  42.      <div  class="item"></div>
  43.      <div  class="item"></div>
  44.      <div  class="item"></div>
  45.      <div  class="item"></div>
  46.      <div  class="item"></div>
  47.     </div>
  48. </body>
  49. </html>

图示：
grid3行四列图示

所有项目挤到容器中间在.container加入代码

  1. place-content:center center;

图示：

所有项目对齐到右下角 在.container加入代码

  1.   place-content:end end

图示：

二、设置容器中的“所有项目”在网格单元中的对齐方式

place-items: 垂直方向 水平方向;place-items是align-items 与 justify-items的缩写，一个设置垂直方向，一个是设置水平方向的对齐方式。
place-items: start center
当第二个值与第一个值相同时,可以省第二个值
place-items: center;

place-items值 说明
place-items: initial; place-items: auto; place-items: unset; 默认值，垂直居上，水平居左
place-items: stretch 拉伸（取消项目固定尺寸，生效
place-items: center 垂直水平都居中
place-items: inherit 继承初始值，垂直居上，水平居左
place-items: start auto 垂直居上，水平居左
place-items: start norma 垂直居上，水平正常居左（取消项目固定尺寸则拉伸）
place-items: start end 垂直居上，水平居右
place-items: end start 垂直居下，水平居左

以上均提供了完整的代码这些只需要在.container中去改变相关的值就可以

三、place-self 某个项目在单元格中的对齐

实例：

  1. <!DOCTYPE  html>
  2. <html  lang="en">
  3. <head>
  4.      <meta   charset="utf-8">
  5.      <meta   name="viewport" content="width=divice-width,initial-scale=1.0">
  6.      <title>space-self在网络单元中的对齐方式</title>
  7.      <style>
  8.         .container{
  9.             height: 40em;
  10.             width:50em;
  11.             border: 2px solid #000;
  12.             margin: auto;
  13.             display: grid;
  14.             grid-template-columns: repeat(4,10em);
  15.             grid-template-rows: repeat(3,10em);
  16.             gap: 0.5em;
  18.         }
  19.      .container>.item{  
  20.            width:10em;
  21.            height: 10em;
  22.            background-color:red;
  23.        }
  24.    /*设置第10个item到所在网格的中间*/
  25.         .container>.item:nth-of-type(10){
  26.          place-self:center ;
  27.          background-color: Black;
  28.       }
  29.   </style>
  30. </head>
  31.    <body>
  32.      <div  class="container">
  33.      <div  class="item"></div>
  34.      <div  class="item"></div>
  35.      <div  class="item"></div>
  36.      <div  class="item"></div>
  37.      <div  class="item"></div>
  38.      <div  class="item"></div>
  39.      <div  class="item"></div>
  40.      <div  class="item"></div>
  41.      <div  class="item"></div>
  42.      <div  class="item"></div>
  43.      <div  class="item"></div>
  44.      <div  class="item"></div>
  45.     </div>
  46. </body>
  47. </html>

图示：
space-self对齐

2.place-self 某个项目在 网格区域 中的对齐

  1. place-content 网格单元在容器中的对齐
    4.网格单元作为整体在容器中的对齐
    以上均提供了完整的代码这些只需要在.container中去改变相关的值就可以

四、grid的媒体查询

.grid的媒体查询，根据grid容器的宽度，除以最小最大值之间的项目宽度，获得auto-fit的值，垂直方向绘制auto-fit个列宽的网格，水平方向也类似绘制，空轨折叠，不占据容器空间。
.专业的媒体查询，不是依据某元素的父级容器宽度计算，以屏幕宽度查询

五、grid布局仿写php中文网首页主要组件（部分）

css代码部分

  1. *{
  2.     padding: 0;
  3.     margin: 0;
  4.     box-sizing: border-box;
  5. }
  6. body{
  7.     background-color: #F0F2F4;
  8. }
  9. a{
  10.     text-decoration: none;
  11.     color:#B3B3B3;
  12. }
  13. li{
  14.     list-style: none;
  15. }
  16. header{
  17.     height: 60px;
  18.     background-color: #000000;
  19.     display: grid;
  20.     grid-template-columns: repeat(11,1fr);
  21.     place-items: center ;
  22. }
  24. footer {
  25.             height: 160px;
  26.             color: #eee;
  27.             background-color: #444;
  28.         }
  30. header a:first-of-type{
  31.     background:linear-gradient(to top, #DE3326 ,#EB605A);
  32.     padding: .5em;
  33.     border-radius: 48%;
  34.     color:white;
  35. }
  36. main > .nav{
  37.     margin:2em auto;
  38.     width: 1200px;
  39.     display: grid;
  40.     grid-template-columns: 220px 980px;
  41.     grid-template-rows: 60px 328px 120px;
  42. }
  43. main > .nav > .navlift{
  44.     grid-area: 1 / 1 / span 3 / span 1;
  45.     display: grid;
  46.     grid-template-rows: repeat(8,1fr);
  47.     place-items: center start ;
  48.     padding-left: 2em;
  49.     background-color: #2B333B;
  50.     color:#AAADB0;
  51.     border-radius: .5em 0 0 .5em;
  52. }
  54. main > .nav > .navtop{
  55.     grid-area: 1 / 2 / sapn 1 / span 1;
  56.     display: grid;
  57.     grid-template-columns: repeat(9,1fr);
  58.     padding-left: 1em;
  59.     line-height: 80px;
  60.     background-color: #FFFFFF;
  61.     font-size: 1.1rem;
  62. }
  64. main > .nav > .navtop > li >input{
  65.     grid-area: span 2;
  66. }
  67. main > .nav > .main_banner{
  68.     grid-area: 2 / 2 ;
  69. }
  70. main > .nav > .main_banner >img{
  71.     width:980px;
  72.     height: 328px;
  73. }
  74. main > .nav > .navbottom{
  75.     grid-area: 3 /2 ;
  76.     display: grid;
  77.     grid-template-columns: repeat(4,1fr);
  78.     place-items: center;
  79. }
  80. main > .nav > .navbottom img{
  81.     border-radius:.5em;
  82. }
  83.   /* ------------------------------ */
  84. main > .phprmjpk{
  85.     background-color: #fff;
  86.     width:1200px;
  87.     padding: 15px;
  88.     margin:30px auto;
  89. }
  90. main > .phprmjpk >h3{
  91.     text-align: center;
  92. }
  93. main > .phprmjpk > ul{
  94.     display: grid;
  95.     grid-template-columns: repeat(5,1fr);
  96.     grid-template-rows: repeat(3,1fr);
  97.     gap: 20px;
  98.     height: 560px;
  99.     margin:10px auto;
  100. }
  101. main > .phprmjpk > ul >*{
  102.     background-color: lightcyan;
  103.     border-radius: 10px;
  104. }
  105. main > .phprmjpk> ul > li>img{
  106.     width:100%;
  107.     height: 100%;
  108.     border-radius:20px;
  109. }
  110. main > .phprmjpk > ul >:first-of-type{
  111.     grid-area: span 2;
  112. }
  113.   /* ------------------------------ */
  114.   main > .phpjjxx{
  115.     background-color: #fff;
  116.     width:1200px;
  117.     padding: 15px;
  118.     margin:30px auto;
  119. }
  120. main > .phpjjxx >h3{
  121.     text-align: center;
  122. }
  123. main > .phpjjxx > ul{
  124.     display: grid;
  125.     grid-template-columns: repeat(5,1fr);
  126.     grid-template-rows: repeat(3,1fr);
  127.     gap: 20px;
  128.     height: 560px;
  129.     margin:10px auto;
  130. }
  131. main > .phpjjxx > ul >*{
  132.     background-color: lightcyan;
  133.     border-radius: 10px;
  134. }
  135. main > .phpjjxx> ul > li>img{
  136.     width:100%;
  137.     height: 100%;
  138.     border-radius:20px;
  139. }
  140. main > .phpjjxx > ul >:first-of-type{
  141.     grid-area: span 2;
  142. }

网页代码部分

  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>仿php.cn首页的部分组件</title>
  7.     <link rel="stylesheet" href="copyphp.css">
  8. </head>
  9. <body>
  10.     <header>
  11.         <a href="">php中文网</a>
  12.         <a href="https://www.php.cn/">
  13.             <p>首页</p>
  14.         </a>
  15.         <a href="https://www.php.cn/course.html">
  16.             <p>视频教程</p>
  17.         </a>
  18.         <a href="https://www.php.cn/course/type/3.html">
  19.             <p>入门教程</p>
  20.         </a>
  21.         <a href="https://www.php.cn/wenda.html">
  22.             <p>社区问答</p>
  23.         </a>
  24.         <a href="https://www.php.cn/article.html">
  25.             <p>技术文章</p>
  26.         </a>
  27.         <a href="https://www.php.cn/xiazai/">
  28.             <p>资源下载</p>
  29.         </a>
  30.         <a href="https://www.php.cn/dic.html">
  31.             <p>编程词典</p>
  32.         </a>
  33.         <a href="https://www.php.cn/xiazai/gongju">
  34.             <p>工具下载</p>
  35.         </a>
  36.         <a href="https://www.php.cn/k.html">
  37.             <p>php培训</p>
  38.         </a>
  39.     </header>
  40.     <main>
  41.         <div class="nav">
  42.             <ul class="navlift">
  43.                 <li>php开发</li>
  44.                 <li>前端开发</li>
  45.                 <li>服务端开发</li>
  46.                 <li>移动开发</li>
  47.                 <li>数据库</li>
  48.                 <li>服务器运维&下载</li>
  49.                 <li>在线工具箱</li>
  50.                 <li>常用类库</li>
  51.             </ul>
  52.             <ul class="navtop">
  53.                 <li>php头条</li>
  54.                 <li>独狐九贱</li>
  55.                 <li>学习路线</li>
  56.                 <li>在线工具</li>
  57.                 <li>趣味课堂</li>
  58.                 <li>社区问答</li>
  59.                 <li>课程直播</li>
  60.                 <li><input type="text" value="输入关键词搜索"></li>
  61.             </ul>
  62.             <div class="main_banner"><img src="img/1.jpg" alt=""></div>
  63.             <ul class="navbottom">
  64.                 <li><img src="img/01.jpg" alt=""> </li>
  65.                 <li><img src="img/02.jpg" alt=""></li>
  66.                 <li><img src="img/03.jpg" alt=""></li>
  67.                 <li><img src="img/04.jpg" alt=""></li>
  68.             </ul>
  69.         </div>
  71.            <!-- 课程列表区 -->
  72.         <div class="phprmjpk">
  73.             <h3>&lt;\&gt;php入门精品课程&lt;\&gt;</h3>
  74.             <ul class="class_list">
  75.                 <li>
  76.                     <img src="img/index_learn_first.jpg"alt="" ></img>
  77.                 </li>
  78.                 <li>
  79.                     <img src="img/5b63c72c61569244.png"alt="" ></img>
  80.                 </li>
  81.                 <li>
  82.                     <img src="img/5aa23f0ded921649.jpg" alt="" ></img>
  83.                 </li>
  84.                 <li>
  85.                     <img src="img/5ab346fc62ce4221.jpg" alt="" ></img>
  86.                 </li>
  87.                 <li>
  88.                     <img src="img/5acc118f11d6b969.jpg" alt="" ></img>
  89.                 </li>
  90.                 <li>
  91.                     <img src="img/5d1c6e0d2b744633.jpg" alt="" ></img>
  92.                 </li>
  93.                 <li>
  94.                     <img src="img/5a9fb97057b15707.jpeg" alt=""></img>
  95.                 </li>
  96.                 <li>
  97.                     <img src="img/5d24019911a24370.jpg" alt=""></img>
  98.                 </li>
  99.                 <li>
  100.                     <img src="img/5a699f1b2da2b398.jpg" alt=""></img>
  101.                 </li>
  102.                 <li>
  103.                     <img src="img/5cecd27a4348b582.jpg" alt=""></img>
  104.                 </li>
  105.                 <li>
  106.                     <img src="img/5d1c6dfc9eb09885.jpg" alt=""></img>
  107.                 </li>
  108.                 <li>
  109.                     <img src="img/5a13c87351613730.jpg" alt=""></img>
  110.                 </li>
  111.                 <li>
  112.                     <img src="img/5b19ef2990649817.jpg"alt=""></img>
  113.                 </li>
  114.                 <li>
  115.                     <img src="img/5d240300be85b731.jpg"alt=""></img>
  116.                 </li>
  117.             </ul>
  118.         </div> 
  119.            <!-- 课程列表区 -->
  120.         <div class="phpjjxx">
  121.             <h3>&lt;\&gt;php进阶学习路径&lt;\&gt;</h3>
  122.             <ul class="class_list">
  123.                 <li>
  124.                     <img src="img/index_learn_middel.jpg"></img>
  125.                 </li>
  126.                 <li>
  127.                     <img src="img/5d1c6e1577037989.jpg"></img>
  128.                 </li>
  129.                 <li>
  130.                     <img src="img/5d24010108e3d268.jpg"></img>
  131.                 </li>
  132.                 <li>
  133.                     <img src="img/5a372b552a2c4233.jpg"></img>
  134.                 </li>
  135.                 <li>
  136.                     <img src="img/5a3728258bf9f213.jpg"></img>
  137.                 </li>
  138.                 <li>
  139.                     <img src="img/5a373991d9cd9819.jpg"></img>
  140.                 </li>
  141.                 <li>
  142.                     <img src="img/5a530c9c6c775990.jpg"></img>
  143.                 </li>
  144.                 <li>
  145.                     <img src="img/5a5322a085219472.jpg"></img>
  146.                 </li>
  147.                 <li>
  148.                     <img src="img/5a53090b27254106.jpg"></img>
  149.                 </li>
  150.                 <li>
  151.                     <img src="img/5d22b615e56bf130.jpg"></img>
  152.                 </li>
  153.                 <li>
  154.                     <img src="img/5d242759adb88970.jpg"></img>
  155.                 </li>
  156.                 <li>
  157.                     <img src="img/5d2426f409839992.jpg"></img>
  158.                 </li>
  159.                 <li>
  160.                     <img src="img/5d24230536122573.jpg"></img>
  161.                 </li>
  162.                 <li>
  163.                     <img src="img/5d2402695ce37351.jpg"></img>
  164.                 </li>
  165.             </ul>
  166.         </div>  
  168.     </main>
  169.     <footer></footer>
  170. </body>
  171. </html>

图示：
仿php中文网头部
仿php中文网底部

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