在前端开发的广袤天地中，布局是构建网页的灵魂所在。CSS网格布局(Grid Layout)，以其强大的功能和灵活性，为我们打开了一扇通往无限可能的大门。今天，我怀着激动的心情，在这里与大家分享我的16种令人眼前一亮的CSS网格布局设计。
你是否曾经为如何将页面元素以最和谐、美观的方式组合在一起而烦恼？你是否渴望找到一种既能简化工作流程又能提升用户界面体验的方法？如果你的答案是肯定的，那么这些精心挑选的CSS网格布局案例绝对是你的宝藏指南。
从简约而不简单的单列布局，到复杂且富有层次感的多栏分布；从充满创意的重叠效果，到响应式设计中的巧妙应用------每一种布局都蕴含着设计师对美学与实用性的深刻理解。它们不仅仅是代码的堆砌，更是视觉艺术与编程技术的完美融合。
无论你是经验丰富的前端开发者，还是刚刚踏上这段旅程的新手，这16种CSS网格布局都将为你带来全新的视角和灵感。让我们一起探索这些神奇的设计，学习如何运用CSS网格布局来创造出既美观又高效的网页吧！🥰🥰
网格布局示例 1
这张图片展示了一个简单的网格布局，包含6个单元格。每个单元格都有不同的背景颜色和编号，具体如下：
- 第一行：两个蓝色单元格（1 和 2）
- 第二行：一个蓝色单元格（3）和一个黄色单元格（4）
- 第三行：一个黄色单元格（5）和一个蓝色单元格（6）
这种布局非常适合用于需要清晰划分内容区域的场景，例如信息卡片、产品列表或页面模块。通过使用不同的颜色和排列方式，可以轻松地突出显示不同的内容块，提高用户体验。
css
.grid-layout{
/* 王国哥哥布局- 自身是一个行内块元素 */
display: inline-grid;
/* 划分3行，每行高100px */
grid-template-columns: repeat(3, 100px);
/* 划分 3列，每列宽 100px */
grid-template-rows: repeat(3, 100px);
/* 划分网格区域 */
grid-template-areas:
"a b b"
"c c d"
"e f f";
/* 行间距都为10px */
gap: 10px;
}
/* 指定项目所占据的网格区域 */
.grid-item:nth-child(2) {grid-area:b}
.grid-item:nth-child(3) {grid-area:c}
.grid-item:nth-child(6) {grid-area:f}
.bg-skyblue {background-color: skyblue;}
.bg-khaki {background-color: khaki;}
</style>
html
<div class="grid-layout">
<div class="grid-item bg-khaki">1</div>
<div class="grid-item bg-skyblue">2</div>
<div class="grid-item bg-skyblue">3</div>
<div class="grid-item bg-khaki">4</div>
<div class="grid-item bg-khaki">5</div>
<div class="grid-item bg-skyblue">6</div>
</div>网格布局示例 2
这张图片展示了一个独特的网格布局，包含6个单元格。每个单元格都有不同的背景颜色和编号，具体如下：
- 第一行：三个蓝色单元格（1、2 和 3）
- 第二行：一个蓝色单元格（4）和一个黄色单元格（5）
- 第三行：一个蓝色单元格（6）
这种布局的特点是第一行的三个单元格占据了大部分空间，而第二行和第三行的单元格则分布得较为紧凑。这种设计非常适合用于需要突出显示顶部内容的场景，例如首页的特色展示或重要信息的突出。
css
<style>
.grid-layout{
/* 王国哥哥布局- 自身是一个行内块元素 */
display: inline-grid;
/* 划分3行，每行高100px */
grid-template-columns: repeat(3, 100px);
/* 划分 3列，每列宽 100px */
grid-template-rows: repeat(3, 100px);
/* 划分网格区域 */
grid-template-areas:
"a b c"
"d b f"
"d e f";
/* 行间距都为10px */
gap: 10px;
}
/* 指定项目所占据的网格区域 */
.grid-item:nth-child(2) {grid-area:b}
.grid-item:nth-child(4) {grid-area:d}
.grid-item:nth-child(6) {grid-area:f}
.bg-skyblue {background-color: skyblue;}
.bg-khaki {background-color: khaki;}
</style>
html
<body>
<div class="grid-layout">
<div class="grid-item bg-khaki">1</div>
<div class="grid-item bg-skyblue">2</div>
<div class="grid-item bg-skyblue">3</div>
<div class="grid-item bg-khaki">4</div>
<div class="grid-item bg-khaki">5</div>
<div class="grid-item bg-skyblue">6</div>
</div>
</body>网格布局示例 3
这张图片展示了一个独特的网格布局，包含6个单元格。每个单元格都有不同的背景颜色和编号，具体如下：
- 第一行：一个大黄色单元格（1）和两个蓝色单元格（2 和 3）
- 第二行：三个蓝色单元格（4、5 和 6）
这种布局的特点是第一行左侧的大单元格占据了较大的空间，右侧有两个较小的单元格。第二行则是三个较小的单元格均匀分布。
特点
- 大单元格突出显示：左侧的大黄色单元格可以用于突出显示重要的内容或信息。
- 紧凑布局：右侧和第二行的小单元格适合放置次要信息或相关链接。
应用场景
- 首页特色展示：大单元格可以用于展示重要新闻或特色内容。
- 产品列表：小单元格可以用于展示多个产品或项目。
css
<style>
.grid-layout{
margin: 100px 0px 0px 500px;
/* 网格布局- 自身是一个行内块元素 */
display: inline-grid;
/* 划分3行3列，每行高100px */
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
gap: 10px; /* 网格行列间距都为 10px */
}
/* 指定项目所占据的网格区域 */
.grid-item:nth-child(1){
/* 起始行号 / 起始列号 / 跨越的行数 / 跨越的列数 */
grid-area: 1 / 1 / span 2 / span 2;
}
.bg-skyblue {background-color: skyblue;}
.bg-khaki {background-color: khaki;}
</style>
html
<div class="grid-layout">
<div class="grid-item bg-khaki">1</div>
<div class="grid-item bg-skyblue">2</div>
<div class="grid-item bg-skyblue">3</div>
<div class="grid-item bg-skyblue">4</div>
<div class="grid-item bg-skyblue">5</div>
<div class="grid-item bg-skyblue">6</div>
</div>网格布局示例 4
这张图片展示了一个独特的网格布局，包含11个单元格。每个单元格都有不同的背景颜色和编号，具体如下：
- 第一行：三个黄色单元格（1、2 和 3）
- 第二行：两个黄色单元格（4 和 6），中间是一个红色大单元格（5）
- 第三行：三个黄色单元格（7、8 和 9）
- 第四行：两个黄色单元格（10 和 11）
特点
- 中央突出显示：中间的红色大单元格（5）占据了显著的位置，可以用于突出显示重要的内容或信息。
- 对称布局：周围的黄色单元格均匀分布，形成对称的视觉效果。
应用场景
- 首页焦点内容：中央的大单元格可以用于展示重要新闻、特色产品或关键信息。
- 模块化设计：周围的小单元格适合放置次要信息、相关链接或模块化的功能区域。
总结
这种布局通过中央的大单元格和周围对称分布的小单元格，不仅突出了核心内容，还保持了整体布局的整洁和美观。非常适合用于需要重点突出特定信息的页面设计。
css
<style>
.grid-layout{
/* 网格布局- 自身是一个行内块元素 */
display: inline-grid;
/* 划分4行，每行高100px 划分5列，每列宽 80px */
grid-template-columns: repeat(5, 80px);
grid-template-rows: repeat(4, 100px);
/* 划分网格区域 */
grid-template-areas:
"a a b c c"
"d e e e f"
"g e e e h"
"i i j k k";
/* 行间距都为10px */
gap: 10px;
}
/* 指定项目所占据的网格区域 */
.grid-item:nth-child(1) {grid-area:a}
.grid-item:nth-child(3) {grid-area:c}
.grid-item:nth-child(5) {grid-area:e}
.grid-item:nth-child(9) {grid-area:i}
.grid-item:nth-child(11) {grid-area:k}
.bg-skyblue {background-color: skyblue;}
.bg-khaki {background-color: khaki;}
.bg-tomato {background-color: tomato;}
</style>
html
<div class="grid-layout">
<div class="grid-item bg-khaki">1</div>
<div class="grid-item bg-skyblue">2</div>
<div class="grid-item bg-khaki">3</div>
<div class="grid-item bg-skyblue">4</div>
<div class="grid-item bg-tomato">5</div>
<div class="grid-item bg-skyblue">6</div>
<div class="grid-item bg-skyblue">7</div>
<div class="grid-item bg-skyblue">8</div>
<div class="grid-item bg-khaki">9</div>
<div class="grid-item bg-skyblue">10</div>
<div class="grid-item bg-khaki">11</div>
</div>网格布局示例 5
这张图片展示了一个独特的网格布局，包含7个单元格。每个单元格都有不同的背景颜色和编号，具体如下：
- 第一行：三个单元格（1、2 和 3），其中2号单元格为浅蓝色。
- 第二行：一个大红色单元格（4）占据了两列。
- 第三行：三个单元格（5、6 和 7），其中5号单元格为浅蓝色。
特点
- 中央突出显示：中间的大红色单元格（4）占据了显著的位置，可以用于突出显示重要的内容或信息。
- 对称布局：第一行和第三行的单元格均匀分布，形成对称的视觉效果。
应用场景
- 首页焦点内容：中央的大单元格可以用于展示重要新闻、特色产品或关键信息。
- 模块化设计：周围的小单元格适合放置次要信息、相关链接或模块化的功能区域。
总结
这种布局通过中央的大单元格和周围对称分布的小单元格，不仅突出了核心内容，还保持了整体布局的整洁和美观。非常适合用于需要重点突出特定信息的页面设计。
css
<style>
.grid-layout{
/* 王国哥哥布局- 自身是一个行内块元素 */
display: inline-grid;
/* 划分5行，每行高60px 划分3列，每列宽 100px */
grid-template-columns: repeat(3, 60px);
grid-template-rows: repeat(5, 60px);
/* 划分网格区域 */
grid-template-areas:
"a b c"
"d d d"
"d d d"
"d d d"
"e f g";
/* 行间距都为10px */
gap: 10px;
}
/* 指定项目所占据的网格区域 */
.grid-item:nth-child(4) {grid-area:d}
/* .grid-item:nth-child(3) {grid-area:c}
.grid-item:nth-child(5) {grid-area:e}
.grid-item:nth-child(9) {grid-area:i}
.grid-item:nth-child(11) {grid-area:k} */
.bg-skyblue {background-color: skyblue;}
.bg-khaki {background-color: khaki;}
.bg-tomato {background-color: tomato;}
</style>
html
<div class="grid-layout">
<div class="grid-item bg-khaki">1</div>
<div class="grid-item bg-skyblue">2</div>
<div class="grid-item bg-khaki">3</div>
<div class="grid-item bg-tomato">4</div>
<div class="grid-item bg-khaki">5</div>
<div class="grid-item bg-khaki">6</div>
<div class="grid-item bg-khaki">7</div>
</div>网格布局示例 6
这张图片展示了一个独特的网格布局，包含7个单元格。每个单元格都有不同的背景颜色和编号，具体如下：
- 第一行：两个单元格（1 和 2），其中1号单元格为黄色，2号单元格为蓝色。
- 第二行：三个单元格（3、4 和 5），其中4号单元格被分为四个小红色单元格。
- 第三行：两个单元格（6 和 7），其中6号单元格为蓝色，7号单元格为黄色。
特点
- 混合大小的单元格：第一行和第三行的单元格是标准大小，而第二行中间的单元格被细分为四个更小的单元格。
- 颜色对比：使用了黄色、蓝色和红色来区分不同的区域，增强了视觉效果。
应用场景
- 模块化内容展示：适合用于展示不同类型的模块化内容，如新闻、产品或功能模块。
- 焦点区域：第二行中间的细分单元格可以用于突出显示特定信息或交互元素。
总结
这种布局通过混合大小的单元格和鲜明的颜色对比，不仅突出了核心内容，还保持了整体布局的整洁和美观。非常适合用于需要灵活展示多种内容的页面设计。
css
<style>
.grid-layout{
/* 网格布局- 自身是一个行内块元素 */
display: inline-grid;
/* 划分3行3列，每行高100px */
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
grid-template-areas:
"a b b"
"c d e"
"f f g";
gap: 10px; /* 网格行列间距都为 10px */
}
/* 指定项目所占据的网格区域 */
.grid-item:nth-child(2){
grid-area: b;
}
.grid-item:nth-child(3){ grid-area : c;}
.grid-item:nth-child(4){
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 4px;
}
.grid-item:nth-child(6) {grid-area: f}
.bg-skyblue {background-color: skyblue;}
.bg-khaki {background-color: khaki;}
.bg-tomato {background-color: tomato;}
</style>
html
<div class="grid-layout">
<div class="grid-item bg-khaki">1</div>
<div class="grid-item bg-skyblue">2</div>
<div class="grid-item bg-khaki">3</div>
<div class="grid-item">
<div class="bg-tomato"></div>
<div class="bg-tomato"></div>
<div class="bg-tomato"></div>
<div class="bg-tomato"></div>
</div>
<div class="grid-item bg-khaki">5</div>
<div class="grid-item bg-skyblue">6</div>
<div class="grid-item bg-khaki">7</div>
</div>网格布局示例 7
这张图片展示了一个独特的网格布局，包含5个单元格。每个单元格都有不同的背景颜色和编号，具体如下：
-
第一行：一个大黄色单元格（1）。
-
第二行：四个较小的单元格，其中：
- 左上角为红色单元格（2）。
- 右上角为蓝色单元格（3）。
- 左下角为红色单元格（4）。
- 右下角为黄色单元格（5）。
特点
- 大单元格突出显示：第一行的大黄色单元格（1）占据了显著的位置，可以用于突出显示重要的内容或信息。
- 紧凑布局：第二行的四个较小单元格紧密排列，适合放置次要信息或相关链接。
应用场景
- 首页焦点内容：大单元格可以用于展示重要新闻、特色产品或关键信息。
- 模块化设计：小单元格适合放置次要信息、相关链接或模块化的功能区域。
总结
这种布局通过大单元格和紧凑的小单元格组合，不仅突出了核心内容，还保持了整体布局的整洁和美观。非常适合用于需要重点突出特定信息的页面设计。
css
<style>
.grid-layout{
/* 网格布局- 自身是一个行内块元素 */
display: inline-grid;
/* 划分4行，高80px 划分3列，列宽 100px */
grid-template-rows: repeat(4, 80px);
grid-template-columns: repeat(3, 100px);
grid-template-areas:
"a a a"
"a a a"
"b c d"
"e c d";
gap: 10px; /* 网格行列间距都为 10px */
}
/* 指定项目所占据的网格区域 */
.grid-item:nth-child(1){
grid-area: a;
}
.grid-item:nth-child(2){
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5px;
}
.grid-item:nth-child(3){
grid-area: c;
}
.grid-item:nth-child(4){
grid-area: d;
}
.bg-skyblue {background-color: skyblue;}
.bg-khaki {background-color: khaki;}
.bg-tomato {background-color: tomato;}
</style>
html
<div class="grid-layout">
<div class="grid-item bg-khaki">1</div>
<div class="grid-item">
<div class="bg-tomato"></div>
<div class="bg-tomato"></div>
</div>
<div class="grid-item bg-skyblue">3</div>
<div class="grid-item bg-skyblue">4</div>
<div class="grid-item bg-khaki">5</div>
</div>网格布局示例 8
这张图片展示了一个独特的网格布局，包含6个单元格。每个单元格都有不同的背景颜色和编号，具体如下：
- 第一行：两个单元格（1 和 2），其中1号单元格为黄色。
- 第二行：一个大黄色单元格（4）占据了两列。
- 第三行：三个单元格（5、6 和 3），其中5号和6号单元格为蓝色，3号单元格为黄色。
特点
- 中央突出显示：第二行的大黄色单元格（4）占据了显著的位置，可以用于突出显示重要的内容或信息。
- 对称与非对称结合：第一行和第三行的单元格分布形成了对称与非对称的结合，增加了视觉上的层次感。
应用场景
- 首页焦点内容：中央的大单元格可以用于展示重要新闻、特色产品或关键信息。
- 模块化设计：周围的小单元格适合放置次要信息、相关链接或模块化的功能区域。
总结
这种布局通过中央的大单元格和周围对称与非对称分布的小单元格，不仅突出了核心内容，还保持了整体布局的整洁和美观。非常适合用于需要重点突出特定信息的页面设计。
css
.grid-layout {
display: inline-grid;
/* 划分4行，每行高70px */
grid-template-rows: repeat(4, 70px);
/* 划分3列, 宽 70px 120px 70px */
grid-template-columns: 70px 120px 70px;
/* 划分网格区域 */
grid-template-areas:
"a a b "
"a a c"
"d e e"
"f e e";
gap: 10px; /* 网格行列间距都为 10px */
}
/* 指定项目所占据的网格区域 */
.grid-item:nth-child(1) { grid-area: a; }
.grid-item:nth-child(5) { grid-area: e; }
.bg-skyblue {background-color: skyblue;}
.bg-khaki {background-color: khaki;}
.bg-tomato {background-color: tomato;}
html
<div class="grid-layout">
<div class="grid-item bg-khaki">1</div>
<div class="grid-item bg-skyblue">2</div>
<div class="grid-item bg-skyblue">3</div>
<div class="grid-item bg-skyblue">4</div>
<div class="grid-item bg-khaki">5</div>
<div class="grid-item bg-skyblue">6</div>
</div>网格布局示例 9
这张图片展示了一个独特的网格布局，包含6个单元格。每个单元格都有不同的背景颜色和编号，具体如下：
-
第一行：一个大黄色单元格（1）。
-
第二行：四个较小的单元格（2、3、4 和 5），其中：
- 左上角为蓝色单元格（2）。
- 中间为红色单元格（3）。
- 右上角为蓝色单元格（4）。
- 左下角为蓝色单元格（5）。
-
第三行：一个较大的红色单元格（6）。
特点
- 大单元格突出显示：第一行的大黄色单元格（1）占据了显著的位置，可以用于突出显示重要的内容或信息。
- 紧凑布局：第二行的四个较小单元格紧密排列，适合放置次要信息或相关链接。
- 对称与非对称结合：第二行的布局形成了对称与非对称的结合，增加了视觉上的层次感。
应用场景
- 首页焦点内容：大单元格可以用于展示重要新闻、特色产品或关键信息。
- 模块化设计：小单元格适合放置次要信息、相关链接或模块化的功能区域。
总结
这种布局通过大单元格和紧凑的小单元格组合，不仅突出了核心内容，还保持了整体布局的整洁和美观。非常适合用于需要重点突出特定信息的页面设计。
css
.grid-layout {
/* 网格布局- 自身是一个行内块元素 */
display: inline-grid;
/* 划分4行，每行高70px; 划分3列，每列宽 100px */
grid-template-rows: repeat(4, 70px);
grid-template-columns: repeat(3, 100px);
/* 划分网格区域 */
grid-template-areas:
"a a a"
"a a a"
"b c d"
"e c f";
gap: 10px; /* 网格行列间距都为 10px */
}
/* 指定项目所占据的网格区域 */
.grid-item:nth-child(1) { grid-area: a; }
.grid-item:nth-child(3) { grid-area: c; }
.bg-skyblue {background-color: skyblue;}
.bg-khaki {background-color: khaki;}
.bg-tomato {background-color: tomato;}
html
<div class="grid-layout">
<div class="grid-item bg-khaki">1</div>
<div class="grid-item bg-skyblue">2</div>
<div class="grid-item bg-tomato">3</div>
<div class="grid-item bg-skyblue">4</div>
<div class="grid-item bg-skyblue">5</div>
<div class="grid-item bg-skyblue">6</div>
</div>网格布局示例 10
这张图片展示了一个独特的网格布局，包含11个单元格。每个单元格都有不同的背景颜色和编号，具体如下：
- 第一行：四个单元格（1、2、3 和 4），其中1号单元格为蓝色。
- 第二行：两个单元格（5 和 6），其中5号单元格为浅蓝色，6号单元格为黄色。
- 第三行：三个单元格（7、8 和 9），其中7号单元格为黄色，8号和9号单元格为红色。
- 第四行：两个单元格（10 和 11），其中10号单元格为红色。
特点
- 混合大小的单元格：第一行和第二行的单元格大小不同，第一行的单元格较小，第二行的5号单元格较大。
- 颜色对比：使用了蓝色、浅蓝色、黄色和红色来区分不同的区域，增强了视觉效果。
- 对称与非对称结合：整体布局既有对称的部分（如第三行），也有非对称的部分（如第一行和第二行）。
应用场景
- 模块化内容展示：适合用于展示不同类型的模块化内容，如新闻、产品或功能模块。
- 焦点区域：较大的单元格可以用于突出显示特定信息或交互元素。
- 信息分类：不同颜色的单元格可以帮助用户快速识别不同类型的信息。
总结
这种布局通过混合大小的单元格和鲜明的颜色对比，不仅突出了核心内容，还保持了整体布局的整洁和美观。非常适合用于需要灵活展示多种内容的页面设计。
css
.grid-layout {
display: inline-grid;
/* 划分5行，每行高80px 140px 80px 80px 80px */
grid-template-rows: 80px 140px 80px 80px 80px;
/* 划分5列，每列宽100px */
grid-template-columns: repeat(5, 100px);
/* 划分网格区域 */
grid-template-areas:
"a a b c d"
"a a e e e"
"f g e e e"
"h h i j j"
"h h i k k";
gap: 10px; /* 网格行列间距都为 10px */
}
/* 指定项目所占据的网格区域 */
.grid-item:nth-child(1) { grid-area: a; }
.grid-item:nth-child(5) { grid-area: e; }
.grid-item:nth-child(8) { grid-area: h; }
.grid-item:nth-child(9) { grid-area: i; }
.bg-skyblue {background-color: skyblue;}
.bg-khaki {background-color: khaki;}
.bg-tomato {background-color: tomato;}
html
<div class="grid-layout">
<div class="grid-item bg-skyblue">1</div>
<div class="grid-item bg-khaki">2</div>
<div class="grid-item bg-khaki">3</div>
<div class="grid-item bg-khaki">4</div>
<div class="grid-item bg-skyblue">5</div>
<div class="grid-item bg-khaki">6</div>
<div class="grid-item bg-khaki">7</div>
<div class="grid-item bg-tomato">8</div>
<div class="grid-item bg-tomato">9</div>
<div class="grid-item bg-khaki">10</div>
<div class="grid-item bg-khaki">11</div>
</div>网格布局示例 11
这张图片展示了一个独特的网格布局，包含8个单元格。每个单元格都有不同的背景颜色和编号，具体如下：
- 第一行：三个单元格（1、2 和 3），其中1号单元格为蓝色，2号单元格为浅蓝色，3号单元格为黄色。
- 第二行：五个单元格（4、5、6、7 和 8），其中4号单元格为红色，5号单元格为黄色，6号单元格为红色，7号单元格为蓝色，8号单元格为红色。
特点
- 混合大小的单元格：第一行的单元格较大，第二行的单元格较小。
- 颜色对比：使用了蓝色、浅蓝色、黄色和红色来区分不同的区域，增强了视觉效果。
- 对称与非对称结合：整体布局既有对称的部分（如第一行），也有非对称的部分（如第二行）。
应用场景
- 模块化内容展示：适合用于展示不同类型的模块化内容，如新闻、产品或功能模块。
- 焦点区域：较大的单元格可以用于突出显示特定信息或交互元素。
- 信息分类：不同颜色的单元格可以帮助用户快速识别不同类型的信息。
总结
这种布局通过混合大小的单元格和鲜明的颜色对比，不仅突出了核心内容，还保持了整体布局的整洁和美观。非常适合用于需要灵活展示多种内容的页面设计。
css
.grid-layout {
display: inline-grid;
/* 划分4行，每行高80px */
grid-template-rows: repeat(4, 80px);
/* 划分4列，每列宽150px 100px 100px 150px */
grid-template-columns: 150px 100px 100px 150px;
/* 划分网格区域 */
grid-template-areas:
"a a b c"
"a a d c"
"e f g g"
"e h g g";
gap: 10px; /* 网格行列间距都为10px */
}
/* 指定项目所占据的网格区域 */
.grid-item:nth-child(1) { grid-area: a; }
.grid-item:nth-child(3) { grid-area: c; }
.grid-item:nth-child(5) { grid-area: e; }
.grid-item:nth-child(7) { grid-area: g; }
.bg-skyblue {background-color: skyblue;}
.bg-khaki {background-color: khaki;}
.bg-tomato {background-color: tomato;}
html
<div class="grid-layout">
<div class="grid-item bg-skyblue">1</div>
<div class="grid-item bg-tomato">2</div>
<div class="grid-item bg-khaki">3</div>
<div class="grid-item bg-tomato">4</div>
<div class="grid-item bg-khaki">5</div>
<div class="grid-item bg-tomato">6</div>
<div class="grid-item bg-skyblue">7</div>
<div class="grid-item bg-tomato">8</div>
</div>网格布局示例 12
这张图片展示了一个独特的网格布局，包含7个单元格。每个单元格都有不同的背景颜色和编号，具体如下：
- 第一行：三个单元格（1、2 和 3），均为黄色。
- 第二行：一个大单元格（4），为蓝色。
- 第三行：三个单元格（5、6 和 7），均为黄色。
特点
- 中央突出显示：第二行的大蓝色单元格（4）占据了显著的位置，可以用于突出显示重要的内容或信息。
- 对称布局：第一行和第三行的单元格分布是对称的，增加了视觉上的平衡感。
- 颜色对比：使用了黄色和蓝色来区分不同的区域，增强了视觉效果。
应用场景
- 首页焦点内容：中央的大单元格可以用于展示重要新闻、特色产品或关键信息。
- 模块化设计：周围的小单元格适合放置次要信息、相关链接或模块化的功能区域。
总结
这种布局通过中央的大单元格和周围对称分布的小单元格，不仅突出了核心内容，还保持了整体布局的整洁和美观。非常适合用于需要重点突出特定信息的页面设计。
css
.grid-layout {
display: inline-grid;
/* 划分3行，每行高80px 200px 80px */
grid-template-rows: 80px 200px 80px;
/* 划分3列，每列宽100px */
grid-template-columns: repeat(3, 100px);
gap: 10px; /* 网格行列间距都为10px */
}
.grid-item:nth-child(4) {
/* 起始行号 / 起始列号 / 跨越的行数 / 跨越的列数 */
grid-area: 2 / 1 / span 1 / span 3;
}
.bg-skyblue {background-color: skyblue;}
.bg-khaki {background-color: khaki;}
.bg-tomato {background-color: tomato;}
html
<div class="grid-layout">
<div class="grid-item bg-khaki">1</div>
<div class="grid-item bg-khaki">2</div>
<div class="grid-item bg-khaki">3</div>
<div class="grid-item bg-skyblue">4</div>
<div class="grid-item bg-khaki">5</div>
<div class="grid-item bg-khaki">6</div>
<div class="grid-item bg-khaki">7</div>
</div>网格布局示例 13
这张图片展示了一个独特的网格布局，包含12个单元格。每个单元格都有不同的背景颜色和编号，具体如下：
-
第一行：四个较小的单元格（1、2、3 和 4），其中：
- 左上角为黄色单元格（1）。
- 右上角为蓝色单元格（3）。
- 其他两个单元格分别为浅蓝色（2）和黄色（4）。
-
第二行：一个大红色单元格（5）占据了两列。
-
第三行：三个较小的单元格（6、7 和 8），其中：
- 左上角为黄色单元格（6）。
- 中间为浅蓝色单元格（7）。
- 右上角为黄色单元格（8）。
-
第四行：四个较小的单元格（9、10、11 和 12），其中：
- 左上角为浅蓝色单元格（9）。
- 右上角为红色单元格（12）。
- 其他两个单元格分别为浅蓝色（10）和黄色（11）。
特点
- 混合大小的单元格：第一行和第三行的单元格较小，第二行的大红色单元格（5）占据了显著的位置。
- 颜色对比：使用了黄色、浅蓝色、蓝色和红色来区分不同的区域，增强了视觉效果。
- 对称与非对称结合：整体布局既有对称的部分（如第三行），也有非对称的部分（如第一行和第四行）。
应用场景
- 模块化内容展示：适合用于展示不同类型的模块化内容，如新闻、产品或功能模块。
- 焦点区域：较大的单元格可以用于突出显示特定信息或交互元素。
- 信息分类：不同颜色的单元格可以帮助用户快速识别不同类型的信息。
总结
这种布局通过混合大小的单元格和鲜明的颜色对比，不仅突出了核心内容，还保持了整体布局的整洁和美观。非常适合用于需要灵活展示多种内容的页面设计。
css
.grid-layout {
display: inline-grid;
/* 划分6行，每行高80px */
grid-template-rows: repeat(6, 80px);
/* 划分4列，每列宽100px */
grid-template-columns: repeat(4, 100px);
/* 划分网格区域 */
grid-template-areas:
"a b c d"
"e e e f"
"e e e g"
"h i j j"
"h k j j"
"h l j j";
gap: 10px; /* 网格行列间距都为10px */
}
/* 指定项目所占据的网格区域 */
.grid-item:nth-child(3) { grid-area: c; }
.grid-item:nth-child(5) { grid-area: e; }
.grid-item:nth-child(8) { grid-area: h; }
.grid-item:nth-child(12) { grid-area: j; }
.bg-skyblue {background-color: skyblue;}
.bg-khaki {background-color: khaki;}
.bg-tomato {background-color: tomato;}
html
<div class="grid-layout">
<div class="grid-item bg-skyblue">1</div>
<div class="grid-item bg-skyblue">2</div>
<div class="grid-item bg-khaki">3</div>
<div class="grid-item bg-skyblue">4</div>
<div class="grid-item bg-tomato">5</div>
<div class="grid-item bg-skyblue">6</div>
<div class="grid-item bg-skyblue">7</div>
<div class="grid-item bg-khaki">8</div>
<div class="grid-item bg-skyblue">9</div>
<div class="grid-item bg-skyblue">10</div>
<div class="grid-item bg-skyblue">11</div>
<div class="grid-item bg-tomato">12</div>
</div>网格布局示例 14
这张图片展示了一个独特的网格布局，包含7个单元格。每个单元格都有不同的背景颜色和编号，具体如下：
- 第一行：一个大黄色单元格（1）。
- 第二行：六个较小的蓝色单元格（2、3、4、5、6），依次排列。
特点
- 中央突出显示：第一行的大黄色单元格（1）占据了显著的位置，可以用于突出显示重要的内容或信息。
- 对称布局：第二行的六个较小单元格分布是对称的，增加了视觉上的平衡感。
- 颜色对比：使用了黄色和蓝色来区分不同的区域，增强了视觉效果。
应用场景
- 首页焦点内容：中央的大单元格可以用于展示重要新闻、特色产品或关键信息。
- 模块化设计：周围的小单元格适合放置次要信息、相关链接或模块化的功能区域。
总结
这种布局通过中央的大单元格和周围对称分布的小单元格，不仅突出了核心内容，还保持了整体布局的整洁和美观。非常适合用于需要重点突出特定信息的页面设计。
css
.grid-layout {
/* 网格布局- 自身是一个行内块元素 */
display: inline-grid;
/* 划分6行，高80px；划分4列，列宽100px */
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(5, 80px);
gap: 10px; /* 网格行列间距都为10px */
}
/* 指定项目所占据的网格区域 */
.grid-item:nth-child(1) {
/* 起始行号 / 起始列号 / 跨越的行数 / 跨越的列数 */
grid-area: 1 / 1 / span 3 / span 5;
}
.bg-skyblue {background-color: skyblue;}
.bg-khaki {background-color: khaki;}
.bg-tomato {background-color: tomato;}
html
<div class="grid-layout">
<div class="grid-item bg-khaki">1</div>
<div class="grid-item bg-skyblue">2</div>
<div class="grid-item bg-skyblue">3</div>
<div class="grid-item bg-skyblue">4</div>
<div class="grid-item bg-skyblue">5</div>
<div class="grid-item bg-skyblue">6</div>
</div>网格布局示例 15
这张图片展示了一个独特的网格布局，包含10个单元格。每个单元格都有不同的背景颜色和编号，具体如下：
-
第一行：三个单元格（1、2 和 3），其中：
- 1号单元格为蓝色。
- 2号单元格为浅蓝色。
- 3号单元格为黄色。
-
第二行：四个单元格（4、5、6 和 7），其中：
- 4号单元格为浅蓝色。
- 5号单元格为黄色。
- 6号单元格为浅蓝色。
- 7号单元格为黄色。
-
第三行：三个单元格（8、9 和 10），其中：
- 8号单元格为蓝色。
- 9号单元格为浅蓝色。
- 10号单元格为黄色。
特点
- 混合大小的单元格：所有单元格大小相同，但通过颜色区分不同区域。
- 颜色对比：使用了蓝色、浅蓝色和黄色来区分不同的区域，增强了视觉效果。
- 对称与非对称结合：整体布局既有对称的部分（如第一行和第三行），也有非对称的部分（如第二行）。
应用场景
- 模块化内容展示：适合用于展示不同类型的模块化内容，如新闻、产品或功能模块。
- 焦点区域：虽然没有特别大的单元格，但可以通过颜色变化突出特定信息。
- 信息分类：不同颜色的单元格可以帮助用户快速识别不同类型的信息。
总结
这种布局通过均匀分布的单元格和鲜明的颜色对比，不仅突出了核心内容，还保持了整体布局的整洁和美观。非常适合用于需要灵活展示多种内容的页面设计。
css
.grid-layout {
display: inline-grid;
/* 划分3行，每行高100px */
grid-template-rows: repeat(3, 100px);
/* 划分5列，每列宽分别为100px、26px、64px、62px、28px */
grid-template-columns: 100px 26px 64px 62px 28px;
/* 划分网格区域 */
grid-template-areas:
"a a b b c "
"d e e f g "
"h h i j j ";
gap: 10px; /* 网格行列间距都为10px */
}
/* 指定项目所占据的网格区域 */
.grid-item:nth-child(1) { grid-area: a; }
.grid-item:nth-child(2) { grid-area: b; }
.grid-item:nth-child(3) { grid-area: c; }
.grid-item:nth-child(5) { grid-area: e; }
.grid-item:nth-child(6) { grid-area: f; }
.grid-item:nth-child(8) { grid-area: h; }
.grid-item:nth-child(9) { grid-area: i; }
.grid-item:nth-child(10) { grid-area: j; }
.bg-skyblue {background-color: skyblue;}
.bg-khaki {background-color: khaki;}
.bg-tomato {background-color: tomato;}
html
<div class="grid-layout">
<div class="grid-item bg-skyblue">1</div>
<div class="grid-item bg-skyblue">2</div>
<div class="grid-item bg-skyblue">3</div>
<div class="grid-item bg-khaki">4</div>
<div class="grid-item bg-khaki">5</div>
<div class="grid-item bg-khaki">6</div>
<div class="grid-item bg-khaki">7</div>
<div class="grid-item bg-skyblue">8</div>
<div class="grid-item bg-skyblue">9</div>
<div class="grid-item bg-skyblue">10</div>
</div>网格布局示例 16
这张图片展示了一个独特的网格布局，包含10个单元格。每个单元格都有不同的背景颜色和编号，具体如下：
-
第一行：三个单元格（1、2 和 3），其中：
- 1号单元格为蓝色。
- 2号单元格为浅蓝色。
- 3号单元格为黄色。
-
第二行：四个单元格（4、5、6 和 7），其中：
- 4号单元格为浅蓝色。
- 5号单元格为黄色。
- 6号单元格为浅蓝色。
- 7号单元格为黄色。
-
第三行：三个单元格（8、9 和 10），其中：
- 8号单元格为蓝色。
- 9号单元格为浅蓝色。
- 10号单元格为黄色。
特点
- 混合大小的单元格：所有单元格大小相同，但通过颜色区分不同区域。
- 颜色对比：使用了蓝色、浅蓝色和黄色来区分不同的区域，增强了视觉效果。
- 对称与非对称结合：整体布局既有对称的部分（如第一行和第三行），也有非对称的部分（如第二行）。
应用场景
- 模块化内容展示：适合用于展示不同类型的模块化内容，如新闻、产品或功能模块。
- 焦点区域：虽然没有特别大的单元格，但可以通过颜色变化突出特定信息。
- 信息分类：不同颜色的单元格可以帮助用户快速识别不同类型的信息。
总结
这种布局通过均匀分布的单元格和鲜明的颜色对比，不仅突出了核心内容，还保持了整体布局的整洁和美观。非常适合用于需要灵活展示多种内容的页面设计。
css
.grid-layout {
display: inline-grid;
/* 划分4行，每行高100px；划分3列，每列宽100px */
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(3, 100px);
/* 划分网格区域 */
grid-template-areas:
"a b c"
"a e e"
"a e e"
"f g h";
gap: 10px; /* 网格行列间距都为10px */
}
/* 指定项目所占据的网格区域 */
.grid-item:nth-child(5) { grid-area: e; }
.bg-skyblue {background-color: skyblue;}
.bg-khaki {background-color: khaki;}
.bg-tomato {background-color: tomato;}
html
<div class="grid-layout">
<div class="grid-item bg-skyblue">1</div>
<div class="grid-item bg-skyblue">2</div>
<div class="grid-item bg-skyblue">3</div>
<div class="grid-item bg-skyblue">4</div>
<div class="grid-item bg-khaki">5</div>
<div class="grid-item bg-skyblue">6</div>
<div class="grid-item bg-skyblue">7</div>
<div class="grid-item bg-skyblue">8</div>
<div class="grid-item bg-skyblue">9</div>
</div>