网格布局d-grid
<h4><strong>1. <code>d-grid</code> 的作用</strong></h4>
<ul>
<li><strong>功能</strong>：<br />
✅ 将元素设置为 <strong>CSS Grid 布局容器</strong>（等价于 <code>display: grid</code>）</li>
<li><strong>Bootstrap 特性</strong>：
<ul>
<li>属于 Bootstrap 的 Utility API 工具类</li>
<li>替代传统 Flexbox 布局，实现更灵活的二维网格</li>
</ul></li>
<li><strong>典型场景</strong>：<br />
多列复杂布局、响应式网格排列</li>
</ul>
<h4><strong>2. <code>style=&quot;grid-template-columns: 1fr 2fr&quot;</code></strong></h4>
<ul>
<li><strong>功能</strong>：<br />
✅ 定义网格容器的 <strong>列宽比例</strong>（左侧 : 右侧 = <code>1:2</code>）</li>
<li>
<p><strong>关键参数</strong>：</p>
<table>
<thead>
<tr>
<th>单位</th>
<th>含义</th>
<th>当前效果</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>fr</code></td>
<td>按剩余空间比例分配</td>
<td>总宽度被分为 3 份，左侧占 1 份，右侧占 2 份</td>
</tr>
</tbody>
</table>
</li>
</ul>
<h3>参考代码</h3>
<p>第6个例子，用d-grid实现左右布局，类似table tr td, 非常适合左右结构布局，按照比例设置了宽度，高度也是一致的，左右结构布局比d-flex更方便
<code>https://getbootstrap.com/docs/5.3/examples/headers/#</code>
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=ebf08b27d0708724d54880e3c7367488&amp;file=file.png" alt="Grid" /></p>
<pre><code>&lt;div class=&quot;container-fluid pb-3&quot;&gt;
&lt;div class=&quot;d-grid gap-3&quot; style=&quot;grid-template-columns: 1fr 2fr;&quot;&gt;
&lt;!-- 左侧区块 --&gt;
&lt;div class=&quot;bg-body-tertiary border rounded-3&quot;&gt; ...&lt;br /&gt; &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;/div&gt;
&lt;!-- 右侧区块 --&gt;
&lt;div class=&quot;bg-body-tertiary border rounded-3&quot;&gt; ... &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
<h3>表格布局 浮动布局 定位布局 栅格系统 弹性盒子布局 d-grid二维网格布局</h3>
<h3><strong>Bootstrap 布局方案对比（2025年更新版）</strong></h3>
<p>以下从 <strong>适用场景、灵活性、代码复杂度、响应式支持</strong> 等维度，对比三种主流布局方案：</p>
<hr />
<h4><strong>1. <code>d-flex</code>（弹性布局）</strong></h4>
<p><strong>核心特性</strong>：一维布局（行或列），基于 Flexbox<br />
✅ <strong>优势</strong>：</p>
<ul>
<li><strong>对齐控制</strong>：快速实现水平/垂直居中、间距分配（<code>justify-content</code>、<code>align-items</code>）</li>
<li><strong>动态填充</strong>：子元素自动填充剩余空间（<code>flex-grow</code>）</li>
<li><strong>移动端友好</strong>：天然适配流式排列（如导航栏、按钮组）</li>
<li><strong>兼容性</strong>：支持所有现代浏览器</li>
</ul>
<p>❌ <strong>劣势</strong>：</p>
<ul>
<li><strong>二维限制</strong>：无法同时控制行和列的复杂排列</li>
<li><strong>嵌套复杂度</strong>：多级 Flex 容器易导致代码臃肿</li>
</ul>
<p><strong>典型场景</strong>：导航栏、卡片列表、表单控件组</p>
<hr />
<h4><strong>2. <code>d-grid</code>（网格布局）</strong></h4>
<p><strong>核心特性</strong>：二维布局，基于 CSS Grid<br />
✅ <strong>优势</strong>：</p>
<ul>
<li><strong>精准控制</strong>：定义行/列比例（<code>grid-template-columns: 1fr 2fr;</code>）</li>
<li><strong>重叠布局</strong>：支持元素跨行/列（<code>grid-column</code>、<code>grid-row</code>）</li>
<li><strong>隐式网格</strong>：自动填充剩余空间（<code>grid-auto-flow: dense</code>）</li>
<li><strong>响应式简化</strong>：通过媒体查询实现复杂断点布局</li>
</ul>
<p>❌ <strong>劣势</strong>：</p>
<ul>
<li><strong>学习曲线</strong>：需掌握 Grid 属性（如 <code>fr</code> 单位、<code>minmax()</code>）</li>
<li><strong>旧版浏览器</strong>：IE 11 部分支持（需 Polyfill）</li>
</ul>
<p><strong>典型场景</strong>：仪表盘、杂志式排版、不规则卡片矩阵</p>
<hr />
<h4>*<em>3. 传统栅格布局（<code>row</code> + `col-</em>`）**</h4>
<p><strong>核心特性</strong>：基于 12 列网格系统<br />
✅ <strong>优势</strong>：</p>
<ul>
<li><strong>快速原型</strong>：预定义列类（<code>col-md-6</code>）减少手动计算</li>
<li><strong>一致性</strong>：强制对齐到网格线，避免布局错位</li>
<li><strong>文档丰富</strong>：社区资源多，适合新手</li>
</ul>
<p>❌ <strong>劣势</strong>：</p>
<ul>
<li><strong>灵活性差</strong>：难以实现非对称或动态比例布局</li>
<li><strong>代码冗余</strong>：多断点需重复定义列宽（如 <code>col-sm-12 col-md-6</code>）</li>
<li><strong>过度设计</strong>：简单布局可能引入不必要的嵌套</li>
</ul>
<p><strong>典型场景</strong>：博客文章列表、电商商品栅格、标准后台页面</p>
<hr />
<h3><strong>对比总结表</strong></h3>
<table>
<thead>
<tr>
<th>维度</th>
<th><code>d-flex</code></th>
<th><code>d-grid</code></th>
<th>传统栅格</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>布局维度</strong></td>
<td>一维（单行/列）</td>
<td>二维（行+列）</td>
<td>一维（12列系统）</td>
</tr>
<tr>
<td><strong>响应式控制</strong></td>
<td>需手动媒体查询</td>
<td>内置断点 + 自定义</td>
<td>预定义断点类</td>
</tr>
<tr>
<td><strong>代码简洁性</strong></td>
<td>★★★★☆</td>
<td>★★★☆☆</td>
<td>★★★★★</td>
</tr>
<tr>
<td><strong>灵活性</strong></td>
<td>★★★☆☆</td>
<td>★★★★★</td>
<td>★★☆☆☆</td>
</tr>
<tr>
<td><strong>学习成本</strong></td>
<td>低</td>
<td>中高</td>
<td>低</td>
</tr>
<tr>
<td><strong>IE 兼容性</strong></td>
<td>部分支持</td>
<td>需 Polyfill</td>
<td>完美支持</td>
</tr>
</tbody>
</table>
<hr />
<h3><strong>选型建议</strong></h3>
<ul>
<li><strong>简单线性布局</strong> → <code>d-flex</code>（如导航栏、按钮组）</li>
<li><strong>复杂二维结构</strong> → <code>d-grid</code>（如仪表盘、瀑布流）</li>
<li>
<p><strong>快速标准化页面</strong> → 传统栅格（如后台管理、电商列表）</p>
</li>
<li>
<ul>
<li>*</li>
</ul>
</li>
</ul>
<h3><strong>2025年趋势补充</strong></h3>
<ul>
<li><strong>CSS Subgrid 普及</strong>：<code>d-grid</code> 支持嵌套网格继承父级轨道，减少布局代码</li>
<li><strong>容器查询集成</strong>：Bootstrap 6 实验性支持 <code>@container</code>，实现组件级响应式</li>
<li><strong>性能优化</strong>：Grid 布局渲染速度提升 30%（Chromium 引擎优化）</li>
</ul>
<p>建议优先掌握 <code>d-grid</code>，搭配传统栅格应对保守项目需求，<code>d-flex</code> 作为微观对齐工具使用</p>