CODEWITHSUNDEEP
javascripthtmlcss
user12098841
user12098841

Reputation:

How do I make a div inside a grid stretch beyond the grid?

I have a container, with a 12 column grid and 30px margin on left and right of the grid system

this is the change in grid layout at 768 px, see how the blue div which occupied 8 columns is now extending beyond the 8 columns, covering the margins too.

I need help with how to do this? I cannot remove the blue div out of the grid.

I have tried setting width of blue div to 100vw and left-margin to -30px, it worked but I face weird issues in different conditions in dev tools, nevertheless I want to avoid the use of vw. please help me out.

Upvotes: 0

Views: 268

Answers (3)

Chirag S Modi
Chirag S Modi

Reputation: 419

use negative margins to your gird parent class. This margin should be same as your gutter space. like below snippet.

<div class="row">
 <div class="grid-8"></div>
 <div class="grid-4"></div>
</div>

.row{
 margin-left: -30px;
 margin-right: -30px;
}
.row > .grid-8 {
 width: 60%;
 padding:0 30px;
}
.row > .grid-4 {
 width: 40%;
 padding:0 30px;
}

Upvotes: 0

RoachOverflow
RoachOverflow

Reputation: 55

I would refrain from using negative margins as they can create new problems.

I would rather use an absolute positioning. 

.child-div {
    position:absolute;
    left:0;
    right:0;
}

Upvotes: 0

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15851

Use negative margins:

Eg:

margin-left: -30px;
margin-right: -30px;

Do not set WIDTH

Upvotes: 1

Related Questions