标签：idt tar column 位置 接受 end 表示 lan 显示
CSS Grid Layout为CSS引入了一个二维网格系统。网格可用于布局主要页面区域或小型用户界面元素。
网格是一组交叉的水平和垂直线 - 一组定义列，其他行。元素可以放在网格上，以行或者列为标准。
grid布局的优点：
1：固定和灵活的轨道尺寸
2：可以使用行号，名称或通过定位网格区域将项目放置在网格上的精确位置。网格还包含一种算法，用于控制未在网格上显示位置的项目的放置。
3：在需要时添加其他行和列
4：网格包含对齐功能，以便我们可以控制项目放置到网格区域后的对齐方式，以及整个网格的对齐方式。
5：可以将多个项目放入网格单元格或区域中，它们可以彼此部分重叠。然后可以用z-index属性控制该分层。
父元素必须设置display为grid或inline-grid
父元素grid属性：
grid子元素的属性：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> *{ padding: 0; margin: 0; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: minmax(100px, auto); } .wrapper div{ background-color: aquamarine; } .one { grid-column: 1 / 3; grid-row: 1; } .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; } </style> <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>
标签：idt tar column 位置 接受 end 表示 lan 显示
原文地址：https://www.cnblogs.com/NineKit/p/9775804.html
