Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12月30日作业：grid布局手写和grid属性实战演示
Blogger Information
Blog 145
fans 7
comment 7
visits 164143
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日作业：grid布局手写和grid属性实战演示
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
Original
754 people have browsed it

作业一：grid代码手写

作业二：通过一个demo.html中两个grid布局，把所学的grid的属性全部演示一遍，同个属性只展示一种效果。
1、demo.html中第一个grid布局
主要展示
（1）grid容器属性：划网格线、网格项目命名、间隙设置、以及项目对其方式和内容对其方式
（2）grid项目属性：项目中某个特定的item的对其方式
2、demo.html中第二个grid布局
主要展示：
（1）grid容器属性：划网格线、网格项目命名、以及项目和内容（item）对其方式、隐式网格的宽高、网格项目流动方向
（2）grid项目属性：网格命名定位、网格线定位
3、实战演示代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>12月30日作业</title>
  6.     <style>
  7.         * :not(body){
  8.             outline: 1px dashed blue;
  9.         }
  10.         body {
  11.             width: 1200px;
  12.             min-height: 1000px;
  13.             margin: 0 auto;
  14.         }
  16.         /*grid容器属性：*/
  17.         .contraption1 {
  18.             /*网格基本布局：划网格线，网格项目命名，设置网格间隙*/
  19.             width: 1000px;
  20.             height: 1000px;
  21.             display: grid;
  22.             grid-template-columns: repeat(3,200px);
  23.             grid-template-rows:repeat(3,200px);
  24.             /*grid-column-gap:10px;*/
  25.             /*grid-row-gap:15px;*/
  26.             grid-gap:15px 10px;
  27.             /*grid-gap:row column;   */
  28.             grid-template-areas:'one two three' 'four five six' 'seven eight nine';
  32.             /*网格布局项目对其方式*/
  33.             /*justify-content: end;*/
  34.             /*align-content:center;*/
  35.             place-content:  end  end ;
  36.             /*place-content: align justify ;*/
  39.             /*项目内容对其方式*/
  40.             /*justify-items:end;*/
  41.             /*align-items:center;*/
  42.             place-items:center end ;
  43.             /*place-items:align  justify;*/
  45.         }
  48.         .item {
  49.             width: 150px;
  50.             height: 150px;
  51.             text-align: center;
  52.             line-height: 150px;
  53.             background-color: #ff0000;
  55.         }
  57.         /*设置网格容器中某个特定项目的对其方式*/
  58.         .contraption1 > :nth-child(3) {
  59.             /*justify-self: center;*/
  60.             /*align-self: end ;*/
  61.             place-self:start start;
  62.             background-color: #55a532;
  64.         }
  66.         .contraption2 {
  68.             width: 1000px;
  69.             height: 1000px;
  70.             display: grid;
  71.             grid-template-columns: repeat(3,200px);
  72.             grid-template-rows:repeat(3,200px);
  74.             grid-template-areas:'one one three' 'four five six' 'seven eight nine';
  75.             /*隐式网格李宽和高*/
  76.             grid-auto-columns:150px;
  77.             grid-auto-rows:150px;
  78.             /*网格容器和内容对其方式：*/
  79.             justify-content: center;
  80.             align-content: center;
  81.             place-items:center center;
  82.             /*网格中项目流动方向：默认值：row*/
  83.             grid-auto-flow:column;
  84.         }
  87.         .contraption2 > :first-child {
  88.             /*通过网格命名定位网格区域*/
  89.             grid-area:one;
  90.         }
  91.         .contraption2 > :nth-child(3) {
  92.             /*通过网格线定位网格区域*/
  93.             /*grid-row-start:2;*/
  94.             /*grid-row-end:4;*/
  95.             /*grid-column-start:1;*/
  96.             /*grid-column-end:2;*/
  97.             grid-area: 2/1/4/2;
  98.         }
  100.     </style>
  101. </head>
  102. <body>
  103. <div class="contraption1">
  104.     <div class="item"><span>第1个项目</span></div>
  105.     <div class="item"><span>第2个项目</span></div>
  106.     <div class="item"><span>第3个项目</span></div>
  107.     <div class="item"><span>第4个项目</span></div>
  108.     <div class="item"><span>第5个项目</span></div>
  109.     <div class="item"><span>第6个项目</span></div>
  110.     <div class="item"><span>第7个项目</span></div>
  111.     <div class="item"><span>第8个项目</span></div>
  112.     <div class="item"><span>第9个项目</span></div>
  113. </div>
  114. <hr>
  115. <h1>两个案例，不同属性值展示</h1>
  116. <hr>
  117. <div class="contraption2">
  118.     <div class="item"><span>第1个项目</span></div>
  119.     <div class="item"><span>第2个项目</span></div>
  120.     <div class="item"><span>第3个项目</span></div>
  121.     <div class="item"><span>第4个项目</span></div>
  122.     <div class="item"><span>第5个项目</span></div>
  123.     <div class="item"><span>第6个项目</span></div>
  124.     <div class="item"><span>第7个项目</span></div>
  125.     <div class="item"><span>第8个项目</span></div>
  126.     <div class="item"><span>第9个项目</span></div>
  127. </div>
  129. </body>
  130. </html>

4、实战演示效果展示：（在火狐浏览器下展示，并标注网格线）

总结：
1、grid网格布局适合大布局和整体布局
2、grid整体思路，划网格线——项目定位（网格线和网格域）——项目对其方式——内容在项目中对其方式——单个项目内容对齐调整
3、项目流动方向对隐式项目宽高的影响：
（1）自然方向流动（row）-宽度随网格布局大小，高度可自行设置
（2）column流动方向-高度随网格布局大小，宽度可自行设置
4、place-self优先place-items属性显示

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：grid , flex 容器和项目上的属性并不多, 但是记住全部属性和属性值,并理解它们的应用场景, 是有难度的, 只有经过大量的实战, 才能掌握的, 以后一定要多写
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