Newbie needs help with grid positioning

absolutelyfedup · October 28, 2022, 5:45pm

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!

alanhassan · October 28, 2022, 6:06pm

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.

alanhassan · October 28, 2022, 6:27pm

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

hbar1st · October 28, 2022, 7:17pm

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 (').

absolutelyfedup · October 28, 2022, 7:28pm

Thank you very much, i appreciate it!

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

hbar1st · October 28, 2022, 7:32pm

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)

absolutelyfedup · October 28, 2022, 8:08pm

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… i can move the Header, navbar and footer as much as i want but the Article and the sidebar is fixed.

absolutelyfedup · October 28, 2022, 8:16pm

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;
}

lasjorg · October 28, 2022, 8:29pm

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.

absolutelyfedup · October 28, 2022, 10:30pm

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;
}

lasjorg · October 29, 2022, 7:00pm

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>

system · April 30, 2023, 7:00am

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Landing Page - Grid & Flexbox issues	3	483	June 1, 2021
Flexbox Help Please! HTML-CSS	9	683	March 9, 2021
Needing help in positioning CSS HTML-CSS	1	17	October 19, 2024
Trying to rearrange boxes/divs HTML-CSS	5	214	February 3, 2024
Struggling to structure my page with Grid/Flexbox HTML-CSS	5	576	March 9, 2021

Newbie needs help with grid positioning

Related topics