CODEWITHSUNDEEP
cssgrid
itagmi
itagmi

Reputation: 55

How to CSS grid block has background color?

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?

Upvotes: 0

Views: 481

Answers (2)

BobRodes
BobRodes

Reputation: 6165

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>

Upvotes: 0

elbrant
elbrant

Reputation: 791

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?

Upvotes: 1

Related Questions