MDL网格间距设置：空单元格布局技术咨询

嘿，我来帮你搞定这个问题！其实MDL网格本身就自带了间距机制，要实现第二个区块为空且三个区块均分的布局，只需要简单调整你的代码就行，不用太复杂的配置：

基础实现方案 #

你只需要保留第二个单元格的MDL类，但清空它的内容——MDL的mdl-cell类会自动为单元格分配宽度和默认间距，空单元格依然会占据对应的4列位置，维持三个区块均分的布局：

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col">some text</div>
  <!-- 空单元格，保留MDL类以维持布局结构 -->
  <div class="mdl-cell mdl-cell--4-col"></div>
  <div class="mdl-cell mdl-cell--4-col">more text</div>
</div>

MDL的网格系统默认会给每个mdl-cell添加内边距（padding）和外边距（margin），所以即使第二个单元格是空的，它也会和另外两个单元格保持一致的间距，整体布局不会错乱。

自定义间距（如果需要） #

要是你觉得默认的间距不符合需求，比如想移除空单元格的内边距，或者调整它的外边距，可以给空单元格加一个自定义CSS类来修改：

第一步：添加自定义CSS #

/* 根据需求调整空单元格的间距 */
.empty-mdl-cell {
  padding: 0; /* 移除内边距，也可以设置具体数值比如16px */
  /* margin: 4px; 也可以自定义外边距 */
}

第二步：修改HTML代码 #

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col">some text</div>
  <div class="mdl-cell mdl-cell--4-col empty-mdl-cell"></div>
  <div class="mdl-cell mdl-cell--4-col">more text</div>
</div>

这样就能按照你的需求灵活调整空单元格的间距了。

内容的提问来源于stack exchange，提问作者Kushagra Kumar Rai