如何实现该网格布局？如何添加Title 6和Title 7到布局中？

方案1：接着用你原来的浮动布局 #

你原来的布局是靠浮动+清除浮动实现的，要加新元素的话，跟着这个规则来就行：

首先在HTML里把Title 6和7的div加上，如果想让它们单独占一行，记得先加个清除浮动的.clear：

<div class="card">
  <div class="title_1">
    <h6>Title 1</h6>
  </div>
  <div class="title_2">Title 2</div>
  <div class="title_3">Title 3</div>
  <div class="clear"></div>
  <div class="title_4">Title 4 </div>
  <div class="title_5">Title 5</div>
  <div class="clear"></div> <!-- 先清掉上一行的浮动，不然新元素会往上跑 -->
  <div class="title_6">Title 6</div>
  <div class="title_7">Title 7</div>
</div>

然后给这两个新div加CSS样式，跟Title 2、3、4、5保持一致：

.title_6, .title_7 {
  float: left;
  width: 50%;
  box-sizing: border-box; /* 避免padding撑宽元素 */
  /* 把你给title_2/3的padding、边框这些样式也加上，保证视觉统一 */
  padding: 8px;
  border: 1px solid #ddd;
}

别忘了确认你的.clear类是有效的：

.clear {
  clear: both;
}

方案2：换成CSS Grid布局（更推荐！） #

浮动布局总容易碰到清除浮动的麻烦，换成CSS Grid的话，添加新元素超省心，布局也更稳定：

先改容器.card的CSS：

.card {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 直接设两列等宽 */
  gap: 10px; /* 元素之间留间距，不用自己调margin */
}

然后让Title 1占满整一行：

.title_1 {
  grid-column: 1 / -1; /* 横跨所有列，也就是占满整行 */
}

然后HTML里直接加Title 6和7就行，连.clear都不用写了：

<div class="card">
  <div class="title_1">
    <h6>Title 1</h6>
  </div>
  <div class="title_2">Title 2</div>
  <div class="title_3">Title 3</div>
  <div class="title_4">Title 4 </div>
  <div class="title_5">Title 5</div>
  <div class="title_6">Title 6</div>
  <div class="title_7">Title 7</div>
</div>

这样新元素会自动填充到网格里，完全不用操心布局错位的问题~

内容的提问来源于stack exchange，提问作者user9575937