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

未完待续...