求助：skills_group类的HTML/CSS布局对齐问题

问题根源 #

1. HTML结构中多余嵌套了skills__group，导致网格布局逻辑混乱，无法稳定生成2列2行的结构
2. 未给技能文本容器设置固定宽度或对齐规则，文本长度变化时会挤压布局空间

修复步骤 #

1. 修正HTML结构

移除每个skills__group内部嵌套的额外skills__group，将所有skills__data直接放在同一个skills__group下，让网格布局正确识别2列结构：

<!-- skills -->
<div class="skills__content grid" data-content id="skills">
    <div class="skills_area">
        <h3 class="skills_title">
            Desenvolvedor Frontend
        </h3>
        <div class="skills__box">
            <div class="skills__group">
                <div class="skills__data">
                    <i class="uil uil-check"></i>
                    <div>
                        <h3 class="skills__name">HTML</h3>
                        <span class="skills__level">Intermediário</span>
                    </div>
                </div>
                <div class="skills__data">
                    <i class="uil uil-check"></i>
                    <div>
                        <h3 class="skills__name">JavaScript</h3>
                        <span class="skills__level">Avançado</span>
                    </div>
                </div>
                <div class="skills__data">
                    <i class="uil uil-check"></i>
                    <div>
                        <h3 class="skills__name">Bootstrap</h3>
                        <span class="skills__level">Avançado</span>
                    </div>
                </div>
                <div class="skills__data">
                    <i class="uil uil-check"></i>
                    <div>
                        <h3 class="skills__name">CSS</h3>
                        <span class="skills__level">Intermediário</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="skills_area">
        <h3 class="skills_title">
            Desenvolvedor Mobile
        </h3>
        <div class="skills__box">
            <div class="skills__group">
                <div class="skills__data">
                    <i class="uil uil-check"></i>
                    <div>
                        <h3 class="skills__name">Swift</h3>
                        <span class="skills__level">Avançado</span>
                    </div>
                </div>
                <div class="skills__data">
                    <i class="uil uil-check"></i>
                    <div>
                        <h3 class="skills__name">Storyboard</h3>
                        <span class="skills__level">Avançado</span>
                    </div>
                </div>
                <div class="skills__data">
                    <i class="uil uil-check"></i>
                    <div>
                        <h3 class="skills__name">SwiftUI</h3>
                        <span class="skills__level">Intermediário</span>
                    </div>
                </div>
                <div class="skills__data">
                    <i class="uil uil-check"></i>
                    <div>
                        <h3 class="skills__name">Kotlin</h3>
                        <span class="skills__level">Intermediário</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="skills_area">
        <h3 class="skills_title">
            Extras
        </h3>
        <div class="skills__box">
            <div class="skills__group">
                <div class="skills__data">
                    <i class="uil uil-check"></i>
                    <div>
                        <h3 class="skills__name">Inglês</h3>
                        <span class="skills__level">Avançado</span>
                    </div>
                </div>
                <div class="skills__data">
                    <i class="uil uil-check"></i>
                    <div>
                        <h3 class="skills__name">MySQL</h3>
                        <span class="skills__level">Avançado</span>
                    </div>
                </div>
                <div class="skills__data">
                    <i class="uil uil-check"></i>
                    <div>
                        <h3 class="skills__name">Python</h3>
                        <span class="skills__level">Avançado</span>
                    </div>
                </div>
                <div class="skills__data">
                    <i class="uil uil-check"></i>
                    <div>
                        <h3 class="skills__name">Design Thinking</h3>
                        <span class="skills__level">Intermediário</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

2. 优化CSS规则

调整布局属性，确保文本长度变化时不打乱排版：

/*=============== SKILLS ===============*/
.skills__content{
  row-gap: 3.5rem;
}

.skills__title{
  font-size: var(--h3-font-size);
  text-align: center;
  margin-bottom: 1.5rem;
}

.skills__box{
  display: flex;
  justify-content: center;
  column-gap: 3rem;
}

.skills__group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto; /* 确保每行高度一致 */
  align-content: flex-start;
  row-gap: 1rem;
  column-gap: 2rem; /* 增加列间距，避免文本拥挤 */
}

.skills__data{
  display: flex;
  align-items: flex-start; /* 图标与文本顶部对齐 */
  column-gap: .5rem;
}

.skills__data i{
  font-size: 1rem;
  color: var(--first-color);
  margin-top: 0.25rem; /* 微调图标位置，与文本基线对齐 */
}

.skills__data > div {
  flex: 1; /* 让文本容器占满剩余空间 */
  min-width: 120px; /* 设置最小宽度，防止短文本时布局收缩 */
}

.skills__name{
  font-size: var(--normal-font-size);
  font-weight: 500;
  line-height: 1.2rem; /* 调整行高，避免文本重叠 */
  white-space: nowrap; /* 技能名称不换行，保持横向对齐 */
}

.skills__level{
  font-size: var(--smaller-font-size);
  display: block; /* 等级文本单独一行，避免挤在一起 */
}

关键修改说明 #

• 移除嵌套的skills__group：让网格布局直接控制4个技能项，生成稳定的2×2结构
• skills__data > div设置flex:1和min-width：确保每个文本容器宽度一致，不受文本长度影响
• white-space: nowrap：技能名称强制单行，避免换行导致高度变化
• align-items: flex-start：图标与文本顶部对齐，视觉上更整齐

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