Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid容器、项目属性及案例
Blogger Information
Blog 34
fans 0
comment 0
visits 19980
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容器、项目属性及案例
OC的PHP大牛之路
Original
728 people have browsed it

grid容器、项目属性

容器属性

grid布局三步：
1.创建grid容器
display: grid

2.划分网格单元
grid-template-columns列设置
grid-template-rows行设置
如：

  1. grid-template-columns:10em 10em 10em;
  2. grid-template-rows:10em 10em 10em;

可简化为：

  1. grid-template-columns:repeat(3,10em);
  2. grid-template-rows:repeat(3,10em);

3.将项目放到指定的网格单元中
grid-area

通过grid-row/grid-column可自定义项目位置显示在任何位置，如：

  1. grid-row:2/3;
  2. grid-column:2/3;

网格区域：由一个或多个单元构成的空间，如：

  1. grid-row:2/4;
  2. grid-column:2/4;

当网格过多时，可以通过span指定跨越行/列的数量，如：

  1. grid-row:2/span2;
  2. grid-column:2/span2;

grid-area直接定义网格区域，如：
grid-area：行开始/列开始/行结束/列结束
grid-area：2/2/span2/span2

项目属性

4.排列方式：（默认行优先）
grid-auto-flow: row行优先
grid-auto-flow: column列优先

5.隐式网格的行、列大小
grid-auto-rows新生成的项目，自动放入自动生成的网格单元中，并与新单元的宽度自适应

6.行与列的间隙
gap行间距、列间距,如：
gap:5px 10px;

7.对齐方式
place-content:所有项目在容器中的对齐方式（垂直 水平），须有剩余空间
place-content:start start ;默认
place-content:center end ;居中 靠右
place-content:center center ;居中 居中

剩余空间还可以在项目之间分配
place-content: space-between space-around;

8.place-items项目在网格单元中对齐方式
place-items: center;

9.place-self设置某个项目的对齐方式
place-self: end;

案例

  1. <body>
  2.     <div class="container">
  3.          <div class="item"></div>
  4.     </div>
  6.     <style>
  7.         .container {
  8.             width: 30em;
  9.             height: 30em;
  10.             background-color:bisque;
  12.             display: grid;
  14.             grid-template-columns:repeat(3,10em);
  15.             grid-template-rows:repeat(3,10em);
  16.         }
  18.         .container > .item {
  19.             background-color:violet;
  20.             grid-area:2/2/span2/span2;
  21.         }
  22.     </style>
  23. </body>

1.display: grid属性
2.grid-template-columns/grid-template-rows属性
3.grid-area属性

4.grid-auto-flow属性

  1. .container {
  2.     width: 30em;
  3.     height: 30em;
  4.     background-color:bisque;
  5.     display: grid;
  6.     grid-template-columns:repeat(3,10em);
  7.     grid-template-rows:repeat(3,10em);
  9.     grid-auto-flow: column
  10. }

5.grid-auto-rows属性

  1. .container {
  2.     width: 30em;
  3.     height: 30em;
  4.     background-color:bisque;
  5.     display: grid;
  6.     grid-template-columns:repeat(3,10em);
  7.     grid-template-rows:repeat(3,10em);
  9.     grid-auto-rows: 10em;
  10. }

6.gap属性

  1.  .container {
  2.      width: 30em;
  3.      height: 30em;
  4.      background-color:bisque;
  5.      display: grid;
  6.      grid-template-columns:repeat(3,10em);
  7.      grid-template-rows:repeat(3,10em);
  9.      grid-auto-rows: 10em;
  10.      gap:5px 10px ;
  11.  }

7.place-content属性

  1.  .container {
  2.      width: 30em;
  3.      height: 30em;
  5.      width: 35em;
  6.      height: 40em;
  7.      background-color:bisque;
  8.      display: grid;
  9.      grid-template-columns:repeat(3,10em);
  10.      grid-template-rows:repeat(3,10em);
  12.      /* grid-auto-flow: column */
  13.      /* grid-auto-rows: 10em; */
  14.      /* gap:5px 10px ; */
  16.      place-content:center center ;
  17.  }

8.place-items属性

  1. .container {
  2.     width: 30em;
  3.     height: 30em;
  4.     width: 35em;
  5.     height: 40em;
  6.     background-color:bisque;
  7.     display: grid;
  8.     grid-template-columns:repeat(3,10em);
  9.     grid-template-rows:repeat(3,10em);
  11.     /* grid-auto-flow: column */
  12.     /* grid-auto-rows: 10em; */
  13.     /* gap:5px 10px ; */
  14.     place-content:start start ;
  15.     place-content:center end ;
  16.     place-content:center center ;
  17.     place-content: space-between space-around;
  18.     place-items: center;
  19. }

9.place-self属性

  1. .container > .item:nth-last-of-type(5){
  2.     background-color: aqua;
  3.     place-self: end;
  4. }

Correcting teacher：PHPzPHPz

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