时间戳

首页 > 解决方案 > CSS网格布局问题

html - CSS网格布局问题

问题描述

我需要帮助我进行免费代码营项目的网格布局。

基本上，我想连续显示 3 个我的投资组合页面。我为此设置了一个网格布局，但似乎无法让中间页面与其他页面对齐。另外，由于我是全新的，请随时就我目前的总体情况提供反馈。

这是codepen的链接，以防万一https://codepen.io/eddiepearson/pen/xMaaYX

* {
  @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,300i,400'); 
}

html, body {
  margin: 0;
  padding: 0;
}

nav ul {
  text-align: right;
  position: fixed;
  margin-top: 0;
  width: 100%;
  background-color: #002171;
}

nav ul li {
  display: inline-block;
  margin: 55px;
  margin-bottom: 15px;
  margin-top: 30px;
}

nav ul li a {
  color: #fff;
  text-decoration: none; 
}

@media only screen and (max-width: 500px) {
  nav ul {
    text-align: left;
    height: 75px;
  }
  
  nav ul li {
    margin: 20px;
    height: 5px;
  }
}

.intro {
  top: 0;
  background: #002171;
  min-height: 55vh;
  padding-top: 45vh;
}

.intro p {
  text-align: center;
  color: #fff;
}

.intro h1 {
  text-align: center;
  color: #fff;
}

.work {
  margin-top: 50px; 
}

.work-header {
  text-align: center;
}
#projects {
  display: grid;
  grid-template-columns: 300px 300px 300px;
  grid-row-columns: 300px 300px;
  justify-content: space-evenly;
}

#third-p {
  
}

.project-pic {
  width: 100%;
}

.project-title {
  text-align: center;
}
<nav>
    <ul style="list-style-type: none" id="navbar">
      <li><a href="#welcome-section">About</a></li>
      <li><a href="#projects">Work</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
   </nav>


<section>
  <div id="welcome-section" class="intro">
    
    <h1>Hey i'am eddie</h1>
    <p>a web dev with a focus on UX</p>
    
   </div>
 </section>

<section>
  <h2 class="work-header">These are some of my projects.</h2>
  <div id="projects" class="work">
    <div id="first-p">
    <a href="https://codepen.io/eddiepearson/pen/vbxQEp" target="_blank" class="project project-box">
    <img class="project-pic" src="https://previews.dropbox.com/p/thumb/AAU0aRvU53Ban4nVNY5N70nno6nDVvhkDsD0qSzP0NYsVh20CPfm-jFQB4GrArV09A9eVa8YUpJqpQJDdBaHnyJ24GAfLey4u1qdJZ5gp2JY4WF-DkfnXfIawSA8n7jronkkUR_mT9xH5sFDTm0jagwpWpM93tn_zZs8c62-3c9fAQKvFmvjqyOjFenQsBgK5XUG62avpwvwjGtSf0IWMiXUrXUWhJIl2wFc3L4UK4z-Hw/p.png?size_mode=5" alt="project-pic">
    <div class="project-title">
        Tribute Page
      </div>
      </div>
      </a>
    <div id="second-p">
      <a href="https://codepen.io/eddiepearson/pen/vbxQEp" target="_blank" class="project project-box">
    <img class="project-pic" src="https://previews.dropbox.com/p/thumb/AAU0aRvU53Ban4nVNY5N70nno6nDVvhkDsD0qSzP0NYsVh20CPfm-jFQB4GrArV09A9eVa8YUpJqpQJDdBaHnyJ24GAfLey4u1qdJZ5gp2JY4WF-DkfnXfIawSA8n7jronkkUR_mT9xH5sFDTm0jagwpWpM93tn_zZs8c62-3c9fAQKvFmvjqyOjFenQsBgK5XUG62avpwvwjGtSf0IWMiXUrXUWhJIl2wFc3L4UK4z-Hw/p.png?size_mode=5" alt="project-pic">
    <div class="project-title">
        Tribute Page
      </div>
        </div>
      </a>
      <div id="third-p">
      <a href="https://codepen.io/eddiepearson/pen/vbxQEp" target="_blank" class="project project-box">
    <img class="project-pic" src="https://previews.dropbox.com/p/thumb/AAU0aRvU53Ban4nVNY5N70nno6nDVvhkDsD0qSzP0NYsVh20CPfm-jFQB4GrArV09A9eVa8YUpJqpQJDdBaHnyJ24GAfLey4u1qdJZ5gp2JY4WF-DkfnXfIawSA8n7jronkkUR_mT9xH5sFDTm0jagwpWpM93tn_zZs8c62-3c9fAQKvFmvjqyOjFenQsBgK5XUG62avpwvwjGtSf0IWMiXUrXUWhJIl2wFc3L4UK4z-Hw/p.png?size_mode=5" alt="project-pic">
    <div class="project-title">
        Tribute Page
      </div>
        </div>
      </a>
      </div>
 </section>

标签： htmlcsscss-grid

解决方案

首先，您在 CSS 中有一个小问题（我假设是错字）

grid-template-columns: 300px 300px 300px;
grid-row-columns: 300px 300px;

最后一部分不应该是grid-template-rows吗？

您也可以使用它来手动控制网格中的每个元素：

#first-p {
  grid-row:1;
  grid-column:3;
}

推荐阅读