一个简单的grid布局基础例子注释及相关分析
HTML:
<!DOCTYPE html>
<!--全称为Document Type HyperText Mark-up Language即为文档种类为超文本标记性语言或超文本链接标示语言，放在html前面，用来声明文档的解析类型-->
<html lang="en"> <!--向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english-->
<head> <!--头部标签-->
<meta charset="UTF-8"><!--meta标签通常出现在头部， 定义HTML 文档的字符编码为"UTF-8"-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 定义名称为视口，可视区域的宽度，值可为数字或关键词device-width，页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放-->
<meta http-equiv="X-UA-Compatible" content="ie=edge"><!--以上代码IE = edge告诉IE使用最新的引擎渲染网页，chrome = 1则可以激活Chrome Frame .-->
<title>Document</title><!--标题为Document-->
<link rel="stylesheet" href="css/style.css"><!--告诉浏览器采用样式表，连接该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>
CSS:
.wrapper { display: grid;/*属性规定元素应该生成的框的类型为网格。*/ grid-template-columns: repeat(3, 1fr);/*网格模板列为3列自动填充的列*/ grid-gap: 10px;/*网格差距为10px的距离*/ grid-auto-rows: minmax(100px, auto);/*网格自动行最小为100px的高度最大至自动的范围*/ } .one { grid-column: 1 / 3;/*one块列起始位置为1末位置为3*/ grid-row: 1; /*one块行位置位于第一行*/ } .two { grid-column: 2 / 4; /*two块的列起始位置为2末位置为4*/ grid-row: 1 / 3; /*two块的行起始位置为1末位置为3*/ } .three { grid-column: 1;/*three块的列位于第一列*/ grid-row: 2 / 5;/*three块的行起始位置为2末位置为5*/ } .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块的行位于第四行*/
