9个grid属性,并详解每个属性的用途
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>grid容器</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; background-color: brown; } html { font-size: 16px; } div.container { /* 设置container容器的大小和颜色 */ width: 20rem; height: 20rem; background-color: green; /* 创建grid风格容器 */ display: grid; /* 画表格 */ /* 画行 */ /* grid-template-rows: 5rem 5rem 5rem; */ grid-template-rows: repeat(3, 5rem); /* 画例 */ /* grid-template-columns: 5rem 5rem 5rem; */ grid-template-columns: repeat(3, 5rem); /* 单元格方向 */ /* 主轴方向 */ grid-auto-flow: row; /* 交叉轴方向 */ /* grid-auto-flow: column; */ /* 多的单元格放入那里 */ grid-auto-columns: 5rem; /* grap 行间距 列间距 */ gap: 1rem 1rem; /* grip容器的对齐方式 */ /* 垂直 水平对齐 */ place-content: center; place-content: start center; place-content: start start; place-content: center start; place-content: end end; /* 剩余空间分配 */ place-content: space-between; place-content: space-between space-around; place-content: space-between space-evenly; /* 项目在单元中的对齐方式 */ /* 先对单元内容缩小 */ place-items: center; place-items: start start; place-items: end end; place-items: start center; place-items: center; } /* 奇数的单元格颜色 */ div.item:nth-of-type(odd) { background-color: yellow; } /* 偶数的单元格颜色 */ div.item:nth-of-type(2n) { background-color: blue; } /* 对单元内容缩小 */ div.item { width: 3rem; height: 3rem; } /* 对个别单元格位置调整 */ div.item:nth-last-of-type(-n + 3) { place-self: end center; } </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <!-- 多出来的单元 --> <!-- <div class="item">10</div> --> </div> </body></html>
