<!DOCTYPE <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="Untitled-6.css"> <meta charset="utf-8" /> <title>Page Title</title> </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); /*grid-template-columnsCSS定义属性行的名称状语从句：跟踪的大小功能网格列*/ /*repeat()CSS功能表示曲目列表的重复片段，允许大量表现出以更紧凑的形式被写入的重复图案的列或行的*/ /*repeat()接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸。fr是一个弹性尺寸单位，可以帮助我们创建一个弹性的网格轨道。它代表了网格容器中可用的空间。*/ grid-gap: 10px; /*grid-gap属性是一个简写属性，该grid-gap物业是grid-column-gap和grid-row-gap物业的简写用于设置网格行和列之间的装订线*/ /*如果只设置了一个值，表示行和列的间距相等，也就是说grid-row-gap和grid-column-gap的值相同*/ /*10px代表10像素*/ grid-auto-rows: minmax(100px, auto); /*grid-auto-rowsCSS属性指定的隐含创建的网格行的轨道的大小*/ /*CSS函数minmax()定义了一个长宽范围的闭区间， 它与CSS网格布局一起使用,通过minmax()函数来创建网络轨道的最小或最大尺寸。minmax()函数接受两个参数：第一个参数定义网络轨道的最小值，第二个参数定义网络轨道的最大值。可以接受任何长度值，也可以接受auto值。auto值允许网络轨道基于内容的尺寸拉伸或挤压。*/ /*100px代表100像素 auto是自动的意思*/ } .one { grid-column: 1 / 3; /*grid-columns 属性网格中每列的宽度*/ /*grid-column是grid-column-start和grid-column-end的简写。通过贡献一条线，一个跨度，或全无（自动），以它的网格位置，从而指定的直行开始和直行边缘指定网格列内的网格项的大小和位置其网络面积。如果只提供一个值，则指定了grid-column-start值；如果提供两个值，第一个是grid-column-start的值，第二个是grid-column-end的值，两者之间必须要用“/”隔开。（默认值为auto)*/ grid-row: 1; /*grid-rows 属性规定网格中每行的高度*/ /*grid-row是grid-row-start和grid-row-end的简写。通过贡献一条线，一个跨度，或全无（自动），以它的网格位置，从而指定的直列开始和直列边缘指定网格行内的网格项的大小和位置其网络面积。如果只提供一个值，则指定了grid-row-start值；如果提供两个值，第一个是grid-row-start的值，第二个是grid-row-end的值，两者之间必须要用“/”隔开。（默认值为auto)*/ } .two { grid-column: 2 / 4; grid-row: 1 / 3; } .three { grid-column: 1; grid-row: 2 / 5; } .four { grid-column: 3; grid-row: 3; } .five { grid-column: 2; grid-row: 4; } .six { grid-column: 3; grid-row: 4; }