记录---CSS Grid 布局：现代网页布局的强大工具
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<blockquote>
<p> CSS Grid 布局（网格布局）是 CSS 中一种强大的二维布局系统，它彻底改变了我们构建网页布局的方式。与传统的布局方法（如浮动、定位或 Flexbox）相比，Grid 提供了更直观、更灵活的方式来创建复杂的网页布局。</p>
</blockquote>
<div>
<div>
<h2 data-id="heading-0">一、Grid 布局的基本概念</h2>
<h3 data-id="heading-1">1. 什么是 Grid 布局？</h3>
<p>CSS Grid 是一个二维布局系统，可以同时处理<strong>行</strong>和<strong>列</strong>的布局。它允许开发者将页面划分为多个区域，并精确定位和调整这些区域的大小和位置。</p>
<h3 data-id="heading-2">2. 核心术语</h3>
<ul>
<li><strong>Grid Container（网格容器）</strong>：应用 <code>display: grid</code> 的元素</li>
<li><strong>Grid Item（网格项）</strong>：网格容器的直接子元素</li>
<li><strong>Grid Line（网格线）</strong>：构成网格结构的分界线</li>
<li><strong>Grid Track（网格轨道）</strong>：两条相邻网格线之间的空间（行或列）</li>
<li><strong>Grid Cell（网格单元格）</strong>：四条网格线包围的最小单位</li>
<li><strong>Grid Area（网格区域）</strong>：任意数量的网格单元格组成的矩形区域</li>
</ul>
<h2 data-id="heading-3">二、创建基本 Grid 布局</h2>
<h3 data-id="heading-4">1. 定义一个网格容器</h3>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.container {
display: grid;
grid-template-columns: 100px 200px 100px;/* 3列，宽度分别为100px,200px,100px */
grid-template-rows: 100px 200px; /* 2行，高度分别为100px,200px */
gap: 10px; /* 网格项之间的间距 */
}</pre>
</div>
<h3 data-id="heading-5">2. 简单的网格示例</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><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></pre>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.container {
display: grid;
grid-template-columns: repeat(3, 1fr);/* 3列，每列等宽 */
grid-template-rows: 100px 100px; /* 2行，每行100px高 */
gap: 15px;
}
.item {
background: #4CAF50;
padding: 20px;
text-align: center;
}</pre>
</div>
<h2 data-id="heading-6">三、Grid 布局的核心特性</h2>
<h3 data-id="heading-7">1. 灵活的轨道大小</h3>
<ul>
<li><code>fr</code> 单位：表示网格容器中的可用空间的一部分</li>
<li><code>minmax()</code> 函数：定义大小范围</li>
<li><code>auto</code> 关键字：根据内容自动调整</li>
</ul>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.container {
grid-template-columns: 1fr minmax(200px, 1fr) 1fr;
grid-template-rows: auto 1fr auto;
}</pre>
</div>
<h3 data-id="heading-8">2. 响应式布局</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.container {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}</pre>
</div>
<p>这个设置会创建尽可能多的 200px 宽的列来填充容器，如果空间不足则换行。</p>
<h3 data-id="heading-9">3. 网格项定位</h3>
<p>可以精确控制网格项的位置：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.item {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
/* 简写形式 */
.item {
grid-column: 1 / 3;/* 从第1列线到第3列线 */
grid-row: 1 / 2; /* 从第1行线到第2行线 */
}
/* 跨越整个网格 */
.item {
grid-column: 1 / -1;/* 从第1列线到最后1列线 */
}</pre>
</div>
<h3 data-id="heading-10">4. 命名网格线和区域</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr ;
grid-template-rows: 80px 1fr 80px ;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}</pre>
</div>
<h2 data-id="heading-11">四、Grid 布局的实际应用</h2>
<h3 data-id="heading-12">1. 经典网页布局</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.layout {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 80px 1fr 100px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }</pre>
</div>
<h3 data-id="heading-13">2. 图片画廊</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}</pre>
</div>
<h3 data-id="heading-14">3. 产品卡片网格</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.products {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
@media (max-width: 900px) {
.products {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.products {
grid-template-columns: 1fr;
}
}</pre>
</div>
<h2 data-id="heading-15">五、Grid 与 Flexbox 的比较</h2>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202507/2149129-20250701171216608-889254219.png" alt="" loading="lazy"></p>
<p>经验法则：</p>
<ul>
<li>使用 Grid 进行宏观布局（整个页面的结构）</li>
<li>使用 Flexbox 进行微观布局（组件内部的排列）</li>
</ul>
<h2 data-id="heading-16">六、浏览器支持与渐进增强</h2>
<p>CSS Grid 已被所有现代浏览器支持（包括 Edge 16+）。对于旧版浏览器，可以采用渐进增强的策略：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.container {
display: flex; /* 回退方案 */
flex-wrap: wrap;
}
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
flex-wrap: initial;
}
}</pre>
</div>
</div>
<div>
<h2>本文转载于：https://juejin.cn/post/7521233387224154146</h2>
</div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/18959959
頁:
[1]