网格布局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>