How to CSS grid block has background color?

Question

i was using grid property to build web site. but i got a problem that i can't use background property as i expect.

#wrap {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 35px 125px;
}

.line1 {
  width: 1px;
  height: 16px;
  background: #ccc;
}

header {
  background-color: #221816;
  grid-column: 2/12;
}

header .topNav {
  color: #fff;
}

header .topNav ul {
  height: 35px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

header .topNav ul li {
  align-self: center;
  padding-right: 16px;
}

*,
 :before,
 :after {
  margin: 0;
  padding: 0;
  border: 0;
  color: #fff;
  list-style: none;
}

<div id="wrap">
  <header>
    <nav class="topNav">
      <ul>
        <li><a href="#">login</a></li><span class="line1"></span>
        <li><a href="#">signin</a></li>
        <li><a href="#">bags</a></li>
        <li>mypages<span></span></li>
        <li>customer</li>
      </ul>
    </nav>
  </header>
</div>

i expected the header's width 100%. so i put 'grid-column:1/-1;' and i got problem that contents have to be narrow. so i fix property like 'grid-column:2/12' then now i got a problem the background can't be wide. do i have solution?

I'm not sure I understand what you're trying to do. Do you want the menu items to be evenly spaced across the black background? — BobRodes
– BobRodes, Commented Dec 21, 2018 at 5:39
my point is..i have another blocks to build. they will take 2/12 area. they don't have problem with grid property cause they have white background. — itagmi
– itagmi, Commented Dec 21, 2018 at 6:18
but that element has brown background. i want them look like 1/13 area. — itagmi
– itagmi, Commented Dec 21, 2018 at 6:19
So, do what I've shown in my answer for this row, and then add another div under it for your grid, and do what works for that. — BobRodes
– BobRodes, Commented Dec 21, 2018 at 6:24
i see, so i can't use grid-box with background-color and width like that? — itagmi
– itagmi, Commented Dec 21, 2018 at 6:38

elbrant · Accepted Answer · 2018-12-21 06:00:23Z

change your header to read: header{background-color:#221816; grid-column: 1/13;}

This is why: You have 12 divisions along the width of your page, but you don't count the area by divisions, you count by the line.

Take a piece of scratch paper, draw three lines from side to side, then 13 lines top to bottom to represent your 12 columns and 2 rows of your header/navigation area. Now, the three lines across are numbered 1, 2, and 3 (one at the top, two in the middle, three at the bottom). The 13 verticle lines start with line number one, and if you count all the way across end with line number 13. So, to get your header to go from one side of the page to the other, it needs to start on line 1 and end on line 13 (1/13). Does that make sense?

BobRodes · Accepted Answer · 2018-12-21 06:24:15Z

If I understand correctly what you're trying to do, you can get what you want with a lot less effort, as I've shown below. Just do this row with flex. You don't need to use grid.

After I wrote up this answer, your subsequent comments say that you want to do something that you haven't shown us with some more rows that are different from this one. You can do things the way I've shown you for this row, and then add another div with the grid in it and do what you want with it.

If that doesn't work for you, then you'll need to further clarify what you're trying to do.

.line1 {
  width: 1px;
  height: 100%;
  background: #ccc;
}

header {
  background-color: #221816;
}

header .topNav {
  color: #fff;
}

header .topNav ul {
  height: 35px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

header .topNav ul li {
  padding: 0 2%;
  align-self: center;
}

*,
 :before,
 :after {
  margin: 0;
  padding: 0;
  color: #fff;
  list-style: none;
}

<div id="wrap">
  <header>
    <nav class="topNav">
      <ul>
        <li><a href="#">login</a></li><span class="line1"></span>
        <li><a href="#">signin</a></li>
        <li><a href="#">bags</a></li>
        <li>mypages<span></span></li>
        <li>customer</li>
      </ul>
    </nav>
  </header>
</div>

Collectives™ on Stack Overflow

How to CSS grid block has background color?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related