Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 隐式网格, 对齐方式与行列间隙的设置方式与使用场景、前提
Blogger Information
Blog 16
fans 0
comment 0
visits 6824
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
隐式网格, 对齐方式与行列间隙的设置方式与使用场景、前提
Stonegarlic
Original
395 people have browsed it

1027作业

grid布局显示网格与项目属性

  1. <body>
  2.     <div class="container">
  3.         <div class="item">item1</div>
  4.     </div> 
  6.     <style>
  7.         .container{
  8.             width: 300px;
  9.             height:100px;
  10.             display: grid;
  11.             /* 显示网格 */
  12.             /* 3列3行 宽度为100的50 */
  13.             /* grid-template-columns: 100px 100px 100px;
  14.             grid-template-rows: 50px 50px 50px; */
  15.             /* 3列3行 宽度为100的50 */
  16.             /* grid-template-columns: repeat(3, 100px);
  17.             grid-template-rows: repeat(3, 50px); */
  18.             /* 显示网格 repeat:重复 fr：为比例 */
  19.             grid-template-columns: repeat(3,1fr);
  20.             grid-template-rows: repeat(3,1fr);
  21.         }
  22.         .container > .item{
  23.             background-color: bisque;
  24.             /* 起始行 / 结束行*/
  25.             grid-row: 3/4;
  26.             /* 起始列/结束列 */
  27.             grid-column:1/2;
  29.             grid-row: 1 /span 1;
  30.             grid-column: 1 / span 1;
  31.             /* grid-area: 行开始/列开始/行结束/列结束; */
  32.             grid-area: 3/1/span 1/span 3;
  33.         }
  34.     </style>

实例效果

grid布局隐式网格与与排列规则

  1. <title>grid隐式网格与与排列规则</title>
  2. </head>
  3. <body>
  4.     <div class="container">
  5.         <div class="item">item-1</div>
  6.         <div class="item">item-2</div>
  7.         <div class="item">item-3</div>
  8.         <div class="item">item-4</div>
  9.         <div class="item">item-5</div>
  10.         <div class="item">item-6</div>
  11.         <div class="item">item-7</div>
  12.         <div class="item">item-8</div>
  13.         <div class="item">item-9</div>
  14.         <!-- 在加2个项目 -->
  15.         <div class="item other">item-10</div>
  16.         <div class="item other">item-11</div>
  17.     </div>
  19.     <style>
  20.         .container{
  21.             width: 400px;
  22.             height: 150px;
  24.             display: grid;
  25.             /* 显示网格绘制 */
  26.             grid-template-rows: repeat(3,1fr);
  27.             grid-template-columns: repeat(3,1fr);
  29.             /* 1.排列规则 默认按照行排列*/
  30.             grid-auto-flow: row;
  31.             /* 列 排列 */
  32.             /* grid-auto-flow: column; */
  33.             /* 2.隐式网格 多余的项目，出现在隐式网格中*/
  34.             grid-auto-rows: 1fr;
  36.             /* 列优先排列 */
  37.             grid-auto-flow: column;
  38.             /* 设置隐式网格的列宽 */
  39.             grid-auto-columns: 100px;
  41.         }
  43.         .container > .item{
  44.             background-color: antiquewhite;
  45.         }
  47.         .container > .item.other{
  48.             background-color: orange;
  49.         }
  51.         /* 排列规则：grid-auto-flow：row/column 行优先与列有优先
  52.             隐式网格：grid-auto-row/colum 设置隐式网格的行与列
  53.         */
  54.     </style>
  55. </body>

实例效果

grid布局项目在容器中对齐与项目在单元格中对齐

  1.  <title>grid项目在容器中对齐与项目在单元格中对齐</title>
  2. </head>
  3. <body>
  4.     <div class="container">
  5.         <div class="item">item-1</div>
  6.         <div class="item">item-2</div>
  7.         <div class="item">item-3</div>
  8.         <div class="item">item-4</div>
  9.         <div class="item">item-5</div>
  10.         <div class="item">item-6</div>
  11.         <div class="item">item-7</div>
  12.         <div class="item">item-8</div>
  13.         <div class="item">item-9</div>
  14.     </div>
  15.     <style>
  16.         /**
  17.         * * 1. 对齐前提: 必须存在"剩余空间"
  18.         * * 2. 对齐方案: "剩余空间"在"项目"之间的分配方式
  19.         * * 3. 剩余空间: Flex(主轴, 交叉轴), Grid(容器, 单元格)
  20.         * * Grid: 剩余空间存在于"容器" 或 "单元格"
  21.         * * 容器中: place-content, place-items
  22.         * * 项目中: place-self
  23.         */
  24.         .container{
  25.             background-color: aqua;
  26.             border: 1px solid;
  27.             /* 创建网格剩余空间 */
  28.             width: 600px;
  29.             height: 600px;
  30.             display: grid;
  31.             grid-template-columns: repeat(3,100px);
  32.             grid-template-rows: repeat(3,100px);
  34.             /* 1.项目在容器中对齐 */
  35.             /* place-content: 垂直方向 水平方向; */
  37.             /* 默认垂直居上 水平居左 */
  38.             /* place-content: start start; */
  40.             /* 垂直居中 水平居中 */
  41.             /* place-content: center center; */
  43.              /* 垂直居中 水平居右 */
  44.             place-content: center end;
  46.             /* 重复值可以省略 */
  47.             place-content: center;
  49.             place-content: space-between space-around;
  50.             place-content: space-between ;
  51.             place-content: space-around;
  55.             /* ---------------------------- */
  57.             /*2.项目在单元格中对齐  */
  58.             /* 项目在单元格中要有剩余空间才能实现对其， */
  59.             /* place-items: 垂直方向 水平方向; */
  60.             /*  默认垂直居上 水平居左 */
  61.             /* place-items: start; */
  63.             /*  垂直居中 水平居中 */
  64.             place-items: center;
  66.             /* 垂直居中 水平居右 */
  67.             /* place-items: center end; */
  69.             /* place-items: space-between space-between; */
  70.         }
  71.         .container > .item{
  72.         background-color: antiquewhite;    
  73.         width: 80px;
  74.         height: 80px;
  75.         place-items: space-between space-between;
  76.         }
  78.         /* 设置某个项目在单元格中单独设置 */
  79.         .container > .item:nth-child(5){
  80.             background-color:aquamarine;
  81.             /* 选中单独设置某个单元格 */
  82.             place-self: end;
  83.         }
  84.     </style>
  85. </body>

实例效果

grid布局中的行列间隙 gap

  1. title>grid布局中的行列间隙</title>
  2. </head>
  3. <body>
  4.     <div class="container">
  5.         <div class="item">item-1</div>
  6.         <div class="item">item-2</div>
  7.         <div class="item">item-3</div>
  8.         <div class="item">item-4</div>
  9.         <div class="item">item-5</div>
  10.         <div class="item">item-6</div>
  11.         <div class="item">item-7</div>
  12.         <div class="item">item-8</div>
  13.         <div class="item">item-9</div>
  14.     </div>
  16.     <style>
  17.         .container{
  18.             background-color: antiquewhite;
  19.             display: grid;
  20.             width: 400px;
  21.             height: 400px;
  22.             border: 2px solid;
  23.             grid-template-columns: repeat(3,100px);
  24.             grid-template-rows: repeat(3,100px);
  26.             /* 行列间隙 */
  27.             /* gap:垂直方向，水平方向 */
  28.             gap:10px;
  29.         }
  30.         .container > .item{
  31.             background-color: aqua;
  32.             /* margin: 10px; */
  33.         }
  34.     </style>
  35. </body>

案例效果

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