CSS Simple Grid Layout – Header Image Won't Left Justify

Advertisements

I’m new to coding and I’m having an issue with a CSS grid layout I’m trying to use. For the header, I want to use an image for the left side and a nav menu on the right. I want the image in the header to be left justified with the nav menu taking up the remainder of the space. I can’t figure out how to get the image to justify to the left, there’s a gap no matter what I try.

HTML

<div class="grid">
        <body>
            <header>
                <img src="/images/placeholder_1.jpg">
                <nav>
                    <ul class="nav">
                        <li>Blog</li>
                        <li>About Me</li>
                        <li>Publications</li>
                    </ul>
                </nav>
            </header>
            <main>
                <h1>Lorem Ipsem</h1>
            </main>
            <script src="index.js"></script>
        </body>
        <footer>
            
        </footer>
    </div>

CSS

.grid {
    display: grid;
    grid-template-columns: 75% 25%;
    grid-template-rows: 50px 200px 100px;
    grid-gap: 1em;
}

header, footer {
    grid-column-start: 1;
    grid-column-end: 3;
}

.grid > * {
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

header img {
    width: 500px;
    height: 50px;
    justify-content: flex-start;
    align-items: flex-start;
    
}

I started with

header img {
    width: 500px;
    height: 50px;    
}

I tried adding the justify-content and align-items properties with different values, but nothing seems to work.

>Solution :

First: <body> is the root of the page content and should not be wrapped in a div.

Next: display: grid establishes a grid layout for the immediate children of the element. In your html the grid items (the immediate children of the div) would be <body> and <footer>, leaving your header and nav unaffected. I suspect this is a big source of your frustration: your CSS rules aren’t applying to the elements you’re trying to lay out.

In the examples below I’ve omitted the broken (and irrelevant) bits of the html for clarity.

I’ve also targeted HTML elements (header, nav) in the CSS instead of using classes. You shouldn’t do this in your project. You should stick class attributes on the elements and target the CSS accordingly. I’m doing it this way here to minimize the amount of code for readability (and out of a bit of laziness).

There are a variety of ways to accomplish what you’re trying to do. Here’s one example using grid to establish the image and nav columns, then using flex within the nav to right-align its contents:

header {
  display: grid;
  /*
  min-content: to make the first column as small as the content will allow
  1fr: to allocate 100% of the remaining space to the second column
  */
  grid-template-columns: min-content 1fr;
}

nav {
  /* just for visibility */
  background: skyblue;
  
  /* using flex to right-align the ul (the only child of nav) */
  display: flex;
  justify-content: flex-end;
}
<header>
  <img src="//placekitten.com/200/100">
  <nav>
    <ul class="nav">
      <li>Blog</li>
      <li>About Me</li>
      <li>Publications</li>
    </ul>
  </nav>
</header>

Another example: You could achieve this entirely with flexbox. (No reason not to use grid. Just demonstrating another option.)

I’ve annotated the CSS to provide some info about what each rule is doing.

header {
  /* flex to lay out the immediate children horizontally */
  display: flex;
}

header img {
  /* don't let flex grow or shrink the image to adapt to the available flex space */
  flex: 0 0 auto;
}

header nav {
  /* let flex grow the nav to occupy the available space */
  flex: 1 1 100%;
  
  /* just for visibility */
  background: skyblue;

  /* make nav a flex container too so we can justify its contents to the right (flex-end) */
  display: flex;
  justify-content: flex-end;
  
  /* you could omit the two lines above and do this instead if you wanted the text right-justified
  text-align: right;
  */
}
<header>
  <img src="//placekitten.com/200/100">
  <nav>
    <ul class="nav">
      <li>Blog</li>
      <li>About Me</li>
      <li>Publications</li>
    </ul>
  </nav>
</header>

Leave a ReplyCancel reply