4st grid layout网格布局基本注释

<!DOCTYPE html>
<html>
<head>
	<title>grid layout布局代码注释</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="4st1 grid layout.css">
</head>
<body>
	<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

</body>
</html>

.wrapper {
  display: grid;/*创建一个网格容器*/
  grid-template-columns: repeat(3, 1fr);/*定义网格列的行名和跟踪大小函数。 把网格分成平均等宽三列 （fr是一个自动适应单位）简言之表示以更紧凑的形式编写大量显示重复模式的列。 */
  grid-gap: 10px;/*行列之间的栏与栏距离为10px间距 仅仅作用于网格之间不作用于容器边缘*/
  grid-auto-rows: minmax(100px, auto)；/*指定隐式创建的网格行轨道的大小。当你定位网格超出网格容器范围时，将自动创建隐式网格轨道。网格高最小为100px*/
}
.one {
  grid-column: 1 / 3;/*子元素块one从网格线第一列开始第三列结束*/
  grid-row: 1;/*子元素块one从网格线第一行开始第二行结束*/
}
.two { 
  grid-column: 2 / 4;/*子元素块two从网格线第二列开始第四列结束*/
  grid-row: 1 / 3;/*子元素块two从网格线第一行开始第三行结束*/
}
.three {
  grid-column: 1;/*子元素块three从网格线第一列开始第二列结束*/
  grid-row: 2 / 5;/*子元素块three从网格线第二行开始第五行结束*/
}
.four {
  grid-column: 3;/*子元素块four从网格线第三列开始第四列结束*/
  grid-row: 3;/*子元素块four从网格线第三行开始第三行结束*/
}
.five {
  grid-column: 2;/*子元素块five从网格线第二列开始第三列结束*/
  grid-row: 4;/*子元素块five从网格线第四行开始第五行结束*/
}
.six {
  grid-column: 3;/*子元素块six从网格线第三列开始第四列结束*/
  grid-row: 4;/*子元素块six从网格线第四行开始第五行结束*/
}

4st grid layout网格布局基本注释

猜你喜欢