CSS grid布局下单元格内长文本分两列换行不溢出方案咨询

原有代码的核心问题如下：

• .cell设置了固定宽度680px，和父网格LLgrid的1fr自适应宽度规则冲突，容易出现布局错位
• .cell使用display: flex默认横向排列子元素，同时未设置换行规则，长文本会直接横向溢出
• 没有为单元格内的文本设置分列规则，无法实现单单元格两列排版效果

方案1：单元格内部嵌套grid实现分列 #

直接给.cell设置内部grid布局，无需额外修改HTML结构：

修改后CSS代码 #

/* 补充grid的盒模型规则，适配父容器.screen */
.LLgrid {
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  background-color: red;
  padding: 10px;
  width: 1400px;
  box-sizing: border-box; /* 新增：padding不会撑宽容器 */
}

.cell {
  /* 替换原有flex居中为grid居中，同时设置内部分两列 */
  display: grid;
  place-items: center;
  grid-template-columns: repeat(2, 1fr); /* 内部分为2等宽列 */
  gap: 12px; /* 两列之间的间距，可自定义调整 */
  font-family: Arial;
  background: white;
  height: 150px;
  color: black;
  font-size: 12px;
  overflow-wrap: break-word;
  box-sizing: border-box;
  padding: 0 15px; /* 单元格左右内边距，避免文本贴边 */
}

/* 父容器.screen无需额外修改，1400px的grid宽度在1450px的.screen内刚好适配左右24px的padding */

简化后的HTML代码 #

<div class="screen">
  <div class="LLcontainer">
    <div class="LLgrid">
      <div class="cell" id="1">
        <span>one</span>
        <p>非常长的文本非常长的文本非常长的文本非常长的文本<br>拆分为多行拆分为多行拆分为多行拆分为多行</p>
      </div>
      <div class="cell" id="2"> two </div>
      <div class="cell" id="3"> three </div>
      <div class="cell" id="4"> four </div>
      <div class="cell" id="5"> five </div>
      <div class="cell" id="6"> six </div>
    </div>
  </div>
</div>

方案2：纯文本自动分列 #

如果不需要拆分元素，只是让单段文本自动分成两列排版，使用column-count属性即可：

.cell {
  justify-content: center;
  align-items: center;
  display: flex;
  font-family: Arial;
  background: white;
  height: 150px;
  color: black;
  font-size: 12px;
  overflow-wrap: break-word;
  box-sizing: border-box;
  padding: 0 15px;
}
/* 给文本段设置分列规则 */
.cell p {
  column-count: 2;
  column-gap: 12px;
  margin: 0;
  text-align: left;
}

你之前布局混乱的核心原因是.cell的固定宽度和flex横向排列规则冲突，删掉固定宽度后即可适配父网格的自适应分配。

内容的提问来源于stack exchange，提问作者Andrea P.