1 Unstar Star 2 Fork 0

weblfg / Grid网格布局CSSApache-2.0

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
网格布局 spread retract

Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
Readme.md

Grid网格布局

  • 首先元素布局方式选择grid
body{
    display:grid;
}
  • grid-template-columns
    • 分配一行里面占的列数
    body{
        display:grid;
        grid-template-columns:1fr 1fr 1fr;
        /*
        或者用repeat(3,1fr)规定有三列
        */
    }
  • grid-gap行列间距
    body{
        display:grid;
        grid-template-columns:1fr 3fr;
        grid-gap:1rem;
        /*
        此时body下的元素的行列间距就都是1rem
        */
    }
    • grid-row-gap行间距不需要再使用margin
    body{
        display:grid;
        grid-template-columns:1fr 2fr 1fr;
        grid-row-gap:1rem;
        /*
        同理列间距
        */
    }
    • grid-column-gap列间距 同理行间距用法
  • grid-auto-rows行高
    body{
        display:grid;
        grid-template-columns:1fr 2fr 2fr;/* 3 列*/
        grid-auto-rows:minmax(100px,auto);/*minmax()规定了最小行高是100px*/
    } 
  • justify-items规定的元素沿着行的起始位置/align-items规定元素沿着列的起始位置排列
  1. start 规定沿着行/列的开始位置排列
  2. end 规定元素沿着行/列的终点位置排列
  3. center 规定元素沿着行/列的中间位置进行排列
  4. stretch 默认值 规定元素撑满整个网格
  • 同理元素本身也可以调整自身的行列排列位置==>justify-self/align-self
body{
    display:grid;
    grid-template-columns:1fr 2fr 3fr;
    grid-gap:1rem;
    justify-items:center;
    align-items:center;
}
body div{
    justify-self:start;
    align-self:end;
}
  • 网格布局神器,自定义网格布局模板

    • grid-template-areas
    body{
        /*假设定义了一个三列四行的布局,其中的header,main,footer都是独占一行,由于是三列结构所以他们都是在一行之中占三列*/
        display:grid;
        grid-template-areas:
        'header header header'
        'aside content content'
        'main  main   main '
        'footer footer footer';
        /*这里规定网格布局的模板*/
        grid-gap:1rem;
    }
    header{
        grid-area:header;
    }
    aside{
        gird-area:aside;
    }
    div.content{
        grid-area:content;
    }
    div.main{
        grid-area:main;
    }
    footer{
        grid-area:footer;
    }
    /*网格布局,响应式布局更加简单*/
    @media screen and (max-width:720px){
        body{
            /*当屏幕宽度小于720px时候变成了单列单行排列*/
            grid-template-areas:
            'header'
            'aside'
            'content'
            'main'
            'footer'
        }
    }
  • 网格单位gr是网格的个数

    • 例如with:1gr;

Comments ( 0 )

Sign in for post a comment

CSS
1
https://gitee.com/weblfg/grid_layout.git
git@gitee.com:weblfg/grid_layout.git
weblfg
grid_layout
Grid网格布局
master

Search

131423 f1aaba0b 1899542 094922 1c74bed3 1899542