Problem positioning box item inside a CSS Grid

Question

I'm learning HTML & CSS and right now I'm studying about CSS Grid.

I think I'm understanding how CSS Grid works and I've been trying to write a website with a box item positioned in a specific place inside a grid.

I took a screenshot and painted a square on where I'm trying to position container-box item. I've been trying to position it with grid-column and grid-row with now avail.

(That solid black rectangle should be looking at that container-box paint drawing)

Here's my code:

body {
  background: #aaa;
}

html,
body,
.header-bar {
  height: 100%;
  margin: 0;
}

.header-grid {
  display: grid;
  grid-template: 100px / 1fr 1fr 1fr;
}

.header-bar {
  grid-column: 1/4;
  background: #ccc;
  margin-bottom:
}

.menu-items ul {
  margin: 0;
  padding: 0;
}

.menu-items li {
  list-style: none;
  float: left;
  margin-right: 10px;
  background-color: #aaa;
  position: relative;
  line-height: 60px;
}

.menu-items {
  grid-row: 1/2;
  grid-column: 1/2;
  float: left;
  margin-left: 20px;
  margin-top: 18px;
}

.img {
  height: 70px;
  width: 90px;
  float: left;
  margin-left: 100px;
  margin-top: 10px;
}

.container-box {
  background: #000;
  width: 18em;
  grid-column: 3/4;
  grid-row: ;
}


/*float clearfix */

.list-items:after {
  content: "";
  display: table;
  clear: both;
}

.header-bar:after {
  content: "";
  display: table;
  clear: both;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="header-grid">
    <header class="header-bar">
      <img src="img/shop.png" class="img">
      <nav class="menu-items">
        <ul class="list-items">
          <li>Categories</li>
          <li>Gifts</li>
          <li>Giveaways</li>
          <li>Exclusive</li>
        </ul>
      </nav>
    </header>
  </div>
  <div class="container-box">
    test
  </div>
</body>

</html>

Also, if you pick a semantic mistake please let me know.

score 0 · Answer 1 · answered Jan 24 '19 at 16:44

0

Right now your header is using grid, but the rest of your layout is not.

Similar to how you have display: grid; set on an element around your header, you will want to create some container element around your container-box div with display: grid; on it.

This way the grid item (container-box) can use the grid-column & grid-row properties you have set. Just make sure to set a value to grid-row as well, right now it is empty.

answered Jan 24 '19 at 16:44

jordanmannfeld

101
6

Thank you so much. I've been fiddling so many times with this code that I didn't notice that my grid wasn't in the same box as contianer-box. Excuse me for this! Thank you so much for taking your time looking at my code and helping me out! – Jorge Gill Jan 24 '19 at 17:22
No problem! Glad that helped! – jordanmannfeld Jan 24 '19 at 18:06

score 0 · Accepted Answer · answered Jan 24 '19 at 17:20

Good on you for trying to learn these things on your own! So couple things: - You left some css styles blank. Be carful not to do that since that can act unpredictably in some browsers. margin-bottom in '.header-bar' for example

When dealing with flexbox or grid the only elements that will be effected will be its direct children. So in the case of '.header-grid' the only child is '.header-bar' so making it a grid is redundant.
Going back to the last point might suggest why things aren't working for you. '.container-box', which is the one you want placed in that spot, doesn't have a parent element thats a grid so grid won't effect it. How you fix this depends on what your plan going forward is. You could simply add some margin to the left and top. About 200px and 100px respectively. You could also do something kind of like this Codepen . Those are both kind of dirty ways of getting what you want. A more proper way would require a reworking of how this is all put together. Utilize containers and steer clear of floats. Instead use flexbox. Doing it that way actually doesn't even require much grid. Heres one of many possible ways this could be cleaned up Codepen. Going forward you'll want to stay away from floats in general. Flexbox and grid allow you to do similar things in a much cleaner and more stable way while also offering more flexibility. Good luck and feel free to follow up if any of this confuses you.

Man, thanks for taking your time to write that code. Grid confuses me a lot but your explanation is clear as water. Amazes me how CSS Grid is so useful! Before I learned about it, CSS seemed so hard and plain unpractical. I'm gonna gonna slowly but steadily stop using floats, it's just a pain in my buttocks! — Jorge Gill, Jan 24 '19 at 17:41
no problem my friend! If you want a pretty gentle intro to grid heres a really good talk. https://www.youtube.com/watch?v=txZq7Laz7_4&t=16s . Also check out this article on grid https://css-tricks.com/snippets/css/complete-guide-grid/ . and this article on flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — TaterOfTots, Jan 24 '19 at 17:43

Problem positioning box item inside a CSS Grid

2 Answers2