Css-Grid: Bleed Background Outside Container

Css-grid: Bleed background outside container

if it's only about background and coloration you can use pseudo element to have the overflow effect:

body {

 overflow-x:hidden;

}

.container {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  grid-template-rows: 56px minmax(56px, auto) 56px;

  max-width: 300px;

  margin: auto;

}

header {

  background-color: grey;

  grid-column: 1 / span 3;

  grid-row: 1 / 2;

  position:relative;

}

header:before,

footer:before{

  content:"";

  z-index:-1;

  position:absolute;

  top:0;

  bottom:0;

  left:-100vw;

  right:-100vw;

  background:inherit;

}

main {

  background-color: #2E64FE;

  grid-column: 1 / span 2;

  grid-row: 2 / 3;

}

aside {

  background-color: #FF0040;

  grid-column: 3 / span 1;

  grid-row: 2 / 3;

}

footer {

  background-color: grey;

  grid-column: 1 / span 3;

  grid-row: 3 / 4;

  position:relative;

}

header, main, aside, footer {

  line-height: 56px;

  text-align: center;

  vertical-align: middle;

}

<html>

  <body>

    <div class='container'>

      <header>Header</header>

      <main>Main</main>

      <aside>Sidebar</aside>

      <footer>Footer </footer>

    </div>

  </body>

</html>

Is it possible to change the background color of what's outside of a grid-container start/end without changing its parent?

You can easily achieve this using the box-shadow property

.selection {
  box-shadow: -20rem 0 red, 40rem 0 red;
}

increment or decrement the rem size as you see fit

CSS: Make an image to bleed outside parent container

You can float the image. Floating an image takes it out of the normal content flow, which means it won't take up space the way it normally does, but text and other inline elements will "notice" it and wrap around it.

.underline > img {
    float: right;
    position: relative;
    top: -20px;
}

jsFiddle: http://jsfiddle.net/kgpLomct/

Or you can use absolute positioning. An absolute positioned item is completely removed from the document flow, text and other elements will act like it isn't there, and will position itself according to the nearest positioned ancestor element.

.section h5.underline {
    /* ... */
    /* make sure this is set! */
    position: relative;
}
.underline > img {
    position: absolute;
    top: -10px;
    right: 10px;
}

jsFiddle: http://jsfiddle.net/kgpLomct/1

Make one grid column div full bleed touch left / right edges of viewport in CSS Grid

You should use also the full bleed trick on selected item.

width: 100vw;
margin-left: calc(50% - 50vw);

_{Related: How can I make the image full bleed but pad the content}

*,
*::after {
  box-sizing: border-box;
}

.slider {
  position: relative;
  margin: 0;
  padding: 0 4%;
}

.search-results-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, 15vw);
  grid-template-rows: auto;
  grid-row-gap: 40px;
}

.slider-item {
  box-sizing: border-box;
  z-index: 1;
  display: inline-block;
  position: relative;
  white-space: normal;
  vertical-align: top;
  padding: 0 2px;
  background-color: red;
}

.selected-item {
  grid-column: span 6 / auto;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: block;
  position: relative;
  height: 37vw;
  margin-top: 2px;
  padding: 0;
  background-color: #000;
}

<div class="slider">
  <div class="sliderMask">
    <div class="search-results-content">

      <div class="slider-item"></div>

      <div class="slider-item"></div>
      <div class="slider-item"></div>
      <div class="slider-item"></div>
      <div class="slider-item"></div>
      <div class="slider-item"></div>

      <div class="selected-item"></div>

      <div class="slider-item"></div>
      <div class="slider-item"></div>
      <div class="slider-item"></div>
      <div class="slider-item"></div>
      <div class="slider-item"></div>
      <div class="slider-item"></div>

    </div>
  </div>
</div>

Extending Navbar BG color outside of container

I propose a solution using pseudo-classes :before and :after for class .container-nav. Do the following:

Add position: relative; to .container-nav.

And add these pseudo-classes with absolute positioning to your css.

html,
body {
    background-color: #ededed;
    margin: auto;
}

ul {
    list-style-type: none;
    margin: 0;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 0px;
    padding-right: 0px;
    overflow: hidden;
    background-color: yellow;
}

li {
    float: left;
}

li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border-radius: 5px;
}

li a:hover:not(.active) {
    background-color: white;
}

.active {
    background-color: white;
}

