CSS布局-grid布局与-响应式布局
容器属性（Container Properties）：
display: 指定网格容器的显示类型，可以设置为 grid 或 inline-grid。
grid-template-rows: 定义网格的行大小，可以使用长度单位（如像素）或百分比，也可以使用自动调整的关键字（如 fr）。
grid-template-columns: 定义网格的列大小，使用方式同上。
grid-template-areas: 使用命名的网格区域来定义网格布局，通过指定区域名称来安排网格项的位置。
grid-template: 缩写形式，同时定义 grid-template-rows、grid-template-columns 和 grid-template-areas。
grid-row-gap: 定义网格行之间的间距。
grid-column-gap: 定义网格列之间的间距。
grid-gap: 缩写形式，同时定义 grid-row-gap 和 grid-column-gap
项目属性（Item Properties）：
grid-row-start: 定义项目开始的行位置。
grid-row-end: 定义项目结束的行位置。
grid-column-start: 定义项目开始的列位置。
grid-column-end: 定义项目结束的列位置。
grid-row: 缩写形式，同时定义 grid-row-start 和 grid-row-end。
grid-column: 缩写形式，同时定义 grid-column-start 和 grid-column-end。
grid-area: 定义项目的网格区域，缩写形式，同时定义 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end。
justify-self: 定义项目在单元格内的水平对齐方式。
align-self: 定义项目在单元格内的垂直对齐方式。
place-self: 缩写形式，同时定义 justify-self 和 align-self。
网格行和列属性（Grid Line and Track Properties）：
grid-auto-rows: 定义自动生成的网格行的大小。
grid-auto-columns: 定义自动生成的网格列的大小。
grid-auto-flow: 控制自动生成的项目如何填充网格，可以设置为 row、column 或 dense。
当涉及到CSS Grid布局的完整代码时，需要提供HTML和CSS两个部分。以下是一个示例，展示了如何使用CSS Grid布局创建一个简单的网格化布局
HTML部分代码：
123456
CSS部分代码：
.container{display: grid; /* 启用grid布局 */grid-template-columns:repeat(3,1fr); /* 创建三列，每列宽度相等 */grid-gap: 10px; /* 设置行列之间的距离 */
}
.container .item{background-color: #ccc;padding: 20px;text-align: center;
}以下是代码样式：
以下是一个：容器总宽度为600px，第一列和第三列宽为100px，并让浏览器将剩余的400px 分配给第二列：
HTML代码：
第一列第二列第三列
CSS代码：
.container{display: grid; /* 启用grid布局 */grid-template-columns:100px auto 100px; /* 第一列和第三列宽度为100px,剩余的空间自动分配给第二列 */grid-gap: 10px; /* 设置行列之间的距离 */width:600px; /* 容器总宽度为600px */
}
.container .item{background-color: #ccc;padding: 20px;text-align: center;
}以下是代码样式：
以下是一个示例："Header-Sidebar-Content-Footer" 布局。它由一个顶部导航栏（Header）、一个侧边栏（Sidebar）、一个内容区域（Content）和一个底部区域（Footer）组成：
HTML代码：
HeaderSidebarContentFooter
CSS代码：
/* 定义网格容器样式 */
.container {display: grid; /* 启用grid布局 */grid-template-columns: 200px 1fr; /* 定义两列，第一列宽度为200px，第二列自动分配剩余空间 */grid-template-rows: auto 1fr auto; /* 定义三行，第一行和第三行根据内容自动调整高度，第二行自动分配剩余空间 */gap: 10px; /* 设置行列之间的间距 */height: 100vh; /* 设置容器的高度为视口高度 */
}/* 定义网格项的共同样式 */
.item {padding: 20px;text-align: center;
}/* 定义网格项为头部 */
.header {grid-column: 1 / span 2; /* 头部跨越两列 */background-color: #f1c40f; /* 设置背景颜色为黄色 */
}/* 定义网格项为侧边栏 */
.sidebar {grid-row: 2 / span 2; /* 侧边栏跨越两行 */background-color: #3498db; /* 设置背景颜色为蓝色 */
}/* 定义网格项为内容 */
.content {grid-column: 2; /* 内容位于第二列 */background-color: #bf40bf; /* 设置背景颜色为紫色 */
}/* 定义网格项为页脚 */
.footer {grid-column: 1 / span 2; /* 页脚跨越两列 */background-color: #e74c3c; /* 设置背景颜色为红色 */
}
以下是代码样式：
以下是一个：多列网格布局（Multi-column grid layout）。使用CSS Grid布局来创建具有多个列和行的网格结构，使网页的布局更加灵活和响应式。在这个布局中，我们定义了网格容器和多个网格项，并使用grid-template-columns和grid-template-rows属性来定义列和行的大小和分布。通过使用这种布局，我们可以轻松地将页面分割成不同的区域，并自定义每个区域的宽度、高度和位置。
HTML代码：
HeaderSidebarMain ContentFooterExtra ContentResponsive ContentCSS代码：
/* 定义网格容器样式 */
.container {display: grid; /* 启用grid布局 */grid-template-columns: 1fr 200px 2fr; /* 定义3列，第一列和第三列按比例分配剩余空间，第二列固定宽度为200px */grid-template-rows: auto 1fr auto; /* 定义三行，第一行和第三行根据内容自动调整高度，第二行自动分配剩余空间 */gap: 20px; /* 设置行列之间的间距 */height: 100vh; /* 设置容器的高度为视口高度 */
}/* 定义网格项的共同样式 */
.item {padding: 20px;text-align: center;color: white; /* 设置文字颜色为白色 */
}/* 定义网格项为头部 */
.header {grid-column: 1 / span 3; /* 头部跨越所有3列 */background-color: #2c3e50; /* 设置背景颜色为深蓝色 */
}/* 定义网格项为侧边栏 */
.sidebar {background-color: #34495e; /* 设置背景颜色为浅蓝色 */
}/* 定义网格项为主要内容 */
.main-content {grid-column: 1 / span 2; /* 主要内容占据2列 */background-color: #2980b9; /* 设置背景颜色为亮蓝色 */
}/* 定义网格项为页脚 */
.footer {grid-column: 1 / span 3; /* 页脚跨越所有3列 */background-color: #e74c3c; /* 设置背景颜色为红色 */
}/* 定义网格项为额外内容 */
.extra {grid-column: 2; /* 额外内容位于第2列 */grid-row: 2; /* 额外内容位于第2行 */background-color: #9b59b6; /* 设置背景颜色为紫色 */
}/* 定义网格项为响应式内容 */
.responsive {grid-column: 1 / span 3; /* 响应式内容跨越所有3列 */grid-row: 3; /* 响应式内容位于第3行 */background-color: #c0392b; /* 设置背景颜色为深红色 */
}/* 响应式布局：在较小的屏幕上，调整网格项的布局 */
@media screen and (max-width: 768px) {/* 重置网格容器样式 */.container {grid-template-columns: 1fr; /* 在较小的屏幕上，只显示一列 */grid-template-rows: auto auto auto auto; /* 调整网格行数，让所有网格项都显示 */}/* 调整头部样式 */.header {grid-column: 1 / span 1; /* 头部跨越1列 */}/* 调整侧边栏样式 */.sidebar {grid-column: 1 / span 1; /* 侧边栏跨越1列 */}/* 调整主要内容样式 */.main-content {grid-column: 1 / span 1; /* 主要内容跨越1列 */}/* 调整页脚样式 */.footer {grid-column: 1 / span 1; /* 页脚跨越1列 */}/* 调整额外内容样式 */.extra {grid-column: 1 / span 1; /* 额外内容跨越1列 */grid-row: 4; /* 额外内容位于第4行 */}/* 调整响应式内容样式 */.responsive {grid-column: 1 / span 1; /* 响应式内容跨越1列 */grid-row: 5; /* 响应式内容位于第5行 */}
}
PC端样式图：
响应式布局样式图：
以下是grid布局响应式布局的讲解和一个示例：
当使用CSS Grid布局实现响应式设计时，我们可以利用媒体查询（Media Queries）来根据不同的屏幕尺寸和设备特性，调整网格布局的结构和样式。通过使用媒体查询，我们可以针对特定的屏幕宽度范围或设备类型，修改网格容器和网格项的属性，从而实现响应式布局
当屏幕宽度小于等于768px时，媒体查询 @media screen and (max-width: 768px) 生效。我们将网格容器的列数修改为两列，使其在较小的屏幕上呈现为两列布局。
当屏幕宽度小于等于480px时，媒体查询 @media screen and (max-width: 480px) 生效。我们将网格容器的列数修改为一列，使其在更小的屏幕上呈现为单列布局。
通过这种方式，我们可以根据不同的屏幕尺寸，灵活地调整网格布局的结构，以适应不同的设备并提供最佳的用户体验。您可以根据实际需求和设计要求，使用媒体查询来自定义响应式网格布局的样式。
以下面是一个示例，演示如何在不同屏幕尺寸下调整网格布局：
HTML代码：
Item 1Item 2Item 3Item 4Item 5Item 6
CSS代码：
/* 定义网格容器 */
.container {display: grid; /* 启用grid布局 */grid-template-columns: repeat(3, 1fr); /* 初始情况下有3列，每列平均占据可用空间 */grid-gap: 20px; /* 网格项之间的间距 */
}/* 定义网格项 */
.item {padding: 20px; /* 网格项的内边距 */text-align: center; /* 文本居中对齐 */
}/* 每个网格项的颜色 */
.item:nth-child(1) {background-color: #ff8080; /* 网格项1的背景颜色 */
}.item:nth-child(2) {background-color: #80b3ff; /* 网格项2的背景颜色 */
}.item:nth-child(3) {background-color: #b3ff80; /* 网格项3的背景颜色 */
}.item:nth-child(4) {background-color: #ffcc80; /* 网格项4的背景颜色 */
}.item:nth-child(5) {background-color: #cc80ff; /* 网格项5的背景颜色 */
}.item:nth-child(6) {background-color: #80ffd4; /* 网格项6的背景颜色 */
}/* 在较小的屏幕上调整布局 */
@media screen and (max-width: 768px) {.container {grid-template-columns: repeat(2, 1fr); /* 2列布局 */}
}/* 在更小的屏幕上调整布局 */
@media screen and (max-width: 480px) {.container {grid-template-columns: 1fr; /* 单列布局 */}
}
样式图：
通过这种方式，我们可以根据不同的屏幕尺寸，灵活地调整网格布局的结构，以适应不同的设备并提供最佳的用户体验。您可以根据实际需求和设计要求，使用媒体查询来自定义响应式网格布局的样式。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！