Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 第十期Grid容器与项目全部属性值实战演示（2019-12-30）
Blogger Information
Blog 22
fans 1
comment 0
visits 17695
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容器与项目全部属性值实战演示（2019-12-30）
齐齐
Original
917 people have browsed it

1.Grid容器属性

gird创建网格，并设置行间距和列间距

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid容器和项目所有属性实战</title>
  6.     <style>
  7.         /*给元素标签添加红色的轮廓线，方便查看效果，不包含body*/
  8.         *:not(body){
  9.             outline: 1px dashed red;
  10.         }
  11.         .container{
  12.             /*设置容器高和宽字体大小*/
  13.             width: 600px;
  14.             height: 600px;
  15.             /*字体大小为默认2倍*/
  16.             font-size: 2rem;
  17.             /*转为grid容器*/
  18.             display: grid;
  19.             /*创建一个是三行三列的网格,列宽行宽都为150px*/
  20.             grid-template-columns: repeat(3,150px);
  21.             grid-template-rows: repeat(3,150px);
  23.         }
  24.         .item{
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30. <div class="container">
  31.     <div class="item">1</div>
  32.     <div class="item">2</div>
  33.     <div class="item">3</div>
  34.     <div class="item">4</div>
  35.     <div class="item">5</div>
  36.     <div class="item">6</div>
  37.     <div class="item">7</div>
  38.     <div class="item">8</div>
  39.     <div class="item">9</div>
  40. </div>
  41. </body>
  42. </html>

效果图

修改grid网格容器中的项目默认的排列方式（先行后列），改为先列后行

  1.        grid-auto-flow: column;

gird网格区域命名

  1.             /*命名网格区域*/
  2.             grid-template-areas: 'a1 b1 c1'
  3.                                  'a2 b2 c2'
  4.                                  'a3 b3 c3' ;

所有项目相对grid容器的水平对齐方式，靠尾部对齐

所有项目相对grid容器的垂直对齐方式，垂直居中对齐

设置网格在容器中垂直和水平对齐方式简写（先垂直【靠底】，后水平[居中对齐]）

  1.        place-content: end center;

网格中的内容相对单元格水平方向对齐（居中对齐）

  1.      justify-items: center;

网格中的内容相对单元格垂直方向对齐（底部对齐）

  1.        palign-items: end;

网格中的内容相对单元格垂直和水平对齐简写（水平，垂直）

  1.        place-content: end center;

2.Grid项目属性

将第二项目放入最后一个单元格中

  1.         .item:nth-of-type(2){
  2.             /*background: #ff6600;*/
  3.             /*!*将第二项目放入最后一个单元格中*!*/
  4.             /*grid-column-start: 3;*/
  5.             /*grid-column-end: -1;*/
  6.             /*grid-row-start: 3;*/
  7.             /*grid-row-end: 4;*/
  8.             /*background: #ff6600;*/
  10.         }

将第一项目放入第三个单元格中

  1.         .item:nth-of-type(1){
  2.           grid-area: 1/3/2/4;
  3.             background: #55a532;
  4.         }

将第五项目放入名字为b3的网格中

  1.         .item:nth-of-type(5){
  2.             grid-area: b3;
  3.             background: wheat;
  4.         }

设置单个项目在单元格中水平对齐方式（水平居中）

  1.         .item:nth-of-type(7){
  2.             width: 70px;
  3.             height: 70px;
  4.             background: #ff6600;
  5.             justify-self: center;
  6.         }

设置单个项目在单元格中水平垂直方式（垂直居中）

  1.         .item:nth-of-type(7){
  2.             width: 70px;
  3.             height: 70px;
  4.             background: #ff6600;
  5.             justify-self: center;
  6.             align-self: center;
  7.         }

设置单个项目水平垂直方式简写（垂直，水平）

  1.         .item:nth-of-type(7){
  2.             width: 70px;
  3.             height: 70px;
  4.             background: #ff6600;
  5.             /*justify-self: center;*/
  6.             /*align-self: center;*/
  7.             place-self: center end;/*垂直居中，水平靠右;*/
  8.         }

3.手抄Grid容器和项目属性


4.小节

1.水平和垂直对齐，带self关键字的属于项目属性，content和items都是属于容器属性。justify关键字代表水平方向，align是垂直方向。
2.手抄属性加上实战，能够更快的掌握新知识。在总结和书写作业上，优秀的同学远远超过了自己起初的想象。难免有一些压力和气馁，但是相信只要努力一定会靠的更近。

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