grid【父元素布局方式】【三】

第一篇的父元素布局样式

第一种写法

.contaniner {
				width: 400px;
				height: 400px;
				display: -webkit-grid;
				display: grid;
				grid-template-columns: 100px 100px 100px auto;
				grid-template-rows: 100px 100px 100px auto;
				background-color: hotpink;
			}

第二种写法

.contaniner {
				width: 400px;
				height: 400px;
				display: -webkit-grid;
				display: grid;
				grid: 100px 100px 100px auto / 100px 100px 100px auto;
				background-color: hotpink;
			}

新的单位引入

.contaniner {
				width: 400px;
				height: 400px;
				display: -webkit-grid;
				display: grid;
				grid: 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr;
				background-color: hotpink;
			}

fr是将当前元素等分

grid: 25% 1fr 1fr 1fr / 1fr 1fr 1fr 1fr;  

支持百分比