【CSS】Grid布局

功能强大

二维布局用Grid，一维布局用Flex

Grid分container和items

让一个元素成为container

.container{
    display: grid | inline-grid;
}

行和列

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

注：如图是行和列的分布，图中的线实际是看不到的，但是它确实可以这样用；

设置item的范围

• 给每条线取名字，可以是数字，如横竖都是从1开始

• 设置每个item在行和列的起始位置具体如何，如：把a做成一个header栏

  .a {
      grid-row-start: 1;
      grid-row-end: 2;
      grid-column-start: 1;
      grid-column-end: 6;
    }
  

  

• fr-free space 巧记：份

  案例：平均布局

  

  注：不需要考虑负margin，所有的东西都已经替你想好了；

• 分区grid-template-areas

  案例：整个页面分区布局

  

  如果想要实现某块是empty的，可以用.来表示该空区域，如：

   grid-template-areas:
       "header header header"
       "aside . ad"
       "footer footer footer"
   }
  

• 空隙

  • 每个item周围都有空隙

     .container{
         grid-gap: 10px;
     }
    

    

  • 每个item的列和列之间有空隙

        .container{
             grid-column-gap: 10px;
        }
    

    

  • 每个item的行和行之间有空隙

        .container{
             grid-row-gap: 10px;
        }
    

    

案例

1. 长得像衣柜的分布
2. 小游戏练手