0

I am creating a basic CSS Grid for my website. Right now, it has 3 rows. One for the logo and nav, another for a banner image, and a third for text content.

The grid has a total of 6 columns, two of which are a set size (25px) and I use them as borders to indent the content contained within certain css grid rows. As you can see in the attached images, the top-nav (logo+navigation) display as expected and are slightly indented using the 'left' and 'right' CSS grid border columns.

After that, the banner image appears on a new css grid row as expected, and takes up all 6 columns (no left or right border columns used).

Finally, the third row, that has text in it should be spanning over 4 columns, with the left and right css grid columns displaying. That is where everything turns into a mess.

Instead, the third row overlays the banner on the second row, does not follow the rule of using the left and right grid columns for indenting, and the navigation row (logo+nav), disappears.

I provide the code here, and also include a Codepen, along with pictures to illustrate the problem.

I believe the problem has to do with those left and right border columns because if I have the grid row spread across all 6 columns, the text displays properly.

Can you help me figure out what I am doing wrong? Maybe there is a better approach to achieve the border without the extra columns?

Thank you!

Codepen

[https://codepen.io/BillRaymond/pen/vYOJEZY][1]

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="grid.css">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="logo"><img src="https://via.placeholder.com/250x35?text=Logo" alt="" class="logo-image"></div>
    <div class="nav">HOME ABOUT BLOG LINKEDIN TWITTER </div>
    <div class="banner"><img src="https://via.placeholder.com/1366x500?text=banner" alt="" class="banner-image"></div>
    <div class="title">This text should be below the banner with a 'left' and 'right' border. The logo and navigation
      bar do not show.</div>
  </div>
</body>

</html>

CSS/SCSS

// full size grid
.container {
    margin: auto;
    display: grid;
    max-width: 1366px;
        grid-template-areas:
        "left   logo   nav    nav    nav    right"
        "banner banner banner banner banner banner"
        "left   title  title  title  title  right";
       // ^^ comment the above line and add a semi-colon to the line above that. The logo and nav will appear again.
    grid-template-columns: 25px auto auto auto auto 25px;
    grid-template-rows: auto auto auto;
} // end full-size container

.left {
    display: grid;
    grid-area: left;
}

.right {
    display: grid;
    grid-area: right;
}

.logo {
    display: grid;
    grid-area: logo;
}

.nav {
    display: grid;
    grid-area: nav;
    justify-content: end;
}

.banner {
    display: grid;
    grid-area: banner;
}

.title {
    display: title;
    grid-area: title;
}

Grid Layout with Expected Outcome

The first two rows display properly. The first row (logo+nav) displays with the left and right css grid border columns. The banner image displays properly and spans all 6 columns (no left or right border).

The third row is text and does not display properly. It displays over the 2nd row instead of the intended below. It does not have the left and right border as intended. The navigation bar (logo+nav) no longer display.

Bill
  • 582
  • 1
  • 7
  • 21

1 Answers1

0

Grid areas must be rectangles. You cannot spread a grid-area like you're trying to. Instead rename the areas left and right (and properly assign them to their respective CSS declarations):

grid-template-areas:
    "leftTop      logo   nav    nav    nav    rightTop"
    "banner       banner banner banner banner banner"
    "leftBottom   title  title  title  title  rightBottom";
connexo
  • 53,704
  • 14
  • 91
  • 128
  • Okay, that makes sense now. Do you think it would be okay to just set a margin-left and margin-right on the div? Not sure if that breaks any css grid rules. I also like your idea of just using a newly named border item. Thanks so much! – Bill Mar 02 '20 at 22:30