Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 项目在grid容器中的对齐方式以及利用grid布局仿写php中文网
Blogger Information
Blog 37
fans 1
comment 0
visits 32635
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中文网
Jason Pu?
Original
938 people have browsed it

一.所有项目整体在grid容器中的对齐方式

space-content：有时候网格合计大小可能小于其网格容器大小，我们需要调整所有网格在网格容器中的整体对齐方式，space-content是justify-content(设置水平方向)和align-content(设置垂直方向)的简写方式。
每个方向可以选择以下7个值：

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

例如我们做一个大盒子并设置为grid容器，里面放6个grid项目，使6个项目小于容器，并设置6个项目在容器中的整体对齐方式

代码如下：

  1.     <style>
  2.         .container{
  3.             height: 30em;
  4.             width:50em;
  5.             border: 1px solid #000;
  6.             margin: auto;
  7.             display: grid;
  8.             grid-template-columns: repeat(3,10em);
  9.             grid-template-rows: repeat(2,10em);
  10.             gap: 0.2em;
  11.         }
  12.         .container>.items{
  13.             width:10em;
  14.             height: 10em;
  15.             background-color:skyblue;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div class="container">
  21.         <div class="items"></div>
  22.         <div class="items"></div>
  23.         <div class="items"></div>
  24.         <div class="items"></div>
  25.         <div class="items"></div>
  26.         <div class="items"></div>
  27.     </div>
  28. </body>

经过运行后我们发现，所有项目都挤在容器中的左上角，如图：

如果我们想把所有项目在容器中平均分割空间，只需要在容器中(.container)添加代码:

  1. place-content:space-evenly space-evenly;

我们得到了理想的结果，如图：

当然还有其它很多组合，例如：

  1. /* 所有项目挤到容器中间 */
  2.  place-content:center center;
  3. /* 所有项目对齐到右下角 */
  4. place-content:end end;
  6. /* 分布均匀的空间，左右两端没有空间，两个值都一样可以只写一个 */
  7.  place-content:space-between space-between;
  8. /* 分布均匀的空间，左右两端放置一半的空间*/
  9. place-content: space-around space-between;

二.项目在网格单元中的对齐方式

**有时候我们设置的项目比网格单元小，我们可以使用place-items进行设置，place-items是align-items 与 justify-items的缩写，一个设置垂直方向，一个是设置水平方向的对齐方式。

每个方向可以设置4个值，当第二个值与第一个值相同时,可以省第二个值，有以下四种设置方向：：

属性 说明
start 起始位置
end 结束位置
center 居中
stretch 拉伸(如果没有设置项目大小情况下，是默认值)

下面我们进行演示：
html部分：

  1. <div class="container">
  2.         <div class="items"></div>
  3.         <div class="items"></div>
  4.         <div class="items"></div>
  5.         <div class="items"></div>
  6.         <div class="items"></div>
  7.         <div class="items"></div>
  8.         <div class="items"></div>
  9.         <div class="items"></div>
  10.         <div class="items"></div>
  11.     </div>

css部分我们把9个项目设置的故意比网格单元小

  1.  <style>
  2.         .container{
  3.             border: 1px solid #000;
  4.             margin: auto;
  5.             display: grid;
  6.             grid-template-columns: repeat(3,10em);
  7.             grid-template-rows: repeat(3,10em);
  8.             gap: 0.1em;
  9.         }
  10.         .container>.items{
  11.             width:8em;
  12.             height: 8em;
  13.             background-color:skyblue; 
  14.             border:1px solid #000; 
  15.         }
  17.     </style>

看到的效果如下图：

现在我们对place-items进行设置：

  1. .container{
  2.             border: 1px solid #000;
  3.             margin: auto;
  4.             display: grid;
  5.             grid-template-columns: repeat(3,10em);
  6.             grid-template-rows: repeat(3,10em);
  7.             gap: 0.1em;
  8.             /* 设置项目到网格中间 */
  9.             place-items:center;
  10.         }

项目成功的走到了网格中间

如果我们要项目调到网格其它位置可以进行其它组合，如果两个方向的参数一样，可以只写一个参数

  1. /*垂直居中，水平开始方向*/
  2.  place-items: center start;

三.用space-self设置项目在单个单元格中的对齐方式

如果只设置单个项目在网格单元中的位置，只需要在css中用选择器找到这个项目使用place-self进行设置就可以了，网格单元包括：单元格, 网格区域(多个单元格组成)

例如我们要设置第6个items到所在网格的中间：

  1. .container>.items:nth-of-type(6){
  2.             place-self:center ;
  3.             background-color: red;
  4.         }

gird实战部分：

1：仿layui12栅格
思路：用css写一个container，container里面写一个row用gird设置成12列,再设置好12个分别跨1列到12列的网格单位，需要的地方引入就是了
以下是css部分：

  1. *{
  2.             padding: 0;
  3.             margin: 0;
  4.             box-sizing: border-box;
  5.         }
  6.         body{
  7.             width:100vw;
  8.             height: 100vh;
  9.             display: grid;
  10.             place-content: center;
  11.         }
  12.         .container{
  13.             min-width:80vw;
  14.             display: grid;
  15.             gap: .5;
  16.         }
  17.         .container>.row{
  18.             display: grid;
  19.             grid-template-columns: repeat(12,1fr);
  20.         }
  21.         .container>.row>.items{
  22.             border:1px solid #000;
  23.             padding:1em;
  24.             text-align: center;
  25.         }
  26.         .col-12{
  27.             grid-area:auto / span 12;
  28.         }
  29.         .col-11{
  30.             grid-area:auto / span 11;
  31.         }
  32.         .col-10{
  33.             grid-area:auto / span 10;
  34.         }
  35.         .col-9{
  36.             grid-area:auto / span 9;
  37.         }
  38.         .col-8{
  39.             grid-area:auto / span 8;
  40.         }
  41.         .col-7{
  42.             grid-area:auto / span 7;
  43.         }
  44.         .col-6{
  45.             grid-area:auto / span 6;
  46.         }
  47.         .col-5{
  48.             grid-area:auto / span 5;
  49.         }
  50.         .col-5{
  51.             grid-area:auto / span 4;
  52.         }
  53.         .col-3{
  54.             grid-area:auto / span 3;
  55.         }
  56.         .col-2{
  57.             grid-area:auto / span 2;
  58.         }
  59.         .col-1{
  60.             grid-area:auto / span 1;
  61.         }

写好过后用html验证一下

  1. <div class="items col-12"></div>
  2. <div class="items col-6"></div><div class="items col-6"></div>
  3. <div class="items col-3"></div><div class="items col-9"></div>

运行效果如下：

2:用gird快速实现php主页主要部件布局
html部分代码如下：

  2.     <title>php中文网</title>
  3.     <link rel="stylesheet" href="copyphp.css">
  4. </head>
  5. <body>
  6.     <header>
  7.         <a href="">php中文网</a>
  8.         <a href="">
  9.             <p>首页</p>
  10.         </a>
  11.         <a href="">
  12.             <p>视频教程</p>
  13.         </a>
  14.         <a href="">
  15.             <p>入门教程</p>
  16.         </a>
  17.         <a href="">
  18.             <p>社区问答</p>
  19.         </a>
  20.         <a href="">
  21.             <p>技术文章</p>
  22.         </a>
  23.         <a href="">
  24.             <p>资源下载</p>
  25.         </a>
  26.         <a href="">
  27.             <p>编程词典</p>
  28.         </a>
  29.         <a href="">
  30.             <p>工具下载</p>
  31.         </a>
  32.         <a href="">
  33.             <p>php培训</p>
  34.         </a>
  36.     </header>
  38.     <main>
  39.         <div class="nav">
  40.             <ul class="navlift">
  41.                 <li>php开发</li>
  42.                 <li>前端开发</li>
  43.                 <li>服务端开发</li>
  44.                 <li>移动开发</li>
  45.                 <li>数据库</li>
  46.                 <li>服务器运维&下载</li>
  47.                 <li>在线工具箱</li>
  48.                 <li>常用类库</li>
  49.             </ul>
  50.             <ul class="navtop">
  51.                 <li>php头条</li>
  52.                 <li>独狐九贱</li>
  53.                 <li>学习路线</li>
  54.                 <li>在线工具</li>
  55.                 <li>趣味课堂</li>
  56.                 <li>社区问答</li>
  57.                 <li>课程直播</li>
  58.                 <li><input type="text" value="输入关键词搜索"></li>
  59.             </ul>
  60.             <div class="main_banner"><img src="phpimg/phpbanner.png" alt=""></div>
  61.             <ul class="navbottom">
  62.                 <li><img src="phpimg/php1.jpg" alt=""> </li>
  63.                 <li><img src="phpimg/php2.jpg" alt=""></li>
  64.                 <li><img src="phpimg/php3.jpg" alt=""></li>
  65.                 <li><img src="phpimg/php4.png" alt=""></li>
  66.             </ul>
  67.         </div>
  69.         <div class="rmjpk">
  70.             <h3>&lt;\&gt;php入门精品课程&lt;\&gt;</h3>
  71.             <ul class="class_list">
  72.                 <li>
  73.                     <img src="phpimg/phpjpk1.jpg"></img>
  74.                 </li>
  75.                 <li>
  76.                     <img src="phpimg/phpjpk3.jpg"></img>
  77.                 </li>
  78.                 <li>
  79.                     <img src="phpimg/phpjpk3.jpg"></img>
  80.                 </li>
  81.                 <li>
  82.                     <img src="phpimg/phpjpk4.jpg"></img>
  83.                 </li>
  84.                 <li>
  85.                     <img src="phpimg/phpjpk5.jpg"></img>
  86.                 </li>
  87.                 <li>
  88.                     <img src="phpimg/phpjpk6.jpg"></img>
  89.                 </li>
  90.                 <li>
  91.                     <img src="phpimg/phpjpk8.jpg"></img>
  92.                 </li>
  93.                 <li>
  94.                     <img src="phpimg/phpjpk8.jpg"></img>
  95.                 </li>
  96.                 <li>
  97.                     <img src="phpimg/phpjpk9.jpg"></img>
  98.                 </li>
  99.                 <li>
  100.                     <img src="phpimg/phpjpk10.jpg"></img>
  101.                 </li>
  102.                 <li>
  103.                     <img src="phpimg/phpjpk11.jpg"></img>
  104.                 </li>
  105.                 <li>
  106.                     <img src="phpimg/phpjpk12.jpg"></img>
  107.                 </li>
  108.                 <li>
  109.                     <img src="phpimg/phpjpk13.jpg"></img>
  110.                 </li>
  111.                 <li>
  112.                     <img src="phpimg/phpjpk14.jpg"></img>
  113.                 </li>
  114.             </ul>
  115.         </div>  
  116.     </main>
  117.     <footer></footer>
  118. </body>
  119. </html>

css部分代码如下：

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

实现效果如下图：

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