Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1230gird布局语法总结
Blogger Information
Blog 30
fans 0
comment 1
visits 22041
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
1230gird布局语法总结
Admin
Original
768 people have browsed it

gird布局语法总结

以下内容仅为个人总结（方便本人回忆）

grid布局使用

grid布局是一种二维布局方式，个人认为略有麻烦不适合作为细节布局。
那么如何使用呢？
首先创建使用grid布局的容器我们这边用container作为容器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         .container{
  8.             width: 600px;
  9.             display: grid;
  10.             grid-template-columns: 100px 200px 300px 100px;
  11.             grid-template-rows: 100px 200px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div class="container">
  17.         <div class="item"></div>
  18.         <div class="item"></div>
  19.         <div class="item"></div>
  20.         <div class="item"></div>
  21.     </div>
  22. </body>
  23. </html>
  • display：grid将容器转换为grid容器
  • 然后我们来分割容器，国外人思想花里胡哨与我们国人不太一样，先画列再画行

  • grid-template-columns: 100px 200px 300px 100px; 分4列分别是100 200 300 100

  • 当然还有一个单位叫做fr是按照比例分的意思假设我要写6列100px还可以用grid-template-columns:repeat(6,100px)

  • grid-template-rows: 100px 200px;

    这样子就有了一个最简单的grid容器

    土地分配（grid-area，grid-template-areas）

    第一种方式是，在容器中分配完毕！


    使用grid-template-areas在容器中分配区域，再使用grid-area在grid项目中进行 一 一分配！

    方法二（grid-area的进一步使用可以不借助grid-template-areas）

    1.            /* 用网格线命名来快速填充: grid-area */
    2.           /* 注意顺序是顺时针: 上左下右, 与传统的上右下左的逆时针是完全相反的, 也很记忆 */
    3.           /* 上:第一行线,左:第一列线,下:第二行线,右:第三列线 */
    4.           /* 简单记忆: 第一个项目占据网格中的1行1列到2行3列之间的区域空间 */
    5.           grid-area: 1/1/2/3;
    如果你还不明白，请打开FirefoxF12看一眼，grid-area：///只是上左下右的线条罢了。
    1.   grid-area: 1/1/2/3;
    2.       grid-row-start: 1;
    3.       grid-row-end: 2;
    4.       grid-column-start: 1;
    5.       grid-column-end: 3;

    隐藏网格（就是行或列不够用了怎么办！会怎么自动扩展）

    grid-auto-rows/columns
    grid-auto-rows是在行方向上的扩展，因为是行高的扩展是可以随意扩展/但是列宽是无法随意扩展；


    grid的对齐方式

    在这里有我的灵魂画图一看就明白！

    是不是一看就懂！不懂的自己去写！嫌弃ing！！还有一点justify/align-content/items是写在grid容器样式里的不要傻fufu的写到项目里去 项目里的是justify/align-self并且它所针对的是项目本身的排列方式！不是justify/align-items 而是justify/align-content
    by the way 还有一个缩写 place-content/items：垂直,水平
    并且items针对的是小格子里面的内容！没错就是grid项目里面的内容排列方式！
    以上总结并不是全部内容！但是也差不了多少！可能语言组织的不是特别好，但是你照着打打就知道是啥意思了！

    自己写一个简单栅格

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Document</title>
    6.   <style type="text/css">
    7.       .container{
    8.           width: 1000px;
    9.           margin: auto;
    10.       }
    11.       .item{
    12.           background: black;
    13.       }
    14.       .row{
    15.           display: grid;
    16.           grid-template-columns: repeat(12,1fr);
    17.           height: 50px;
    18.           column-gap: 10px;
    19.           margin-bottom: 10px;
    20.       }
    21.       .col-1{
    22.           grid-column-end:span 1;
    23.       }
    24.       .col-2{
    25.           grid-column-end:span 2;
    26.       }
    27.       .col-3{
    28.           grid-column-end:span 3;
    29.       }
    30.       .col-4{
    31.           grid-column-end:span 4;
    32.       }
    33.       .col-5{
    34.           grid-column-end:span 5;
    35.       }
    36.       .col-6{
    37.           grid-column-end:span 6;
    38.       }
    39.       .col-7{
    40.           grid-column-end:span 7;
    41.       }
    42.       .col-8{
    43.           grid-column-end:span 8;
    44.       }
    45.       .col-9{
    46.           grid-column-end:span 9;
    47.       }
    48.       .col-10{
    49.           grid-column-end:span 10;
    50.       }
    51.       .col-11{
    52.           grid-column-end:span 11;
    53.       }
    54.       .col-12{
    55.           grid-column-end:span 12;
    56.       }
    57.   </style>
    58. </head>
    59. <body>
    60.   <div class="container">
    61.       <div class="row">
    62.           <div class="col-6 item"></div>    
    63.           <div class="col-6 item"></div>    
    64.       </div>
    65.       <div class="row">
    66.           <div class="col-3 item"></div>    
    67.       </div>
    68.   </div>
    69. </body>
    70. </html>

    手抄作业

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