grid网络布局 | 邵预鸿|前端开发技术笔记

网络布局

display:grid/grid-inline grid块级元素，inline-grid 行内元素。使用网络布局会将行内元素都统一转成块级/行内

grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);

/** 1 1 1 2  **/
grid-template-rows: repeat(3,1fr) 2fr;
grid-template-columns: repeat(3,1fr) 2fr

/** 百分数 **/
grid-template-columns: repeat(3,33.333%);
grid-template-rows: repeat(3,33.333%); 

/** 两边固定，中间自适应  **/
grid-template-rows: 100px 1fr 100px;
grid-template-columns: repeat(3,33.33%);


/** auto-fill **/
grid-template-columns: repeat(auto-fill,25%); /* 1/0.25 = 4,自动计算 */
grid-template-rows: repeat(auto-fill,25%);  /** 还可以是具体px,如100px时，会根据父级，自动计算出数量   **/

minmax(100px,200px) 根据情况选择最小值，或者最大值
1
grid-template-columns: 200px 300px minmax(100px,200px);
row-gap: 20px; column-gap: 20px; 行、列间隔，添加连线时可以不用box-sizing

网络合并

合并时，与dom顺序无关，主要和命名位置有关

    <style>
        *{
            margin:0;
            padding: 0;
        }
        section{
            display: grid;
            border: 2px solid #ddd;
            width: 600px;
            height: 600px;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
            row-gap: 20px;
            column-gap: 20px;
            grid-template-areas: 'a a c'
                                 'a a f'
                                 'j h f';
        }
        section>div{
            border:1px solid red;
        }
        section>div:nth-of-type(1){
             grid-area: a;
        }
        section>div:nth-of-type(3){
             grid-area: f;
        }
    </style>
</head>
<body>
    <section id="grid">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </section>
   
</body>

grid-auto-flow: column / row 纵向合并

grid-row:2/4 ; grid-row-start:1; grid-row-end:3

section>div:nth-of-type(1){
    /*grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 1;
      grid-row-end:3
       
       相等
    */
      grid-row: 1/3;
      grid-column: 1/3;
  }

对齐方式

    <style>
        *{
            margin:0;
            padding: 0;
        }
        section{
            display: grid;
            border: 2px solid #ddd;
            width: 600px;
            height: 600px;
            grid-auto-flow: column;
            grid-template-columns: repeat(2,100px);
            grid-template-rows: repeat(2,100px);
            row-gap: 20px;
            column-gap: 20px;
            
            justify-content: center;
            align-content: end;

        }
        section>div{
            border:1px solid red;
        }

    </style>
</head>
<body>
    <section id="grid">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </section>
   
</body>

其它

四个角对齐

section{
            display: grid;
            border: 2px solid #ddd;
            width: 600px;
            height: 600px;
            grid-auto-flow: column;
            grid-template-columns: repeat(2,100px);
            grid-template-rows: repeat(2,100px);
            row-gap: 20px;
            column-gap: 20px;

            justify-content: space-between;
            align-content: space-between;
	        /** place-content: center center **/

        }    
<section id="grid">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </section>

为元素设置width/height,如何让他在网格中垂直左右居中？

justify-items: center; align-items: center;

place-items: center center

section {
    display: grid;
    border: 2px solid #ddd;
    width: 600px;
    height: 600px;
    grid-auto-flow: column;
    grid-template-columns: repeat(2,100px);
    grid-template-rows: repeat(2,100px);
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
}