求助：实现4列布局且其中一列占近满宽（Flex/Grid均可）

根据你提供的布局需求，这里给出两种可行实现方式，Flex和Grid都能轻松达成目标，核心是让标题列占据容器剩余的大部分宽度，其他列自适应内容或保持固定尺寸。

Flex 实现方案 #

通过调整子元素的flex属性，给标题列分配可扩展的宽度，其他列固定尺寸：

.product {
  direction: rtl;
  margin: 30px;
  display: flex;
  flex-wrap: nowrap; /* 保持一行布局 */
  align-items: center; /* 垂直居中对齐，可选优化 */
  width: 300px;
  height: 80px;
  border: 1px #3976b7 solid;
  padding: 5px;
}

/* 图片、价格、按钮列：不放大不缩小，宽度自适应内容 */
.product > div:not(.title) {
  flex: 0 0 auto;
  border: 1px #3976b7 solid;
  text-align: center;
  margin: 5px;
  padding: 0 8px; /* 避免内容过度拥挤 */
}

/* 标题列：占据容器剩余所有可用宽度 */
.product .title {
  flex: 1 1 auto;
  border: 1px #3976b7 solid;
  text-align: center;
  margin: 5px;
  padding: 0 8px;
}

/* 窄容器测试样式 */
.product.mc {
  width: 200px;
  height: 200px;
}

<div class="product mc">
  <div>[产品图]</div>
  <div class="title">taste our fresh chips</div>
  <div>$40</div>
  <div><a href="">Add to cart</a></div>
</div>

关键说明 #

• flex: 0 0 auto：让非标题列保持自身内容宽度，不会被拉伸或压缩
• flex: 1 1 auto：让标题列自动填充容器剩余的所有宽度，容器变窄时会自动收缩适配

Grid 实现方案 #

用Grid布局更直观，直接定义列宽分配规则：

.product {
  direction: rtl;
  margin: 30px;
  display: grid;
  /* 列宽规则：自适应内容 | 占满剩余空间 | 自适应内容 | 自适应内容 */
  grid-template-columns: auto 1fr auto auto;
  align-items: center; /* 垂直居中对齐 */
  gap: 10px; /* 直接设置列间距，替代margin更简洁 */
  width: 300px;
  height: 80px;
  border: 1px #3976b7 solid;
  padding: 5px;
}

.product > div {
  border: 1px #3976b7 solid;
  text-align: center;
  padding: 4px;
}

/* 窄容器测试样式 */
.product.mc {
  width: 200px;
  height: 200px;
}

<div class="product mc">
  <div>[产品图]</div>
  <div class="title">taste our fresh chips</div>
  <div>$40</div>
  <div><a href="">Add to cart</a></div>
</div>

关键说明 #

• grid-template-columns: auto 1fr auto auto：1fr表示占据容器剩余的所有可用空间，其他auto列自适应内容宽度
• gap属性统一设置列间距，避免了margin带来的间距不一致问题

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