0

I need help with my grid layout for a free code camp project.

Basically, I'd like to show 3 of my portfolio pages in a row. I setup a grid layout for this and can't seem to get the middle page to lineup with the others. Also, as I am brand new, feel free to give feedback on what I have so far in general.

here is the link to the codepen just in case 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>

3
  • 2
    you are not correctly opening/closing the a tag Commented Feb 15, 2019 at 21:44
  • The </div></a> should be </a></div>. Commented Feb 15, 2019 at 21:51
  • Thank you so much!! Commented Feb 16, 2019 at 16:27

1 Answer 1

1

First, you have a small issue (typo I assume) here in the CSS

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

Shouldn't that last part be grid-template-rows?

Also you could use this to manually control each element in the grid:

#first-p {
  grid-row:1;
  grid-column:3;
}
1
  • 1
    I really appreciate your time and feedback. Yes it was definitely a typo lol. Commented Feb 16, 2019 at 16:30

Not the answer you're looking for? Browse other questions tagged or ask your own question.