CSS Grid布局桌面端无法使作品集项目并排显示问题求助

问题原因与修复方案 #

你现在的布局问题主要由几个CSS语法和逻辑错误导致，修正对应错误即可实现桌面端两个项目并排的效果：

• grid-area属性值无需加引号，现有代码中的引号会导致网格区域映射失效
• 所有作品集项目共用同一个grid-area值，会导致元素重叠而非分列排布
• 网格容器添加了flex-direction冗余属性，flex属性对Grid容器不生效
• align-items: left属于非法属性值，flex交叉轴左对齐应使用flex-start
• 页面存在重复idview-project，id在单页面内必须唯一，建议改为class属性

修正后的CSS代码

/*
    ========================
    INNTER GRID STYLES
    ========================
 */

.inner-grid {
  display: grid;
  grid-template-rows: 50px 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: "portfolio-nav" "portfolio-item";
}

#portfolio-nav {
  grid-area: portfolio-nav;
  border-top: 1px solid #0000001e;
  display: flex;
  justify-content: center;
  align-items: center;
}

.portfolio-nav-style {
  font-size: 0.9rem;
}


/*
    ========================
    PORTFOLIO ITEM STYLES
    ========================
    */

.portfolio-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 2px 5px;
}

#portfolio-item-1 {
  margin-top: 0px;
  background-color: #4B9A6D;
}

#portfolio-item-2 {
  background-color: #7541C8;
}

.portfolio-item h4 {
  font-weight: 300;
  font-size: 1.5rem;
  padding-top: 50px;
  padding-bottom: 30px;
  color: #ffff;
}

.portfolio-item p {
  font-weight: 100;
  color: rgba(255, 255, 255, 0.904);
}

.portfolio-item img {
  max-width: 100%;
  min-height: auto;
  margin-top: 17px;
}

.portfolio-item h4,
p {
  padding-left: 25px;
  padding-right: 25px;
}

.view-project {
  color: #ffff;
  padding-top: 25px;
  cursor: pointer;
}

.view-project:hover {
  text-decoration: underline;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .inner-grid {
    display: grid;
    grid-template-rows: 50px 1fr;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "portfolio-nav portfolio-nav";
  }
  .portfolio-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 2px 5px;
    width: 100%;
  }
}

修正后的HTML代码

<div class="inner-grid">
  <div id="portfolio-nav">
    <nav id="main-header-nav-style">
      <a href="#" class="portfolio-nav-style">Portfolio</a>
      <a href="#" class="portfolio-nav-style">Learning</a>
    </nav>
  </div>

  <div id="portfolio-item-1" class="portfolio-item">
    <h4>Learning CSS Grid</h4>
    <p>With this project, I learned how to create the holy grail layout using CSS Grid.</p>
    <p class="view-project">View Project <i class="fas fa-chevron-right"></i></p>
    <img src="/img/Laptop_Mobile_Mockup2.png" alt="">
  </div>

  <div id="portfolio-item-2" class="portfolio-item">
    <h4>Learning Flexbox</h4>
    <p>With this project, I learned how to create a Testimonial Grid with CSS Flexbox.</p>
    <p class="view-project">View Project <i class="fas fa-chevron-right"></i></p>
    <img src="/img/Laptop_Mobile_Mockup.png" alt="">
  </div>
</div>

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