Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12.30作业
Blogger Information
Blog 18
fans 0
comment 0
visits 10828
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
12.30作业
- 迷舍人
Original
617 people have browsed it

思路：感觉grid方便 做的时候 容器 / 项目 项目内容 ，分清楚 不要乱套

grid网格中所有项目的整体对齐方式

效果图

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>grid网格中所有项目的整体对齐方式</title>
  6.     <style>
  7.         *:not(body){
  8.             outline: red 1px dashed;
  9.         }
  10.         .container{
  11.             width: 500px;
  12.             height: 400px;
  13.             font-size: 2rem;
  14.             /*grid布局*/
  15.             display: grid;
  16.             grid-template-columns: repeat(3,100px);
  17.             grid-template-rows: repeat(3,80px);
  18.             /*间隙*/
  19.             grid-gap: 10px;
  21.             /*设置项目在网格容器中的对齐方式*/
  22.             /*水平对齐方式*/
  23.             /*默认在起始方向*/
  24.             /*justify-content: start;*/
  25.             /*水平居中*/
  26.             /*justify-content: center;*/
  27.             /*在最右侧 (终止边线)*/
  28.             /*justify-content: end;*/
  30.             /*垂直方向对齐*/
  31.             /*默认在起始方向*/
  32.             /*align-content: start;*/
  33.             /*垂直居中*/
  34.             /*align-content:center;*/
  35.             /*最下面(终止边线)*/
  36.             /*align-content:end;*/
  38.             /*对齐方式的简写   第一个是 垂直 第二个是水平 */
  39.             /*place-content: start center;*/
  42.             /*项目中的内容对齐*/
  43.             /*水平方向*/
  44.             /*默认 拉伸*/
  45.             /*justify-items: stretch;*/
  46.             /*最左边（起始位置）*/
  47.             /*justify-items: start;*/
  48.             /*最右边 （最后面）*/
  49.             /*justify-items: end;*/
  50.             /*居中*/
  51.             /*justify-items: center;*/
  53.             /*垂直方向*/
  54.             /*默认值*/
  55.             /*align-items: stretch;*/
  56.             /*最上面（起始位置）*/
  57.             /*align-items: start;*/
  58.             /*垂直居中*/
  59.             /*align-items: center;*/
  60.             /*垂直最下面*/
  61.             /*align-items: end;*/
  63.             /*简写  第一个属性是 垂直 第二个是水平*/
  64.             /*place-items: end start;*/
  65.         }
  66.         .container > .item{
  67.             background-color: yellow;
  68.         }
  69.     </style>
  70. </head>
  71. <body>
  72.     <div class="container">
  73.         <div class="item">1</div>
  74.         <div class="item">2</div>
  75.         <div class="item">3</div>
  76.         <div class="item">4</div>
  77.         <div class="item">5</div>
  78.         <div class="item">6</div>
  79.         <div class="item">7</div>
  80.         <div class="item">8</div>
  81.         <div class="item">9</div>
  82.     </div>
  83. </body>
  84. </html>

grid中某一个项目的对齐方式

效果图

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>grid中某一个项目的对齐方式</title>
  6.     <style>
  7.         *:not(body){
  8.             outline: 1px red dashed;
  9.         }
  10.         /*网格容器*/
  11.         .container{
  12.             width: 600px;
  13.             font-size: 2rem;
  14.             /*grid布局*/
  15.             display: grid;
  17.             grid-template-columns: repeat(3,1fr);
  18.             grid-template-rows: repeat(3,150px);
  20.             grid-gap: 10px;
  21.         }
  22.         .container > .item:first-of-type{
  23.             width: 100px;
  24.             height: 100px;
  25.             background-color: #63a35c;
  26.             text-align: center;
  27.             /*项目在容器中的对齐方式*/
  28.             /*水平方向*/
  29.             /*默认在起始*/
  30.             /*justify-self: stretch;*/
  31.             /*水平居中*/
  32.             /*justify-self: center;*/
  33.             /*水平最后*/
  34.             /*justify-self: end;*/
  36.             /*垂直方向*/
  37.             /*默认起始方向*/
  38.             /*align-self: stretch;*/
  39.             /*垂直居中*/
  40.             /*align-self: center;*/
  41.             /*垂直最后*/
  42.             /*align-self: end;*/
  43.         }
  44.     </style>
  45. </head>
  46. <body>
  47.     <div class="container">
  48.         <div class="item">1</div>
  49.         <div class="item">2</div>
  50.         <div class="item">3</div>
  51.         <div class="item">4</div>
  52.         <div class="item">5</div>
  53.         <div class="item">6</div>
  54.         <div class="item">7</div>
  55.         <div class="item">8</div>
  56.         <div class="item">9</div>
  57.     </div>
  58. </body>
  59. </html>
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