Issues displaying a grip

HTML-CSS
#1

I´m having a hard time trying to create a grid with 2 cols and 3 rows doing the “landing page” . I have created the grid, set display to grid, created 2 cols and 3 rows, set the grid area for each item but nothing happens… I haven´t completed the CSS arrangements as the grid didn´t want to change at all…please help!

   <div class="container">
      <section id="features">
        <div class="grid">
          <div class="icon1">
            <i class="fa fa-3x fa-fire"></i>
          </div>
          <div class="content2">
            <h2>Premium Materials</h2>
            <p>
              Our trombones use the shiniest brass which is sourced locally.
              This will increase the longevity of your purchase.
            </p>
          </div>
        </div>
        <div class="grid">
          <div class="icon3">
            <i class="fa fa-3x fa-truck"></i>
          </div>
          <div class="content4">
            <h2>Fast Shipping</h2>
            <p>
              We make sure you recieve your trombone as soon as we have finished
              making it. We also provide free returns if <br />
              you are not satisfied.
            </p>
          </div>
        </div>
        <div class="grid">
          <div class="icon5">
            <i class="fa fa-3x fa-battery-full"></i>
          </div>
          <div class="content6">
            <h2>Quality Assurance</h2>
            <p>
              For every purchase you make, we will ensure there are no damages
              or faults and we will check and test the pitch of <br />
              your instrument.
            </p>
          </div>
        </div>
      </section>
    </div>

////////////CSS///////////

#features {

    display: grid;

      grid-template-columns: 200px 1fr;

    grid-template-rows: 125px 125px 125px;

    grid-template-areas: "header start"

    "advert mid" 

    "footer end";

        

}

.icon1 {

    grid-area: "header";

    width: 200px;

    height: 125px;

grid-column: 1 / 2;

justify-self: start;

}

.content2 {

    grid-area: "start"; 

    grid-row: 2 / 3;

    justify-self: start;

}

.icon3 {

    grid-area: "advert";

    width: 200px;

    height: 125px;

Google Chrome (windows 10)

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

#2

Hi Gustav,
welcome to the FCC forum!

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

#3

Thank you Michael - I appreciate it.

#4

Welcome. You did actually create 2 cols and 3 rows, but I guess you expected to the content to spread differently …

image
image1552×741 139 KB

I would suggest visualizing the grid with the dev tools and poking around to see which element ended up in which grid cell. The screenshot is from Firefox, which has this little “grid” button next to the parent with the display: grid; property. (I am not sure Chrome has that.)

image

#5

That´s what I see as well. Whether I change the cell contents, the picture will remain the same. I opened it in Edge and it shows the same problem, it also shows the ID “grid” is the content on the 1/2 - 2/2 - 3/2 cells but according to the code it´s supposed to contain the entire row. What would you do different? Thank you Michael

#6

I think you only need to set the parent to display: grid; and the sizes of the rows and columns. If you then remove all <div class="grid"> all icons and content elements are on the same hierarchy level. Each one will use up one grid cell in the order of the HTML.

I could imagine that only one .icon and one .content class would be handy to style all of them at once …

#features {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 125px 125px 125px;
}

/*
.icon {
  styles for all icons ...
}

.content {
  styles for all content elements
}
*/

https://jsfiddle.net/1r3hkjd5/12/

image
image803×455 38 KB

That uses the given grid. It might be worth considering to treat each icon+content combination as a unit. Maybe use a sub-grid for that… removing the fixed row height might make it easier to make this layout responsive …

#7

Thank you Michael, I figured that out last night. It´s kind of a tricky process though, because when you have to add styles to the div ( row content) like adding font-sizes or background-color you can´t place the item in its cell as the father will no longer be the main content…but there´s always a solution for everything… I really appreciate your help…

1 Like