.container-main {
    display: grid;
    padding-top: 50px;
    margin-left: auto;
    margin-right: auto;
    max-width: 650px;
}

.container-main > div {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid black;
    text-align: center;
    font-size: 30px;
}

.container-nav {
    display: grid;
    margin-left: auto;
    margin-right: auto;
    max-width: 650px;
    position: relative; /*add this it*/
}

/*add this it************/

.container-nav:before {
    content: "";
    position: absolute;
    left: -100%;
    bottom: 0;
    top: 0;
    right: 100%;
    background-color: yellow;
}

.container-nav:after {
    content: "";
    position: absolute;
    left: 100%;
    bottom: 0;
    top: 0;
    right: -100%;
    background-color: yellow;
}

<body>
    <div class="container-nav">
        <ul>
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </div>

    <div class="container-main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

Enable bootstrap column backgrounds to bleed to edge of viewport

You can use :before elements and some classes

https://jsfiddle.net/ex3ntia/wa8myL9v/2/

.bg:before {position:absolute;left:0em; content:'';height:100%;width:800em;z-index:-1}

UPDATE

added media query for small devices
https://jsfiddle.net/ex3ntia/wa8myL9v/3/

UPDATE 2

I have added the following line to fix the big horizontal scroll on chrome browsers.

body, html {overflow-x: hidden;margin: 0;padding: 0;}

CSS grid issue: I can't make the outer grid container fill the entire page

If you are using create-react-app then remove the css that come along with create-react-app.

Else try

.container {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 40px auto 40px;
  grid-template-areas: ". h h h h h h h h h h h" "m c c c c c c c c c e e" "f f f f f f f f f f f f";
}

Css Grid media query element pushed outside

Leaving leftbar and rightbar out of your grid-template-areas won't remove those elements from the DOM, it will just take them out of the grid. Your left-bar is actually directly behind your right-bar when your media query is active (which is why you can't see it).

You'll also want to set display: none on them:

.left-bar, .rigth-bar{
  display: none;
}

Here's an example snippet from your code pen:

.container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-template-areas: "leftbar header header header rightbar" "leftbar midle midle midle rightbar" "leftbar midle midle midle rightbar" "leftbar midle midle midle rightbar" "leftbar midle midle midle rightbar" "leftbar midle midle midle rightbar" "footer footer footer footer footer";
  height: 400px;
}

.box {
  border: 1px solid black;
  width: 100%;
  height: 100%;
  text-align: center;
}

.rigth-bar {
  grid-area: rightbar;
}

.left-bar {
  grid-area: leftbar;
}

.header {
  grid-area: header;
}

.main {
  grid-area: midle;
}

.bottom {
  grid-area: footer;
}

.red_box {
  background-color: red;
}

.orange_box {
  background-color: orange;
}

.blue_box {
  background-color: blue;
}

.green_box {
  background-color: green;
}

.coral_box {
  border: 1px solid black;
  background-color: coral;
  width: 100%;
  height: 100%;
  text-align: center;
}

@media (max-width:1000px) {
  .container {
    grid-template-areas: "header header header" "midle midle midle" "midle midle midle" "midle midle midle" "midle midle midle" "midle midle midle" "footer footer footer";
  }
  .left-bar,
  .rigth-bar {
    display: none;
  }
}

<div class="container">
  <div class="red_box left-bar box">
    <h2>On left</h2>
  </div>
  <div class="green_box header box">Heade</div>
  <div class="orange_box rigth-bar box">
    <h2>On right</h2>
  </div>
  <div class="coral_box main box">Main</div>
  <div class="blue_box bottom box">
    <h2>Footer</h2>
  </div>
</div>

Extend background-color of header beyond container with css

You can use the :before pseudo element with absolute positioning and negative z-index to extend the background color of a contained div the entire way to the edge of the page.

#container {

    width: 100px;

    margin: 0 auto;

    background-color: #FFFFCC;

}

.stripe {

    background-color:#CCFFFF;

    height: 100px;

    position: relative;

}

.stripe:before {

    content:"";

    background-color:#CCFFFF;

    position: absolute;

    height: 100%;

    width: 4000px;

    left: -2000px;

    z-index: -1;

}

<div id="container">

  <div>one</div>

  <div class="stripe">two</div>

  <div>three</div>

</div>

Css-Grid: Bleed Background Outside Container