grid 网格布局

网格布局参考文档

1. grid-template-columns 列表示

   3列 2: 3: 2

   grid-template-columns: 2fr 3fr 2fr;

2. grid-template-rows 行表示

   12行 等分

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

3. 行间距和列间距

grid-auto-flow: row dense;
grid-row-gap: 20px;
grid-column-gap: 20px;

4. 具体某个自定义布局

        .item-1 {
	  grid-row-start: 1;
	  grid-row-end: 7;  
	}
	
	.item-2 {
	  grid-row-start: 1;
	  grid-row-end: 8; 
	}
	
	.item-3 {
	  grid-row-start: 1;
	  grid-row-end: 5; 
	}
	
	.item-4 {
	  grid-row-start: 5;
	  grid-row-end: 9; 
	
	}
	
	.item-5 {
	  grid-row-start: 7;
	  grid-row-end: 13; 
	}

5. 已知div宽度，屏幕尽量排满, 使用关键字auto-fill

display: grid;
grid-template-columns: repeat(auto-fill, 200px);
grid-column-gap: 16px;
grid-row-gap: 16px;
justify-content: space-around;

6. div宽度未知，屏幕排3列, auto表示div宽度

display: grid;
grid-template-columns: repeat(4, auto);
grid-column-gap: 16px;
grid-row-gap: 16px;
justify-content: space-around;