Newbie needs help with grid positioning

I’m trying to learn flex box and grid and right now I’m messing around with this layout using grid.

The problem is that whatever I do I can’t seem to move the article heading container or the sidebar container and it’s driving me crazy.

I’ll copy and paste the html and the css below for anyone who might want to give me a hand.

Html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>:)</title>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <header>main header</header>
      </div>
      <div class="navbar">
        <nav>
          <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
            <li>item 5</li>
            <li>item 6</li>
          </ul>
        </nav>
      </div>
      <div class="main">
        <main>
          <div class="article">
            <article>
              <h2>Article Heading</h2>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure,
                unde voluptates voluptatem placeat quis sequi reiciendis
                sapiente consectetur. Aut, modi.
              </p>
              <h3>article subhead</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa,
                et.
              </p>
            </article>
          </div>
          <div class="sidebar">
            <aside>
              <h2>sidebar headline</h2>
              <img src="nothing yet" alt="nothing here" />
            </aside>
          </div>
        </main>
      </div>
      <div class="footer">
        <footer>this is the footer</footer>
      </div>
    </div>
  </body>
</html>

CSS:

@import url(can't post this I guess)
* {
  font-family: "Ubuntu", "sans-serif";
}

.container {
  display: grid;
  grid-template-columns: (4 1fr);
  grid-template-rows: 100px 1fr 1fr 50px;
  gap: 20px;
}

.container .header {
  grid-column-start: 2;
  grid-column-end: 4;
  font-size: x-large;
  font-weight: bold;
  text-align: center;
  color: antiquewhite;
  background-color: black;
}

.container .navbar {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 4;
  background: #000;
  color: antiquewhite;
}

.container .main .article {
    grid-column-start: 2;       <---- nothing happens when i adjust these.  
    grid-column-end: 3;         <---- 
    grid-row-start: 2;
    grid-row-end: 3;
  background-color: #000;
  color: antiquewhite;
}

.container .main .sidebar {
    grid-column-start: 4;       <---- or these. 
    grid-column-end: 4;         <---- 
    grid-row-start: 3;
    grid-row-end: 4;
  background-color: #000;
  color: antiquewhite;
}

.container .footer {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 4;
  background-color: #000;
  color: antiquewhite;
}

Thanks to anyone taking the time to help in advance!

Hi!
I can not see all your code, could you please go to the challenge press Get help then ask for help then press create a help post on the forum.

Oh sorry too advanced for me, if it’s not a challenge where I could get instructions to understand it better.

I’ve edited your code 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.

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

Thank you very much, i appreciate it!

i’ll make sure to do it the right way in the future.

change this to
grid-template-columns: repeat(4, 1fr);

as your current code is invalid and not being picked up by the browser (you can see that by examining the .container in developer tools)

Thanks! i must have messed it up when i tried to fix it, before i had something like:

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))

but i changed it because i thought maybe that was the problem…

i edited it to your recommended code!
But the problem remains… :frowning: i can move the Header, navbar and footer as much as i want but the Article and the sidebar is fixed.

This is what my css looks like now.

@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");

* {
  font-family: "Ubuntu", "sans-serif";
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100px 1fr 1fr 50px;
  gap: 20px;
}

.container .header {
  grid-column-start: 2;
  grid-column-end: 5;
  font-size: x-large;
  font-weight: bold;
  text-align: center;
  color: antiquewhite;
  background-color: black;
}

.container .navbar {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 6;
  background: #000;
  color: antiquewhite;
}

.container .main .article {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: #000;
  color: antiquewhite;
}

.container .main .sidebar {
  grid-column-start: 4;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
  background-color: #000;
  color: antiquewhite;
}

.container .footer {
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 4;
  grid-row-end: 6;
  background-color: #000;
  color: antiquewhite;
}

Only the direct children of a grid container are grid items.

The main element would need to be a grid container for the .article and .sidebar child elements to be grid items.

Thanks a lot, that did it!

if you don’t mind could you give me some more feedback/tips on my edited code?

I got my layout how I want it now, but I did a lot of guesswork with adjusting the grid-template-column/row values because I don’t really understand it yet. Sorry if I’m being a pain!

@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");

* {
  font-family: "Ubuntu", "sans-serif";
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: 150px 800px 300px 100px;
  gap: 10px;
}

.container .header {
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 1;
  font-size: x-large;
  font-weight: bold;
  text-align: center;
  color: antiquewhite;
  background-color: crimson;
}

.container .navbar {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 4;
  background-color: crimson;
  color: antiquewhite;
}

.container .article {
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 4;
  background-color: #000;
  color: antiquewhite;
}

.container .sidebar {
  grid-column-start: 6;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 4;
  background-color: crimson;
  color: antiquewhite;
}

.container .footer {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 6;
  grid-row-end: 4;
  background-color: crimson;
  color: antiquewhite;
}

Using grid-template-areas can make placing grid items a bit easier to reason about. You can also used named grid lines.


As an aside. You have wrapping div containers with class names that are the same as the semantic elements inside them. I’d suggest you get rid of the wrapping divs when possible and move the classes to the semantic elements.

For example, you have:

<div class="main">
  <main>
    <div class="article">
      <article>
        <h2>Article Heading</h2>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure,
          unde voluptates voluptatem placeat quis sequi reiciendis
          sapiente consectetur. Aut, modi.
        </p>
        <h3>article subhead</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa,
          et.
        </p>
      </article>
    </div>
    <div class="sidebar">
      <aside>
        <h2>sidebar headline</h2>
        <img src="nothing yet" alt="nothing here">
      </aside>
    </div>
  </main>
</div>

Might be:

<main class="main">
  <article class="article">
    <h2>Article Heading</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure, unde
      voluptates voluptatem placeat quis sequi reiciendis sapiente
      consectetur. Aut, modi.
    </p>
    <h3>article subhead</h3>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, et.
    </p>
  </article>
  <aside class="sidebar">
    <h2>sidebar headline</h2>
    <img src="nothing yet" alt="nothing here" />
  </aside>
</main>