search

博客列表 >项目在grid容器中的对齐方式以及利用grid布局仿写php中文网

项目在grid容器中的对齐方式以及利用grid布局仿写php中文网

Jason Pu?
Jason Pu?原创
2020年12月27日 00:29:16943浏览

一.所有项目整体在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. }

实现效果如下图：

上一条：盒子大小设置,滚动条，块元素居中，垂直，垂直居中下一条：grid项目对齐属性|实例演示-组件布局-媒体查询
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议