Bollate

HTML

[ANSWERED] html – CSS Grid Blowout

By

Nov 18, 2022 , ,

Solution 1 :

The grid-area property for the nav-item expects the area-name without the double-quotes ".

Also, make sure grid-area is unique per item.

See below for a working example:

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

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

#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: left;
  /*margin: 2px 5px;*/
}

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

#portfolio-item-2 {
  grid-area: 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-1 portfolio-item-2";
  }
  .portfolio-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    margin: 2px 5px;
    width: 100%;
  }
}
<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 id="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 id="view-project">View Project <i class="fas fa-chevron-right"></i></p>
    <img src="/img/Laptop_Mobile_Mockup.png" alt="">
  </div>
</div>

Solution 2 :

from comment

grid-area: "portfolio-item"; should be grid-area: portfolio-item; , then grid-template-columns: 1fr; grid-template-areas: "portfolio-nav" "portfolio-item"; sets only 1 column. try fix all this , typo and a 2 column grid 😉 –

Possible fix where you can use the grid-area only if needed

/*
    ========================
    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 {
  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: left;
  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 portfolio-item";
  }

  #portfolio-nav {
    grid-area: portfolio-nav;
  }
  .portfolio-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    margin: 2px 5px;
    width: 100%;
  }
}
<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 id="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 id="view-project">View Project <i class="fas fa-chevron-right"></i></p>
    <img src="/img/Laptop_Mobile_Mockup.png" alt="">
  </div>
</div>

or rename the grid-areas "portfolio-item portfolio-item" to "portfolio-item1 portfolio-item2" to assign a different cell to your different ids, else, it will span the entire row stacking both on each others.

Solution 3 :

I modified your code and the grids are positioned perfectly

See the picture

enter image description here

I added a div “row” inside “inner-grid” which contains “portfolio-item-1” and “portfolio-item-2”
HTML CODE :

<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 class="row">
            <div id="portfolio-item-1" class="portfolio-item">
                <h4>Learning Flexbox</h4>
                <p>With this project, I learned how to create a Testimonial Grid with CSS Flexbox.</p>
                <p id="view-project">View Project <i class="fas fa-chevron-right"></i></p>
                <img src="assets/img/lapttop-mobile2.png" alt="">
            </div>

            <div id="portfolio-item-2" 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 id="view-project">View Project <i class="fas fa-chevron-right"></i></p>
                <img src="assets/img/lapttop-mobile2.png" alt="">
              </div>
            
            
        </div>
      
        
    </div>

CS CODE :

body
{
    margin: 0; /* removing the default body margin */
}

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

#portfolio-nav a
{
    text-decoration: none;
    color: gray;
    margin: 10px;
    font-weight: bold;
}

.row
{
    display: grid;
    grid-template-columns: auto auto; 
}

.portfolio-item
{
    padding: 20px;
}

.portfolio-item h4, .portfolio-item p
{
    color: white;
}

.row #portfolio-item-1
{
    background:  #7541C8;
}

.row #portfolio-item-2
{
    background:  #4B9A6D;
}

Problem :

I’m new to web development.

I started creating a portfolio website a couple of months ago, but I took a 2-month break, now I’m trying to get into it again and put my portfolio items next to each other in desktop size but for some reason, it doesn’t work…

I tried to figure it out by searching some StackOverflow posts but nothing has worked so far.
Pretty sure it’s something I’m overlooking but yeah, that comes with the learning process haha.

Image of blowout

Grid

/*
    ========================
    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 {
  grid-area: "portfolio-item";
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  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;
    flex-direction: column;
    grid-template-rows: 50px 1fr;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "portfolio-nav portfolio-nav" "portfolio-item portfolio-item";
  }
  .portfolio-item {
    grid-area: "portfolio-item";
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    margin: 2px 5px;
    width: 100%;
  }
}
<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 id="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 id="view-project">View Project <i class="fas fa-chevron-right"></i></p>
    <img src="/img/Laptop_Mobile_Mockup.png" alt="">
  </div>
</div>

I hope someone can help me!

Comments

Comment posted by G-Cyrillus

grid-area: "portfolio-item";

By

Related Post

HTML

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

Nov 20, 2022
HTML

[ANSWERED] python – Extract text from a class in HTML using CSS language

Nov 20, 2022
HTML

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022