如何让元素拉伸至可用宽度？能否不使用flex实现动态列布局？

没问题，完全可以不使用display:flex实现这个布局，CSS Grid是非常合适的方案，能完美满足你的需求：一行最多显示3列列表项、新增项自动换行；单行仅1个元素时占满整行宽度，2个元素则平分宽度，效果和给元素设置flex: 1 0 315px一致。

实现代码示例 #

CSS 代码

* {
  box-sizing: border-box;
}

.content {
  display: grid;
  width: 1024px;
  grid-template-columns: 315px 1fr;
  gap: 20px;
}

.content__list {
  grid-row: 2;
  grid-column: 1 / -1;
  display: grid;
  gap: 15px;
  /* 核心布局代码 */
  grid-template-columns: repeat(auto-fit, minmax(315px, 1fr));
}

HTML 代码

<div class="content">
  <h2 class="content__title">TITLE</h2>
  <ul class="content__list">
    <li class="content__list-item">
      <h3 class="content__list-title">
        Lorem
      </h3>
      <p class="content__list-text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorum blanditiis minus. Quae facere consequuntur dolorum laborum ipsum nam natus, laboriosam, ab ipsam corrupti eaque sed aperiam quibusdam blanditiis neque nobis omnis saepe ducimus voluptas eius eum! Sunt assumenda explicabo fugit molestiae ut, odit quia blanditiis mollitia earum velit.
      </p>
    </li>
    <li class="content__list-item">
      <h3 class="content__list-title">
        Lorem
      </h3>
      <p class="content__list-text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorum blanditiis minus. Quae facere consequuntur dolorum laborum ipsum nam natus, laboriosam, ab ipsam corrupti eaque sed aperiam quibusdam blanditiis neque nobis omnis saepe ducimus voluptas eius eum! Sunt assumenda explicabo fugit molestiae ut, odit quia blanditiis mollitia earum velit.
      </p>
    </li>
    <li class="content__list-item">
      <h3 class="content__list-title">
        Lorem
      </h3>
      <p class="content__list-text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorum blanditiis minus. Quae facere consequuntur dolorum laborum ipsum nam natus, laboriosam, ab ipsam corrupti eaque sed aperiam quibusdam blanditiis neque nobis omnis saepe ducimus voluptas eius eum! Sunt assumenda explicabo fugit molestiae ut, odit quia blanditiis mollitia earum velit.
      </p>
    </li>
    <li class="content__list-item">
      <h3 class="content__list-title">
        Lorem
      </h3>
      <p class="content__list-text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorum blanditiis minus. Quae facere consequuntur dolorum laborum ipsum nam natus, laboriosam, ab ipsam corrupti eaque sed aperiam quibusdam blanditiis neque nobis omnis saepe ducimus voluptas eius eum! Sunt assumenda explicabo fugit molestiae ut, odit quia blanditiis mollitia earum velit.
      </p>
    </li>
  </ul>
</div>

核心布局逻辑说明 #

grid-template-columns: repeat(auto-fit, minmax(315px, 1fr))是实现需求的关键：

• auto-fit：自动根据容器宽度调整列的数量，多余的空间会被现有列平分
• minmax(315px, 1fr)：设置每列的最小宽度为315px，最大宽度为1fr（即平分剩余空间）
• 结合起来，当容器宽度足够容纳3列（3*315px + gap）时，自动显示3列；宽度不足时，会自动减少列数，1个元素占满整行，2个元素平分宽度，新增元素会自动换行到下一行。

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