grid-layout（网格布局）初探
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <link rel="stylesheet" href="zjy字体图标/style.css" /> <style type="text/css" id="css"> /*创建了一个三列轨道网格*/ .wrapper { /*创建一个网格布局*/ display: grid; /*创建了3列，三列宽度相等 且等同： grid-template-columns:1fr 1fr 1fr; 注：fr是减去固定位置的宽度，然后把剩下的宽度进行比列分割*/ grid-template-columns: repeat(3, 1fr); /*网格单元格行和列的间距都为10px 等同：grid-column-gap:10px grid-row-gap=10px*/ grid-gap: 10px; /*网格单元行（长）的最小宽度为100px,最大为自动适应宽度*/ grid-auto-rows: minmax(100px, auto); } /*单元格是网格线交织而形成的封闭空间*/ .one { background-color: red; /*这一个单元格的列网格线是从 1到3*/ grid-column: 1 / 3; /*这一个单元格的行网格线是 1，这个没有围成一个封闭的空间，但是由于是列为auto，所以他补全了第三个单元上面的空隙*/ grid-row: 1/3; } .two { background: palegoldenrod; /*这一个单元格的列网格线是从 2到4*/ grid-column: 2 / 4; /*这一个单元格的行网格线是 1到3*/ grid-row: 1 / 3; } .three { background: pink; /*这一个单元格的列网格线是1*/ grid-column: 1; /*这一个单元格的行网格线是 2到5 出现最大列*/ grid-row: 2 / 5; } .four { background: deepskyblue; /*这一个单元格的列网格线是3*/ grid-column: 3; /*这一个单元格的行网格线是 1到3*/ grid-row: 3; } .five { background: yellow; /*这一个单元格的列网格线是2*/ grid-column: 2; /*这一个单元格的行网格线是4*/ grid-row: 4; } .six { background: greenyellow; /*这一个单元格的列网格线是3*/ grid-column: 3; /*这一个单元格的行网格线是 4*/ grid-row: 4; } /*总结：1.列已经在父元素wraper中已经确定为三列，三列就有4个列网格线 * 2.第三个中单元格中，出现了最大的网格线为5，说明有4行。 * 2.说明一个网格布局中总共有4行3列，12个单元格 * * 4.一个区域可以由行网格线和列的网格线序号来确定（当然，也可以自己给网格线取名字） * 5.其中，如果有的行是单个或者列是单个数字，没有组成一个封闭区域，但是auto可以自动的补全。 * 6.如果列的高度如果确定，可以尝试一下单个数字的效果，嗯，电脑没电了 * * */ </style> </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>
