search

博客列表 >1230-Grid容器和项目属性

1230-Grid容器和项目属性


原创
2020年01月05日 04:35:35645浏览

创建显式网格轨道

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.         }

效果图

手写属性


上一条：二手商品列表与评论与回复独立开发与总结下一条：0103作业，PHP基础知识，输出方式，字符串
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多