Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Grid布局属性复习（1230前端开发学习）
Blogger Information
Blog 26
fans 0
comment 2
visits 35039
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
Grid布局属性复习（1230前端开发学习）
小辰
Original
544 people have browsed it

1.手写属性图


2.效果图

3.上代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>对grid属性的实验</title>
  5.     <style type="text/css">
  6.         /*设置网格虚线边框*/
  7.         * :not(body){
  8.             outline: 1px dashed blue;
  9.         }
  10.         .container{
  11.             width: 800px;
  12.             /*font-size: 2rem;*/
  13.             /*划分四列三行*/
  14.             display: grid;
  15.             grid-template-columns: repeat(4,1fr);
  16.             grid-template-rows: repeat(3, 1fr);
  17.             /*设置扩展后的隐式网格,只可以扩展行高*/
  18.             grid-auto-rows:200px;
  19.             /*设置格子之间的间距,上左下右*/
  20.             grid-gap:5px ;
  21.             /*设置  所有  项目的对齐方式居中*/
  22.             /*place-items:center;*/
  23.         }
  24.         .container > .item:first-of-type {
  25.             /*一号占据两格*/
  26.             grid-area:1/1/2/3;
  27.             background-color: red;
  28.             /*对项目进行编号*/
  29.             /*从第三列开始*/
  30.             /*grid-column-start: 3;*/
  31.             /*从第五列结束*/
  32.             /*grid-column-end: 5;*/
  33.             /*从第二行开始，从第四行结束，第几行主要是行号*/
  34.             grid-row-start:2;
  35.             grid-row-end:4;
  36.             /*设置 单个  项目在单元格的对齐方式*/
  37.             /*place-self:center;*/
  38.         }
  40.             /*使其正常需要注释掉字体大小*/
  41.         .row {
  42.             display: grid;
  43.             /* 平均等比分成12份 */
  44.             grid-template-columns: repeat(12, 1fr);
  46.             grid-column-gap: 8px;
  48.             height: 50px;
  49.             margin-bottom: 10px;
  51.             background-color: #eeeeee;
  52.         }
  53.         .col-1 {
  55.             grid-column-end: span 1;
  56.         }
  57.         .col-2 {
  58.             grid-column-end: span 2;
  59.         }
  60.         .col-3 {
  61.             grid-column-end: span 3;
  62.         }
  63.         .col-4 {
  64.             grid-column-end: span 4;
  65.         }
  66.         .col-5 {
  67.             grid-column-end: span 5;
  68.         }
  69.         .col-6 {
  70.             grid-column-end: span 6;
  71.         }
  72.         .col-7 {
  73.             grid-column-end: span 7;
  74.         }
  75.         .col-8 {
  76.             grid-column-end: span 8;
  77.         }
  78.         /*对15网格的命名划分*/
  79.          .item15 {
  80.             width: 600px;
  81.             height: 150px;
  82.             font-size: 2rem;
  84.             display: grid;
  86.             /* 给每一个单元格命名 */
  87.             grid-template-areas: 'a b'
  89.         }
  91.         .item15 > .item:first-of-type {
  92.             /* 项目命名: grid-area */
  93.             grid-area: a;
  94.             background-color: lightgreen;
  95.         }
  97.     </style>
  98. </head>
  99. <body>
  100.     <div class="container">
  101.         <div class="item">1</div>
  102.         <div class="item">2</div>
  103.         <div class="item">3</div>
  104.         <div class="item">4</div>
  105.         <div class="item">5</div>
  106.         <div class="item">6</div>
  107.         <div class="item">7</div>
  108.         <div class="item">8</div>
  109.         <div class="item">9</div>
  110.         <div class="item">10</div>
  111.         <div class="item">11</div>
  112.         <div class="item">12</div> 
  113.          <div class="row">
  114.             <span class="item col-2">2列</span>
  115.             <span class="item col-3">3列</span>
  116.         </div>
  117.         <div class="item15">
  118.         <span>1</span>
  119.         <span>1</span>
  120.         </div>
  121.     </div>
  122. </body>
  123. </html>

4.小结

通过对grid属性的复习，我对grid布局有了进一步的了解，grid布局的方法比较多，我还比较倾向于，划分好网格，就像圣杯布局，我只要按照顺序在里面
添加东西，在划分号的特定区域里，进行felx布局，这样布局就方便多了。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：grid布局肯定是会有以后几年的趋势, 早学早受益
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