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

Question

<div class="slider">
    <div class="sliderMask">
        <div class="search-results-content">
            
            <div class="slider-item"></div>
                
            ...* 5 more divs of class="slider-item" * ...

            <div class="selected-item"></div>
            
            <div class="slider-item"></div>    
            
            ...* 5 more divs of class="slider-item" * ...
        
        </div>
    </div>
</div>

*, *::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;
}

.selected-item{
    grid-column: span 6 / auto;
    display: block;
    position: relative;
    height: 37vw;
    margin-top: 2px;
    padding: 0;
    background-color: #000;
}

There is a css grid called search-results-content which has six (6) columns per row (grid-template-columns: repeat(auto-fill, 15vw);)

There is also a grid item div called selected-item which spans 6 columns so it occupies a full row in the grid (grid-column: span 6 / auto;)

however, the selected-item div does not bleed or stretch to left and right edges of the viewport because the css grid has padding from two parents up ( class="slider")

how do you make it work?

Relevant threads Enable bootstrap column backgrounds to bleed to edge of viewport and Insert full width block inside grid layout

Answer 1

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>