Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1230-Grid容器和项目属性
Blogger Information
Blog 13
fans 0
comment 0
visits 10278
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
1230-Grid容器和项目属性
Original
640 people have browsed it

创建显式网格轨道

grid-template-colums: 基于列,定义网络线的名称与与轨道大小

HTML

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

CSS

  1.         .container{
  2.             width: 600px;
  3.             font-size: 2rem;
  4.             display: grid;
  5.             grid-template-columns: repeat(3,1fr);
  6.         }

效果图

grid-template-rows: 基于行,定义网络线的名称与与轨道大小

CSS

  1.         .container{
  2.             width: 600px;
  3.             font-size: 2rem;
  4.             display: grid;
  5.             grid-template-rows: repeat(3,100px);
  6.         }

效果图


通常grid-template-columns与 grid-template-rows配合使用

grid-template-areas: 命名网格区域(配合gird项目的grid-area属性)

CSS

  1.         .container{
  2.             width: 600px;
  3.             font-size: 2rem;
  4.             display: grid;
  5.             grid-template-columns: repeat(3,1fr);
  6.             grid-template-rows: repeat(3,100px);
  7.             grid-template-areas:'a b c'
  8.                                 'd e f'
  9.                                 'g h i';
  10.         }

效果图

创建隐式网格轨道

grid-auto-flow: 网格中项目的流动方/排列方向(默认先行后列)
grid-auto-columns: 隐式网格的列宽
通常 grid-auto-flow 与 grid-auto-columns配合使用

HTML <body>

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

CSS

  1.         .container{
  2.             width: 600px;
  3.             font-size: 2rem;
  5.             display: grid;
  6.             grid-template-columns: repeat(3,1fr);
  7.             grid-template-rows: repeat(3,100px);
  8.             grid-auto-rows: 60px;
  9.             grid-auto-columns:260px ;
  11.         }

效果图


grid-auto-rows: 隐式网格的行高

CSS

  1.         .container{
  2.             width: 600px;
  3.             font-size: 2rem;
  5.             display: grid;
  6.             grid-template-columns: repeat(3,1fr);
  7.             grid-template-rows: repeat(3,100px);
  9.             grid-auto-rows: 60px;
  10.             grid-auto-columns:260px ;
  11.             grid-auto-rows:150px;
  12.         }

效果图

创建轨道间距

grid-column-gap : 列间隙

HTML

  1. <body>
  2.     <div class="container">
  3.         <div class="item">1</div>
  4.         <div class="item">2</div>
  5.         <div class="item">3</div>
  6.         <div class="item">4</div>
  7.         <div class="item">5</div>
  8.         <div class="item">6</div>
  9.         <div class="item">7</div>
  10.         <div class="item">8</div>
  11.         <div class="item">9</div>
  12.         <!-- <div class="item">10</div> -->
  13.         <!-- <div class="item">11</div>
  14.         <div class="item">12</div> -->
  15.     </div>
  16. </body>

CSS

  1.          .container{
  2.             width: 600px;
  3.             font-size: 2rem;
  5.             display: grid;
  6.             grid-template-columns: repeat(3,1fr);
  7.             grid-template-rows: repeat(3,100px);
  9.             grid-column-gap:10px;
  12.         }

效果图


grid-row-gap :行间隙

  1.          .container{
  2.             width: 600px;
  3.             font-size: 2rem;
  5.             display: grid;
  6.             grid-template-columns: repeat(3,1fr);
  7.             grid-template-rows: repeat(3,100px);
  9.             grid-row-gap:10px;
  11.         }

效果图


grid-gap | gap: 简写

  1.          .container{
  2.             width: 600px;
  3.             font-size: 2rem;
  4.             display: grid;
  5.             grid-template-columns: repeat(3,1fr);
  6.             grid-template-rows: repeat(3,100px);
  7.             grid-gap:10px
  8.         }

效果图

所有项目在网络容器中的对齐方式

justify-contens: 设置所有项目在网格容器中的水平对齐方式

HTML

  1. <body>
  2.     <div class="container">
  3.         <div class="item">1</div>
  4.         <div class="item">2</div>
  5.         <div class="item">3</div>
  6.         <div class="item">4</div>
  7.         <div class="item">5</div>
  8.         <div class="item">6</div>
  9.         <div class="item">7</div>
  10.         <div class="item">8</div>
  11.         <div class="item">9</div>
  12.         <!-- <div class="item">10</div>
  13.         <div class="item">11</div>
  14.         <div class="item">12</div> -->
  15.     </div>
  16. </body>

CSS

  1.  .container{
  2.             width: 600px;
  3.             height: 400px;
  4.             font-size: 2rem;
  6.             display: grid;
  7.             grid-template-columns: repeat(3,100px);
  8.             grid-template-rows: repeat(3,100px);
  9.             grid-gap: 10px;
  11.             /* 对齐方式 */
  12.             /* 水平方向 */
  13.             justify-content: start;
  14.             justify-content: end;
  15.             justify-content: center;
  16. }

效果图



align-content: 设置所有项目在网格容器中的垂直对齐方式

CSS

  1.          .container{
  2.             width: 600px;
  3.             height: 400px;
  4.             font-size: 2rem;
  6.             display: grid;
  7.             grid-template-columns: repeat(3,100px);
  8.             grid-template-rows: repeat(3,100px);
  9.             grid-gap: 10px;
  12.             /* 垂直方向 */
  13.             align-content: start;
  14.             align-content: end;
  15.             align-content: center;
  16. }

效果图




place-content: justify-content和align-content的属性简写

CSS

  1.         .container{
  2.             width: 600px;
  3.             height: 400px;
  4.             font-size: 2rem;
  6.             display: grid;
  7.             grid-template-columns: repeat(3,100px);
  8.             grid-template-rows: repeat(3,100px);
  9.             grid-gap: 10px;
  10.             /* 简写 垂直,水平*/
  11.             place-content: end end;
  12. }

