CSS设置flex与grid后portfolio图片无法对齐并排显示求解决

问题描述 #

我遇到了图片无法对齐的问题，每次尝试排列图片时都无法对齐。我不确定这是否是图片本身的问题，希望能获得帮助。我刚接触相关开发，如果这是我方可以轻松修复的简单问题，我深表歉意。

现有代码 #

CSS代码 #

.portfolio-item-wrapper2 {
    display: flex;
    grid-template-columns: 1fr 1fr 1fr;

}

.portfolio-item-wrapper2 {
    position: relative;

}

.portfolio-img-background2 {
    height: 350px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.img-text-wrapper2 {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    padding-left: 100px;
    padding-right: 100px;
}

HTML代码 #

<div class="content=wrapper2">
    <div class="portfolio-items-wrapper2">
        <div class="portfolio-item-wrapper2">
            <div class="portfolio-img-background2">
                <div class="img-text-wrapper2">
                    <div class="logo-wrapper2">
                        <img src="\\kcfs04\StudentHome\20023600\Downloads\C.png" />

                    </div>
                </div>

            </div>
        </div>
    </div>

</div>

<div class="content=wrapper3">
    <div class="portfolio-items-wrapper3">
        <div class="portfolio-item-wrapper3">
            <div class="portfolio-img-background3">
                <div class="img-text-wrapper3">
                    <div class="logo-wrapper3">
                        <img src="\\kcfs04\StudentHome\20023600\Downloads\G.png" />

                    </div>
                </div>

            </div>
        </div>
    </div>

</div>

问题效果 #

需求 #

让两张图片并排显示，后续还会在下方添加更多相同位置的图片，需要保持布局对齐。

存在的问题 #

• 属性混用：.portfolio-item-wrapper2同时设置了display: flex和grid-template-columns，grid-template-columns是Grid布局专属属性，在Flex布局下不生效，无法实现多列排列
• 容器结构错误：两个图片卡片分别放在独立的外层content-wrapper容器中，div作为块级元素默认独占一行，无法并排显示
• 类名冗余：所有卡片类名都加了2、3的后缀，无法复用样式，后续新增图片维护成本高
• 内边距设置不合理：img-text-wrapper2设置了左右各100px的固定内边距，容器宽度不足时会导致内容溢出、错位

修复后代码 #

HTML代码 #

<!-- 所有图片卡片统一放在同一个外层容器中 -->
<div class="portfolio-container">
  <!-- 第一个图片卡片 -->
  <div class="portfolio-item">
    <div class="portfolio-img-background">
      <div class="img-text-wrapper">
        <div class="logo-wrapper">
          <img src="\\kcfs04\StudentHome\20023600\Downloads\C.png" alt="C图标">
        </div>
      </div>
    </div>
  </div>
  <!-- 第二个图片卡片 -->
  <div class="portfolio-item">
    <div class="portfolio-img-background">
      <div class="img-text-wrapper">
        <div class="logo-wrapper">
          <img src="\\kcfs04\StudentHome\20023600\Downloads\G.png" alt="G图标">
        </div>
      </div>
    </div>
  </div>
  <!-- 后续新增卡片直接复制.portfolio-item结构即可 -->
</div>

CSS代码 #

/* 外层容器用Grid布局，默认2列排列，自动换行 */
.portfolio-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px; /* 卡片之间的间距，可自行调整 */
  width: 100%;
  box-sizing: border-box;
}

.portfolio-item {
  position: relative;
  width: 100%;
}

.portfolio-img-background {
  height: 350px;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.img-text-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  text-align: center;
  padding: 0 20px; /* 改为自适应内边距，避免内容溢出 */
  box-sizing: border-box;
}

扩展说明 #

后续需要新增图片时，直接在.portfolio-container容器内复制.portfolio-item的结构即可，Grid布局会自动按照2列的规则排列、自动换行，所有卡片默认保持对齐。如果需要调整每行显示的卡片数量，只需要修改grid-template-columns: repeat(2, 1fr)中的数字即可，比如改为repeat(3, 1fr)就是每行3张。

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