Grid 布局 笔记

触发Grid条件

display: grid;

1.设置行高列宽          

 grid-template-rows:100px 100px 100px; （分三行，每行高100px）

 grid-template-columns:100px 100px 100px;（分三列，每行高100px）

可简写为：

grid-template-rows: repeat(3,100px );

grid-template-columns: repeat(3,100px );

行的高度、列的宽度可用百分比。                 

grid-template-columns: repeat(X,Y...... );

宽或高可以写多个，则以一组为循环，循环X次。

 2.自动填充

行：grid-template-rows: repeat(auto-fill,100px);   （设置grid的行  auto-fill自动填充）

列：grid-template-columns: repeat(auto-fill,Y.....) ;

（设置grid的列   后面有几个值就表示有几列，每一个值表示列的宽度。）

  以Y宽度或多个宽度为循环，每个项目填充循环

3.项目之间的间距

      gap: X  Y;      (X为行之间的间距，Y为列之间的间距)

4.选择“行”或“列”的优先铺满 

 grid-auto-flow: row;

默认，项目的平铺顺序是 先行后列的。 即先填满第一行，然后换行，填第二行。               

 grid-auto-flow:column; 

更改方向： column  先列后行。

5.容器对齐方式 

justify-content:center;
align-content: center;

 justify-content        和    align-content默认值都为   flex-start或start（end同理）

其用法同弹性盒子

容器：600*600   项目：100*100

 

6.项目对齐方式

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

 

  justify-itemst  和   align-items  默认值都为   flex-start或start（end同理）

容器：600*600   项目双类名：  200*200      100*100（100相对与200实现对齐）

 

7.fr

 fr 片段 将整体分为n分，1fr = 整体的1/n 

display:grid;
grid-template-rows:100px 2fr 1fr;
grid-template-columns:repeat(3,100px);
justify-content:center;
align-content:center;

容器：600*600   此中fr=（600-100）/3

8.自定义项目 

    .item1{
      background-color: rgb(150, 36, 36);
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 1;
      grid-row-end: 2;
    }