<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 网格布局 */
/* 创建网格 */
.box {
/* 网格布局 */
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: 100px 100px 100px;
width: 320px;
height: 320px;
border: 1px solid #9d2626;
margin: 20px;
}
.box div {
background-color: pink;
border: 1px solid #000000;
}
/* 对齐方式 */
.box1 {
/* 对齐方式 */
/* 1. flex-start：左对齐 ABC----
2. flex-end：右对齐 ----ABC
3. center：居中对齐 --ABC--
4. space-between：项目之间等间距对齐 A--B--C--D
5. space-around：项目之间等间距对齐，项目与边框距离相等 -A--B--C-
6. space-evenly：项目等间距对齐，项目与边框距离相等 --A--B--C--*/
justify-content: space-between;
align-content: center;
}
/* 如果想做延申的盒子 */
/* 1.不要设置行轨道数量 */
/* 2.给子盒子设置高度 */
.content {
display: grid;
grid-template-columns: repeat(5, 160px);
width: 1000px;
margin: 0 auto;
border: 1px solid #9d2626;
justify-content: space-between;
}
.content div {
height: 100px;
background-color: pink;
margin-bottom: 20px;
}
/* fr单位 */
.box2 {
/* fr网格布局 */
/* 1fr表示占一份 */
display: grid;
/* repeat写法 */
/* repeat(3, 1fr); */
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr 2fr 1fr;
width: 320px;
height: 320px;
border: 1px solid #9d2626;
margin: 20px;
}
.box2 div {
background-color: pink;
border: 1px solid #000000;
border-radius: 10px;
}
/* gap函数 */
.box2 {
/* gap函数 */
/* gap: 20px; 上下左右间距为20px */
/* gap: 20px 40px; 上下间距为20px，左右间距为40px */
gap: 20px;
}
/* 响应式写法 */
.box3 {
display: grid;
/* 响应式写法 */
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
/* 属性：auto-fit，自动适应，如果内容不足网格大小会填满整行；
auto-fill，不会自动填充，根据内容自适应列数 */
width: 80%;
margin: 20px auto;
border: 1px solid #9d2626;
height: 300px;
}
.box3 div {
background-color: pink;
height: 120px;
}
/* 网格线 */
/* 语法1：grid-columns: 1/3; */
/* 语法2：grid-columns: 1/span 2; */
.box4 {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
border: 1px solid #9d2626;
}
.box4 div {
background-color: pink;
height: 120px;
}
.box4 .item:first-child {
/* 第一个项目占满两列两行 */
grid-column: 1/3;
grid-row: 1/span 2;
/* 注意：原本盒子有高度，无法填满
第一个项目需要设置自适应高度 */
height: auto;
}
/* 网格填充方式 */
.box5 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 500px;
border: 1px solid #9d2626;
grid-auto-flow: column;
}
.box5 div {
background-color: pink;
height: 120px;
}
.box5 div:first-child {
grid-row: 1/span 2;
height: auto;
}
.box5 div:nth-child(3) {
grid-row: 2/3;
grid-column: 2/span 2;
}
/* object-fit */
.box6 div img {
/* 属性：object-fit */
/* 1. cover：图片等比例缩放，填充父盒子，可能会被裁剪 */
/* 2. contain：图片保持长宽比等比例缩放，不会被裁剪，可能会有空白区域 */
/* 3. fill：默认值，图片拉伸，不保持长宽比，会形变 */
object-fit: cover;
/* 属性：object-position */
/* 用于配合object-fit属性使用 */
/* 1. center：居中对齐 */
/* 2. top：顶部对齐 */
/* 3. bottom：底部对齐 */
/* 4. left：左侧对齐 */
/* 5. right：右侧对齐 */
object-position: top left;
width: 100%;
height: 100%;
}
.box6 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 60%;
border: 1px solid #9d2626;
grid-auto-flow: column;
}
.box6 div {
background-color: pink;
height: 120px;
}
.box6 div:first-child {
grid-row: 1/span 2;
height: auto;
}
.box6 div:nth-child(3) {
grid-row: 2/3;
grid-column: 2/span 2;
}
/* 项目对齐方式 */
/* 控制单元格里的子元素对齐 */
/* justify-items: stretch;
align-items-items: stretch; 默认值，拉伸填满整个网格单元格 */
/* 属性： */
/* 1. center：居中对齐 */
/* 2. start：左侧对齐 */
/* 3. end：右侧对齐 */
/* 4. stretch：默认值，拉伸 */
.box7 {
/* 项目对齐方式 */
justify-items: center;
align-items: center;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 350px;
height: 350px;
border: 1px solid #9d2626;
margin: 20px;
}
.box7 div {
background-color: pink;
height: 60px;
width: 60px;
}
</style>
</head>
<body>
<div class="box box1">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
</div>
<br>
<div class="content">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
</div>
<br>
<div class="box2">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
</div>
<br>
<div class="box3">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
</div>
<br>
<div class="box4">
<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 class="item">11</div>
<div class="item">12</div>
</div>
<br>
<div class="box5">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<br>
<div class="box6">
<div class="item"><img src="./上箭头.jpg" alt=""></div>
<div class="item"><img src="./背景.png" alt=""></div>
<div class="item"><img src="./下箭头.jpg" alt=""></div>
<div class="item"><img src="./背景.png" alt=""></div>
</div>
<br>
<div class="box7">
<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>
</body>
</html>
下载链接：