Troubles with CSS grid design

Could someone assist me with my grid layout for a project on free code camp?

I am trying to display 3 of my portfolio pages in a row using a grid layout, but I'm having trouble getting the middle page to align properly with the others. Since I am new to this, any feedback on what I have done so far would be greatly appreciated.

If you need to see the codepen, here is the link: 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

Answer №1

Initially, there seems to be a minor issue (likely a typo) in the CSS

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

Is it possible that the last part should actually be grid-template-rows?

Furthermore, you can manually adjust each element in the grid like so:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

utilizing the data provided by a user in the "prompt" window within my HTML code

Looking to utilize user input from the prompt window. This is my custom JavaScript form: var answer; function load() { answer=prompt("what is your name?", "Write your name here"); return answer; } function hideNsee() { var HNS = docume ...

javascripthtml

Is it possible to alter the name of a slot before displaying the element in the shadowDOM, depending on the slot utilized in the DOM?

In my project, I am working on implementing different features for both desktop and mobile devices. Some of these features can be replaced by slots. My goal is to have a slot that can be either replaced by a desktop slot called poster-foreground, or a mobi ...

javascripthtmltypescriptlit

I can't figure out why I'm facing a Same-origin policy error when all the files are located in the same local directory

Currently, I am facing an issue with my main html file that loads another html file in the same directory using an iframe. There is a button on the main page that interacts with the html file within the iframe through a function: <script> function m ...

javascripthtml

Tips for styling a button upon being clicked

Is there a CSS technique to make a button change color when clicked with the mouse? I am aware of using ':hover' for changing color, but I need something specific to a left mouse click. I want the same functionality as a standard button but with ...

javascriptjqueryhtmlcss

Personalizing navigation tabs using Bootstrap

I've been working on creating a custom bootstrap navbar tabs, but I'm struggling to remove the borders and apply the custom colors. After some trial and error, here's what I have so far: .nav-tabs, .nav-pills { text-align: center; bo ...

javascripthtmlcssbootstrap-5

How to dynamically change the color of an AngularJS element based on a condition?

As someone who is new to AngularJS, I am currently working on changing the color of a table element to yellow if the user has voted on a specific choice. <div ng-show="poll.userVoted"> <table class="result-table"> <t ...

cssangularjsconditional-statements

Is there a way to send multiple parameters in an array to a route?

I am working on deleting multiple rows from a MySQL database using checkboxes in my ejs view with node.js and React app. I have successfully deleted a single row, but I am struggling to figure out how to pass an array of parameters for deleting multiple ro ...

javascripthtmlmysqlnode.jsreactjs

Positioning buttons alongside a contact form

Having trouble aligning three buttons next to a contact form. Placed them in a row class but the buttons keep falling below the form. Even tried using float: right but they still end up underneath. Any assistance would be appreciated, thank you! If you wa ...

htmlcssformsbutton

Insert information into the <div> element

Sorry if this is a repeated question, but I'm struggling to locate the solution. Is there a way to use jQuery to add content within a div, depending on its current class? For instance, adding "CODE" to a div such as: <div "CODE" class="class_one" ...

jqueryhtml

Ensure that both the top row and leftmost column are fixed in a vertical header using JQuery DataTable

Check out the implementation of vertical header flow in Datatables by visiting: https://jsfiddle.net/2unr54zc/ While I have successfully fixed the columns on horizontal scroll, I'm facing difficulty in fixing the first two rows when vertically scroll ...

javascripthtmljquerycssdatatable

All submissions consistently redirect to the same page without any action taking place

I am currently in the process of creating a form that will allow me to change/update my ticket status using a select option. However, whenever I submit the form, it redirects back to the same page instead of going to the desired "status-update.php" address ...

javascriptphpjqueryhtmlforms

Click on the hyperlinks to add its source to the MySQL table

<a href=xyz.html name="text2">click me too </a> Whenever I click the link, xyz.html must be stored in a table within my database ...

phphtml

An element will not automatically wrap text when all anchors are in place

http://jsfiddle.net/awWmY/ I've been struggling to figure out why the text won't wrap to #bigEnough. Can anyone help me with this simple issue? html{background:black;} #bigEnough { width: 500px; text-wrap: normal; } #bigEnough a { -moz-t ...

htmlcss

Transition smoothly between sections using fullPage.js with clipping path effects

I am looking to create a unique clipping animation utilizing SVG clipping path. The animation should hide the first section while revealing the second section in a smooth transition using fullPage.js. This idea is somewhat similar to the question discusse ...

javascripthtmlcsssvgfullpage.js

Changing the div background color based on the status of the `.play()` function

I need assistance with changing the background color of a div based on whether an audio file is playing or not. $('.uprow2').on('click', function() { $('#karma')[0].play(); }); .uprow2 { width: 680px; height: 60px; ...

javascriptjqueryhtmlcss

Tips for dynamically resizing the content area using CSS without the need for javascript

What I need is as follows: The blue area should resize when the browser window resizes. The header must be visible at all times. The blue area should start right after the header ends, not overlapping or appearing above it. The blue area should end befor ...

htmlcss

"Utilizing JQuery to enhance task management by implementing a delete function

I need help figuring out how to create a function that can delete tasks from my todo list. Currently, each task has its own remove button, but I want to implement a single remove button at the bottom that removes checked or crossed out tasks. Any suggestio ...

javascriptjqueryhtmlcss

How to style text in CSS with a numbered underline beneath

Is there a way to apply underlining to text and include a small number underneath the underline in a similar style shown in this image, by utilizing css, html, or javascript? ...

javascripthtmlcssunderline

Tips for implementing an autoscroll feature in the comments section when there is an abundance of comments

Having a large number of comments on a single post can make my page heavy and long sometimes. This is the current layout of my post comment system: Post 1 Comment for post 1 //if comments are more than 3 <button class="view_comments" data-id="1">Vi ...

javascriptjquerycssajaxfacebook

Echo result triggers a color change in the table cell

Working on a piece of code that should change the background color of the first td element based on ping results. If success, it becomes green; if failed, it turns red. The issue I'm facing is that while I can display images or use different methods ...

phphtmlcss