CSS Grid布局

Grid布局

使用grid布局

.container{
    display:grid | inline-grid
}

行和列

.container{
    grid-template-columns:40px 50px auto 50px 40px;
    grid-template-rows:25% 100px auto;
}

设置每条线的名字

.container {
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px[end];
    grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

注意：设置名称后可以用名称代替下面操作中线的索引值

设置item的位置

.a,.b,.c{
    border: 1px solid red;
​
}
​
.a{
    
    grid-row-start: 1;  /* 行开始的线 */
    grid-row-end: 2;    /* 行结束的线 */
    grid-column-start:1;  /* 列开始的线 */
    grid-column-end: 6;   /* 列结束的线 */
}
​
.b{
    grid-column-start: 1;
    grid-column-end: 3;
}
​
.c{
    grid-column-start:3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 4;
}

注意：无论是行还是列，如果被分成了n份，那么就有n+1条线

使用fr-free space进行布局

.container{
    grid-template-columns:1fr 1fr 1fr;  /* 列有三个自由空间（3份） */
    grid-template-rows:1fr 1fr;  /* 行有两个自由空间（2份） */
}

设置item之间的空隙

.container{
    grid-column-gap:10px;
    grid-row-gap:15px;
    /* 合并写法 */
    grid-gap:10px 15px;
}

使用grid-template-areas分区

.container{
    grid-template-areas: 
    "header header header"
    "aside main ad"
    ". footer footer";
    /* .表示占位.这个 */
}
​
.item1{
    grid-area: header;
}
​
.item2{
    grid-area: aside;
}
​
.....
​
/* 设置container分区然后指定item的名称，grid会在对应位置放置相应元素 */