效果图

所有项目在单元格中的对齐方式

justify-items: 设置所有项目在单元格内的水平对齐方式

HTML

  1. <body>
  2.     <div class="container">
  3.         <div class="item">1</div>
  4.         <div class="item">2</div>
  5.         <div class="item">3</div>
  6.         <div class="item">4</div>
  7.         <div class="item">5</div>
  8.         <div class="item">6</div>
  9.         <div class="item">7</div>
  10.         <div class="item">8</div>
  11.         <div class="item">9</div>
  12.         <!-- <div class="item">10</div>
  13.         <div class="item">11</div>
  14.         <div class="item">12</div> -->
  15.     </div>
  16. </body>

CSS

  1.  .container{
  2.             width: 600px;
  3.             height: 400px;
  4.             font-size: 2rem;
  6.             display: grid;
  7.             grid-template-columns: repeat(3,100px);
  8.             grid-template-rows: repeat(3,100px);
  9.             grid-gap: 10px;
  11.            /* 内容对齐 */
  12.         /* 拉伸 */
  13.         justify-items: stretch;
  14.         /* 左对齐 */
  15.         justify-items: start;
  16.         /* 右对齐 */
  17.         justify-items: right;
  18.         /* 居中 */
  19.         justify-items: center;
  20. }

效果图




align-items: 设置所有项目在单元格内的垂直对齐方式

CSS

  1.          .container{
  2.             width: 600px;
  3.             height: 400px;
  4.             font-size: 2rem;
  6.             display: grid;
  7.             grid-template-columns: repeat(3,100px);
  8.             grid-template-rows: repeat(3,100px);
  9.             grid-gap: 10px;
  12.             align-items: stretch;
  13.             /* 左对齐 */
  14.             align-items: start;
  15.             /* 右对齐 */
  16.             align-items: right; 
  17.             /* 居中 */
  18.             align-items: center;
  19. }

效果图



place-items: justify-items和align-items的属性简写

CSS

  1.         .container{
  2.             width: 600px;
  3.             height: 400px;
  4.             font-size: 2rem;
  6.             display: grid;
  7.             grid-template-columns: repeat(3,100px);
  8.             grid-template-rows: repeat(3,100px);
  9.             grid-gap: 10px;
  10.             /* 简写 垂直,水平*/
  11.             place-items: end end;
  12. }

效果图

将项目放置到单元格中

grid-column-start: 起始列编号
grid-column-end: 终止列编号
grid-column: 上面二属性缩写
grid-row-start: 起始行编号
grid-row-end: 终止行编号
grid-row: 上面二属性编写

HTML

  1.   <div class="container">
  2.         <div class="item">1</div>
  3.         <div class="item">2</div>
  4.         <div class="item">3</div>
  5.         <div class="item">4</div>
  6.         <div class="item">5</div>
  7.         <div class="item">6</div>
  8.         <div class="item">7</div>
  9.         <div class="item">8</div>
  10.         <div class="item">9</div>
  11.         <!-- <div class="item">10</div>
  12.         <div class="item">11</div>
  13.         <div class="item">12</div> -->
  14.     </div>

CSS

  1. .container >.item:nth-of-type(7)
  2.         {
  3.             grid-column-start: 1;
  4.             grid-column-end: 4;
  5.             grid-row-start: 3;
  6.             grid-row-end: 4;
  8.             /* 简写 */
  9.             /* grid-column: 1 / span 3;
  10.             grid-row: 3; */
  12.             /* grid-area: 3/1/4/4;
  13.             background-color: skyblue; */
  14.         }

效果图

将项目放置到网格区域中

grid-area: top/left/bottom/right: 将项目按逆时针顺序放置
grid-area: area-name: 将项目放置到已命名的网格区域中

CSS

  1.         .container >.item:nth-of-type(7)
  2.         {
  3.             grid-area: 3/1/4/4;
  4.             background-color: skyblue;
  5.         }

效果图

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

justify-self: 设置项目在单元格中的水平对齐方式

HTML

  1.     <div class="container">
  2.         <div class="item">1</div>
  3.         <div class="item">2</div>
  4.         <div class="item">3</div>
  5.         <div class="item">4</div>
  6.         <div class="item">5</div>
  7.         <div class="item">6</div>
  8.         <div class="item">7</div>
  9.         <div class="item">8</div>
  10.         <div class="item">9</div>
  11.         <!-- <div class="item">10</div>
  12.         <div class="item">11</div>
  13.         <div class="item">12</div> -->
  14.     </div>

CSS

  1.         .container>.item:first-of-type{
  2.             width: 50px;
  3.             height: 50px;
  4.             text-align: center;
  5.             line-height: 50px;
  6.             background-color: skyblue;
  8.             /* 项目对齐 */
  9.             justify-self: start;
  10.             justify-self: end;
  11.             justify-self: center;
  12. }

效果图



align-self: 设置项目在单元格中的垂直对齐方式

CSS

  1.         .container>.item:first-of-type{
  2.             width: 50px;
  3.             height: 50px;
  4.             text-align: center;
  5.             line-height: 50px;
  6.             background-color: skyblue;
  8.             /* 项目对齐 */
  10.             align-self: start; 
  11.             align-self: end; 
  12.             align-self: center; 
  14.             /* place-self: center center; */
  15.         }

效果图



place-self: justify-self和align-self的属性简写

CSS

  1.         .container>.item:first-of-type{
  2.             width: 50px;
  3.             height: 50px;
  4.             text-align: center;
  5.             line-height: 50px;
  6.             background-color: skyblue;
  9.             place-self: center center;
  10.         }

效果图

手写属性


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