grid.jpg

  • flex是一维布局,grid是二维布局，横纵两个方向总是同时存在的

    1.作用在grid容器

  • display:gird;

  • grid-template-columns 对网格进行纵划分,单位可以是px,%,自适应auto,fr(网格剩余空间比例单位)
  • grid-template-rows 对网格进行横划分,单位可以是px,%,自适应auto,fr ```html <!DOCTYPE html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
  2. - grid-template-areas：grid子项只要使用 grid-area 属性指定其隶属于哪个区
  3.    - grid-template以上三个的简写形式
  4. ```html
  5. <!DOCTYPE html>
  6. <html>
  7.     <head>
  8.         <meta charset="utf-8" />
  9.         <title></title>
  10.         <style type="text/css">
  11.             .box{
  12.                 width: 600px;
  13.                 height: 600px;
  14.                 border:1px dashed #000 ;
  15.                 display: grid;
  16.                 /*grid-template-rows:repeat(3,1fr);
  17.                 grid-template-columns:repeat(3,1fr);
  18.                 grid-template-areas:
  19.                 "a1 a1 a1"
  20.                 "a2 a2 a3"
  21.                 "a2 a2 a3";*/
  22.                 grid-template:
  23.                 "a1 a1 a1" 1fr
  24.                 "a2 a2 a3" 1fr
  25.                 "a2 a2 a3" 1fr
  26.                 /1fr 1fr 1fr;
  27.             }
  28.             .box>div{
  29.                 border:1px solid red ;
  30.             }
  31.             .box>div:nth-child(1){
  32.                 grid-area:a1;
  33.             }
  34.             .box>div:nth-child(2){
  35.                 grid-area:a2;
  36.             }
  37.             .box>div:nth-child(3){
  38.                 grid-area:a3;
  39.             }
  40.         </style>
  41.     </head>
  42.     <body>
  43.         <div class="box">
  44.             <div>1</div>
  45.             <div>2</div>
  46.             <div>3</div>
  47.         </div>
  48.     </body>
  49. </html>
  • grid-column-gap 定义网格间隙
  • grid-row-gap 定义网格间隙
    • grid-gap以上两个简写，先写行间距，再写列间距
  • justify-items网格元素内容水平呈现方式：拉伸stretch/左中右对齐start/end/center
  • align-items网格元素内容垂直呈现方式：拉伸stretch/上中下对齐start/end/center
    • place-items以上两个简写，第一个垂直，第二个水平 ```html <!DOCTYPE html>
      1
      2
      3
      4
      5
      6
      7
      8
      9
  2. - 容器需要调大下使用：
  3. - justify-content网格元素水平分布方式stretch/start/end/center/space-between/space-around/space-evenly
  4. - align-content网格元素垂直分布方式
  5.    - place-content以上简写
  6. ```html
  7. <!DOCTYPE html>
  8. <html>
  9.     <head>
  10.         <meta charset="utf-8" />
  11.         <title></title>
  12.         <style type="text/css">
  13.             .box{
  14.                 width: 600px;
  15.                 height: 600px;
  16.                 border:1px dashed #000 ;
  17.                 display: grid;
  18.                 grid-template-rows:repeat(3,100px);
  19.                 grid-template-columns:repeat(3,100px);
  20.                 justify-content:space-evenly;
  21.             }
  22.             .box>div{
  23.                 border:1px solid red ;
  24.             }
  25.         </style>
  26.     </head>
  27.     <body>
  28.         <div class="box">
  29.             <div>1</div>
  30.             <div>2</div>
  31.             <div>3</div>
  32.             <div>4</div>
  33.             <div>5</div>
  34.             <div>6</div>
  35.             <div>7</div>
  36.             <div>8</div>
  37.             <div>9</div>
  38.         </div>
  39.     </body>
  40. </html>

2.作用在grid子项上

  • 1.grid-column-start水平方向上占据的起始位置
  • 2.grid-column-end水平方向上占据的结束位置(span属性)向后添加的个数
  • 3.grid-row-start垂直方向上占据的起始位置
  • 4.grid-row-end垂直方向上占据的结束位置(span属性)
    • grid-column：1和2的缩写
    • grid-row：3和4的缩写
      • 例grid-column:2 / 4; ```html <!DOCTYPE html>
        1
  2. - 5.grid-area当前网格所占用的区域
  3.    - grid-area：3横向起始/2纵向起始/4横向结束/4纵向结束
  4. ```html
  5. <!DOCTYPE html>
  6. <html>
  7.     <head>
  8.         <meta charset="utf-8" />
  9.         <title></title>
  10.         <style type="text/css">
  11.             .box{
  12.                 width: 600px;
  13.                 height: 600px;
  14.                 border:1px dashed #000 ;
  15.                 display: grid;
  16.                 grid-template-rows:repeat(3,1fr);
  17.                 grid-template-columns:repeat(3,1fr);
  18.             }
  19.             .box>div{
  20.                 border:1px solid red ;
  21.                 grid-area:3/2/4/4;
  22.             }
  23.         </style>
  24.     </head>
  25.     <body>
  26.         <div class="box">
  27.             <div>1</div>
  28.         </div>
  29.     </body>
  30. </html>
  • 6.justify-self单个网格元素的水平对齐方式start/end/center
  • 7.align-self单个网格元素的垂直对齐方式
    • place-self：6和7的缩写，先写垂直，再写水平 ```html <!DOCTYPE html>
      1
      2
      3
      4
      5
      6
      7
      8
      9

```