关于css:CSS-grid网格布局例子

简介

CSS 网格布局 (Grid Layout) 是 CSS 中最弱小的布局零碎。flexbox 是一维零碎，Grid 是二维零碎。Grid 布局远比 Flex 布局弱小。
具体学习参考阮一峰的 CSS Grid 网格布局教程
以及饥人谷若愚的 CSS 网格布局学习指南
本文做一些布局记录，不便本人前面回顾。

十二网格散布

.container {
  display: grid;
  grid-gap: 10px 10px;
  grid-template-columns: repeat(12,1fr);  
  background-color: #2196F3;
  padding: 10px;
}

容器大小不固定，外部元素固定

.container {
  display: grid;
  grid-gap: 10px 10px;
  grid-template-columns: repeat(auto-fill,100px);  
  background-color: #2196F3;
  padding: 10px;
}

左右固定，两头自适应

.container {
  display: grid;
  grid-gap: 10px 10px;
  grid-template-columns: 100px auto 50px;  
  background-color: #2196F3;
  padding: 10px;
}

一个 item 占多个网格

.item-1{
  grid-column-start:1;  // 1 指的是从左到右的网格线序号
  grid-column-start: span 2;//span 关键字，示意 "逾越"，即左右边框（高低边框）之间逾越多少个网格。grid-column-end:4;
  grid-row-start: 2;
  grid-row-end: 4;
}

.item-1 {
  grid-column: 1 / 3;//grid-column 属性是 grid-column-start 和 grid-column-end 的合并简写模式
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

.item {grid-area: <row-start> / <column-start> / <row-end> / <column-end>;}
.item-1 {grid-area: 1 / 1 / 3 / 3;}

须要留神的是 container 里没有进行网格划分的是没有网格线的。例如：
下面 grid-row-start/end 属性占多排是不会失效的。

应用 grid-template-areas 布局

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;   
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "hearder hearder hearder"
    "nav content content"
    "nav content content";
  background-color: #2196F3;
  padding: 10px;
}
.item{background-color: rgba(255, 255, 255, 0.8);  
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
.item-1{grid-area: hearder;}
.item-2{grid-area: nav;}
.item-3{grid-area: content;}
.item-4{grid-area: content;}

未完待续 …