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

一.隐式网格

1.代码输出

2.代码部分

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>隐式网格</title>
  8.     <style>
  9.         .container {
  10.             width: 400px;
  11.             height: 100px;
  12.             display: grid;
  13.             grid-template-columns: repeat(3,100px);
  14.             grid-template-rows: repeat(2,50px);
  16.             /* 排列规则 */
  17.             grid-auto-flow: row;
  19.             /* 隐式网格 */
  20.             /* 多余的项目会出现在隐式网格中 */
  21.             grid-auto-rows: 1fr;
  22.             grid-auto-flow: 50px;
  23.             grid-auto-columns: 100px;
  24.         }
  26.         .container .item {
  27.             background-color: greenyellow;
  28.         }
  29.         .container .item.yc {
  30.             background-color: red;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class="container">
  36.        <div class="item">shop1</div>
  37.        <div class="item">shop2</div>
  38.        <div class="item">shop3</div>
  39.        <div class="item">shop4</div>
  40.        <div class="item">item5</div>
  41.        <div class="item">shop6</div>
  42.        <!-- 显示隐式网格 -->
  43.        <div class="item yc">shop7</div>
  44.        <div class="item yc">shop8</div>
  45.        <div class="item yc">shop9</div>
  46.     </div>   
  47. </body>
  48. </html>

二.对齐方式与行列间隙

1.项目对齐的的对齐方式，使用场景和前提

对齐前提：必须存在剩余空间
对齐方式：”剩余空间”在”项目”之间的分配方式
使用场景：Grid: 剩余空间存在于”容器” 或 “单元格”
容器中：place-content, place-items
项目中：place-self
行列间隙：主要用于处理行和列之间的间隔
gap：垂直方向 水平方向

2.代码输出

3.代码部分

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>对齐方式与行列间隙</title>
  8.     <style>
  9.         .container {
  10.             display: grid;
  11.             grid-template-columns: repeat(3, 100px);
  12.             grid-template-rows: repeat(2, 100px);
  13.             gap: 10px;
  14.         }
  15.         .container .item {
  16.             background-color: yellowgreen;
  17.             width: 50px;
  18.             height: 50px;
  19.         }
  21.         /* 穿件容器中的剩余空间 */
  22.         .container {
  23.             /* 当前300*300 */
  24.             width: 350px;
  25.             height: 350px;
  26.             border: 2px solid red;
  27.             background-color: beige;
  29.             /* 项目在容器中为居中对齐 */
  30.             place-content: center ;
  32.             /* 项目在单元格内为居中对齐 */
  33.             place-items: center;
  34.         }
  35.         /* 设置某个项目在单元格对齐方式 */
  36.         .container .item:nth-child(6){
  37.             background-color: red;
  38.             place-self: start start;
  39.         } 
  40.     </style>
  41. </head>
  42. <body>
  43.     <div class="container">
  44.         <div class="item">shop1</div>
  45.         <div class="item">shop2</div>
  46.         <div class="item">shop3</div>
  47.         <div class="item">shop4</div>
  48.         <div class="item">item5</div>
  49.         <div class="item">shop6</div>
  50.     </div>   
  51. </body>
  52. </html>
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