如何无需Bootstrap实现图标与内容并排并自适应间距？

问题描述 #

原本使用Bootstrap的col-sm-3 col-md-3类实现左侧图标每行显示4个、超出自动换行，右侧摘要与图标并排的布局。现在需要脱离Bootstrap改用纯CSS实现，但尝试CSS Grid方案时，当图标数量为1或2个时，图标与摘要间会出现较大间距，希望让摘要能根据图标数量动态自适应调整。

原HTML代码 #

<div class="coreStuff"> 
    <div class="col-sm-3 col-md-3">
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
    </div>  
    <div class="col-sm-3 col-md-3">
        <p>Global warming can result in many serious alterations to the environment, eventually impacting human health. It can also cause a rise in sea level, leading to the loss of coastal land, a change in precipitation patterns, increased risks of droughts and floods, and threats to biodiversity.</p>
    </div>
</div>

尝试的CSS代码 #

.theIcons{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.theSummary{
    width: 25%;
}

解决方案 #

通过Flex + Grid的组合布局可以完美解决间距自适应问题，具体实现如下：

修改后的HTML结构（替换Bootstrap类为自定义类） #

<div class="coreStuff"> 
    <div class="icon-container">
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
    </div>  
    <div class="summary-container">
        <p>Global warming can result in many serious alterations to the environment, eventually impacting human health. It can also cause a rise in sea level, leading to the loss of coastal land, a change in precipitation patterns, increased risks of droughts and floods, and threats to biodiversity.</p>
    </div>
</div>

纯CSS实现代码 #

/* 父容器：Flex实现并排布局，支持小屏幕换行 */
.coreStuff {
  display: flex;
  gap: 1.5rem; /* 图标区与摘要区的间距，可按需调整 */
  align-items: flex-start; /* 顶部对齐，避免内容高度不同时错位 */
  flex-wrap: wrap; /* 屏幕宽度不足时自动换行 */
}

/* 图标区：Grid实现每行4个图标，宽度随内容自适应 */
.icon-container {
  display: grid;
  grid-template-columns: repeat(4, auto); /* 列宽随图标自身尺寸自适应 */
  gap: 0.8rem; /* 图标之间的间距，可按需调整 */
  max-width: max-content; /* 容器宽度随图标数量自适应，最多占4个图标的宽度 */
}

/* 摘要区：占据剩余所有空间，小屏幕下保留最小宽度 */
.summary-container {
  flex: 1;
  min-width: 280px; /* 避免小屏幕下摘要过窄，可按需调整 */
}

/* 可选：统一图标尺寸，保证布局整齐 */
.icon-container i {
  font-size: 1.5rem; /* 图标大小 */
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

方案说明 #

1. 自适应间距解决：父容器用flex布局，摘要区通过flex:1自动占据剩余空间，不会出现固定宽度导致的无效间距；图标区用max-width: max-content让宽度随图标数量动态变化，图标少的时候容器变窄，摘要自动跟进。
2. 图标布局规则：grid-template-columns: repeat(4, auto)保证每行最多显示4个图标，超出自动换行，同时列宽随图标尺寸自适应，避免空间浪费。
3. 响应式适配：添加flex-wrap: wrap和min-width，确保小屏幕下布局自动换行，摘要区不会过度压缩。

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