关于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;
}

未完待续…