美文网首页
grid网格布局

grid网格布局

作者: 月下小酌_dbd5 | 来源:发表于2021-12-01 10:36 被阅读0次

    Grid 布局的属性分成两类
    容器属性:

    div {
      display: grid;
      //1、绝对长度写法
      grid-template-columns: 100px 100px 100px; //定义每一列的列宽
      //2、百分比写法
      // grid-template-columns: 33.33% 33.33% 33.33%;
      //3、repeat(重复的次数,所要重复的值) 写法
      // grid-template-columns: repeat(3, 33.33%);
      //4、auto-fill关键字 自动填充,每行尽量多的填充100px,直到放不下,在换行
      // grid-template-columns: repeat(auto-fill, 100px);
      //5、fr关键字 如下:每行共分3份,前者占一份,后者占两份(可以与绝对长度的单位结合使用)
      // grid-template-columns: 1fr 2fr;
      grid-template-rows: 100px 100px 100px; //定义每一行的行高
      grid-row-gap: 20px; //行与行的间隔(行间距)
      grid-column-gap: 20px; //列与列的间隔(列间距)
      //grid-gap: 20px 20px; 结合写法  
      //grid-gap: 20px; 结合写法  
      grid-auto-flow: column; //容器子元素顺序;默认值是row,即"先行后列";也可以将它设成column,变成"先列后行";
    }
    

    项目属性:

    1、指定项目的四个边框,分别定位在哪根网格线

    //grid-column-start属性:左边框所在的垂直网格线
    //grid-column-end属性:右边框所在的垂直网格线
    //grid-row-start属性:上边框所在的水平网格线
    //grid-row-end属性:下边框所在的水平网格线
    .div1{
      grid-column-start: 2;rvr
    }
    

    2、grid-column属性和grid-row属性(指定项目的四个边框)

    .div1 {
      grid-column: 1/3;//grid-column属性是grid-column-start和grid-column-end的合并简写形式
      grid-row: 1/2;//grid-row属性是grid-row-start属性和grid-row-end的合并简写形式
    }
    /* 等同于 */
    .div1 {
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 1;
      grid-row-end: 2;
    }
    /* 等同于 */
    //span关键字,表示跨越多少个网格
    .div1 {
      grid-column: 1 / span 2;
      grid-row: 1 / span 1;
    }
    

    3、grid-area 属性

    //grid-area属性指定项目放在哪一个区域。
    .div1 {
      grid-area: f; //a、b、c、d、e、f、、、
    }
    //grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
    .div1 {
      grid-area: 1/1/3/3;
    }
    

    4、justify-self 属性,align-self 属性,place-self 属性

    //justify-self属性设置单元格内容的水平位置(左中右),跟justify-items属性的用法完全一致,但只作用于单个项目
    // justify-self: start | end | center | stretch;
    
    //align-self属性设置单元格内容的垂直位置(上中下),跟align-items属性的用法完全一致,也是只作用于单个项目
    //align-self: start | end | center | stretch;
    
    //start:对齐单元格的起始边缘
    //end:对齐单元格的结束边缘
    //center:单元格内部居中
    //stretch:拉伸,占满单元格的整个宽度(默认值)
    
    .div1  {
      justify-self: start;
    }
    
    //place-self:<align-self> <justify-self>;(align-self属性和justify-self属性的合并简写形式)
    .div1 {
      place-self: center center;
    }
    
    注意:设为网格布局以后,容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效

    相关文章

      网友评论

          本文标题:grid网格布局

          本文链接:https://www.haomeiwen.com/subject/hjldpltx.html