Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 10.27实例演示隐式网格,行列间隙
Blogger Information
Blog 24
fans 0
comment 0
visits 10898
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
10.27实例演示隐式网格,行列间隙
皮皮志
Original
346 people have browsed it

grid

1.隐式网格

  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>Document</title>
  8.     <style>
  9.     .container{
  10.         width: 300px;
  11.         height: 120px;
  12.         display: grid;
  13.         grid-template-columns:repeat(3,1fr);
  14.         grid-template-rows:repeat(3,1fr);
  15.         /* 行优先 */
  16.         grid-auto-flow: row;
  17.         /* 设置1fr 则可以让隐式网格完整均匀的显示 */
  18.         grid-auto-rows: 1fr;
  19.         }
  20.         .container .item{
  21.             background-color: wheat;
  22.         }
  23.         .container .item.other{
  24.             background-color: skyblue;
  25.         }
  26.     </style>
  28. </head>
  29. <body>
  30.     <div class="container">
  31.         <div class="item">item1</div>
  32.         <div class="item">item2</div>
  33.         <div class="item">item3</div>
  34.         <div class="item">item4</div>
  35.         <div class="item">item5</div>
  36.         <div class="item">item6</div>
  37.         <div class="item">item7</div>
  38.         <div class="item">item8</div>
  39.         <div class="item">item9</div>
  40.         <div class="item other">item10</div>
  41.         <div class="item other">item11</div>
  43.     </div>
  44. </body>
  45. </html>

2.对齐的前提

  1. 对齐前提: 必须存在”剩余空间”
  2. 对齐方案: “剩余空间”在”项目”之间的分配方式
  3. “剩余空间”在grid中主要是容器和单元格
  4. 容器中: place-content, place-items项目中: place-self

项目在”容器”中的对齐:

  1. place-content: 垂直方向 水平方向;
  2. 默认值: 垂直居上, 水平居左
  3. place-content: start start;
  4. 垂直居中,水平居右
  5. place-content: center end;
  6. 全部居中
  7. place-content: center center;
  8. 垂直两端对齐 水平分散对齐
  9. place-content: space-between space-around;
  10. 垂直分散对齐 水平两端对齐
  11. place-content: space-around space-between;
  12. 全部两端对齐
  13. place-content: space-between;
  14. 全部分散对齐
  15. place-content: space-around;

2. 项目在”单元格”中的对齐

  1. 单元格中必须要有剩余空间, 即: 项目 < 单元格  
  2. place-items: 垂直方向 水平方向; 
  3. place-items: start start;(默认值)
  4. place-items: center end;
  5. place-items: center center;
  1. 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>Document</title>
  8.     <style>
  9.     .container{
  10.         display: grid;
  11.         grid-template-columns:repeat(3,100px);
  12.         grid-template-rows:repeat(3,100px);
  13.         }
  14.         .container .item{
  15.             background-color: wheat;
  16.         }
  17.         /* 创建剩余空间 */
  18.        .container{
  19.         width: 450px;
  20.         height: 450px;
  21.         border: 1px solid  black;
  22.         background-color: skyblue;
  23.         /* 改变项目在容器内的排列 */
  24.         place-content: space-around;
  25.        }
  27.     </style>
  29. </head>
  30. <body>
  31.     <div class="container">
  32.         <div class="item">item1</div>
  33.         <div class="item">item2</div>
  34.         <div class="item">item3</div>
  35.         <div class="item">item4</div>
  36.         <div class="item">item5</div>
  37.         <div class="item">item6</div>
  38.         <div class="item">item7</div>
  39.         <div class="item">item8</div>
  40.         <div class="item">item9</div>
  42.     </div>
  43. </body>
  44. </html>

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>Document</title>
  8.     <style>
  9.     .container{
  10.         display: grid;
  11.         grid-template-columns:repeat(3,100px);
  12.         grid-template-rows:repeat(3,100px);
  13.         /* 不使用margin 只需要使用gap即可*/
  14.         /* gap:垂直方向 水平方向 */
  15.         gap: 10px;
  16.         }
  17.         .container .item{
  18.             background-color: wheat;
  19.         }
  21.     </style>
  23. </head>
  24. <body>
  25.     <div class="container">
  26.         <div class="item">item1</div>
  27.         <div class="item">item2</div>
  28.         <div class="item">item3</div>
  29.         <div class="item">item4</div>
  30.         <div class="item">item5</div>
  31.         <div class="item">item6</div>
  32.         <div class="item">item7</div>
  33.         <div class="item">item8</div>
  34.         <div class="item">item9</div>
  36.     </div>
  37. </body>
  38. </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