1027作业
grid布局显示网格与项目属性
<body> <div class="container"> <div class="item">item1</div> </div> <style> .container{ width: 300px; height:100px; display: grid; /* 显示网格 */ /* 3列3行 宽度为100的50 */ /* grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px 50px; */ /* 3列3行 宽度为100的50 */ /* grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 50px); */ /* 显示网格 repeat:重复 fr：为比例 */ grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); } .container > .item{ background-color: bisque; /* 起始行 / 结束行*/ grid-row: 3/4; /* 起始列/结束列 */ grid-column:1/2; grid-row: 1 /span 1; grid-column: 1 / span 1; /* grid-area: 行开始/列开始/行结束/列结束; */ grid-area: 3/1/span 1/span 3; } </style>
实例效果
grid布局隐式网格与与排列规则
<title>grid隐式网格与与排列规则</title></head><body> <div class="container"> <div class="item">item-1</div> <div class="item">item-2</div> <div class="item">item-3</div> <div class="item">item-4</div> <div class="item">item-5</div> <div class="item">item-6</div> <div class="item">item-7</div> <div class="item">item-8</div> <div class="item">item-9</div> <!-- 在加2个项目 --> <div class="item other">item-10</div> <div class="item other">item-11</div> </div> <style> .container{ width: 400px; height: 150px; display: grid; /* 显示网格绘制 */ grid-template-rows: repeat(3,1fr); grid-template-columns: repeat(3,1fr); /* 1.排列规则 默认按照行排列*/ grid-auto-flow: row; /* 列 排列 */ /* grid-auto-flow: column; */ /* 2.隐式网格 多余的项目，出现在隐式网格中*/ grid-auto-rows: 1fr; /* 列优先排列 */ grid-auto-flow: column; /* 设置隐式网格的列宽 */ grid-auto-columns: 100px; } .container > .item{ background-color: antiquewhite; } .container > .item.other{ background-color: orange; } /* 排列规则：grid-auto-flow：row/column 行优先与列有优先 隐式网格：grid-auto-row/colum 设置隐式网格的行与列 */ </style></body>
实例效果
grid布局项目在容器中对齐与项目在单元格中对齐
<title>grid项目在容器中对齐与项目在单元格中对齐</title></head><body> <div class="container"> <div class="item">item-1</div> <div class="item">item-2</div> <div class="item">item-3</div> <div class="item">item-4</div> <div class="item">item-5</div> <div class="item">item-6</div> <div class="item">item-7</div> <div class="item">item-8</div> <div class="item">item-9</div> </div> <style> /** * * 1. 对齐前提: 必须存在"剩余空间" * * 2. 对齐方案: "剩余空间"在"项目"之间的分配方式 * * 3. 剩余空间: Flex(主轴, 交叉轴), Grid(容器, 单元格) * * Grid: 剩余空间存在于"容器" 或 "单元格" * * 容器中: place-content, place-items * * 项目中: place-self */ .container{ background-color: aqua; border: 1px solid; /* 创建网格剩余空间 */ width: 600px; height: 600px; display: grid; grid-template-columns: repeat(3,100px); grid-template-rows: repeat(3,100px); /* 1.项目在容器中对齐 */ /* place-content: 垂直方向 水平方向; */ /* 默认垂直居上 水平居左 */ /* place-content: start start; */ /* 垂直居中 水平居中 */ /* place-content: center center; */ /* 垂直居中 水平居右 */ place-content: center end; /* 重复值可以省略 */ place-content: center; place-content: space-between space-around; place-content: space-between ; place-content: space-around; /* ---------------------------- */ /*2.项目在单元格中对齐 */ /* 项目在单元格中要有剩余空间才能实现对其， */ /* place-items: 垂直方向 水平方向; */ /* 默认垂直居上 水平居左 */ /* place-items: start; */ /* 垂直居中 水平居中 */ place-items: center; /* 垂直居中 水平居右 */ /* place-items: center end; */ /* place-items: space-between space-between; */ } .container > .item{ background-color: antiquewhite; width: 80px; height: 80px; place-items: space-between space-between; } /* 设置某个项目在单元格中单独设置 */ .container > .item:nth-child(5){ background-color:aquamarine; /* 选中单独设置某个单元格 */ place-self: end; } </style></body>
实例效果
grid布局中的行列间隙 gap
title>grid布局中的行列间隙</title></head><body> <div class="container"> <div class="item">item-1</div> <div class="item">item-2</div> <div class="item">item-3</div> <div class="item">item-4</div> <div class="item">item-5</div> <div class="item">item-6</div> <div class="item">item-7</div> <div class="item">item-8</div> <div class="item">item-9</div> </div> <style> .container{ background-color: antiquewhite; display: grid; width: 400px; height: 400px; border: 2px solid; grid-template-columns: repeat(3,100px); grid-template-rows: repeat(3,100px); /* 行列间隙 */ /* gap:垂直方向，水平方向 */ gap:10px; } .container > .item{ background-color: aqua; /* margin: 10px; */ } </style></body>
案例效果
