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

未完待续...