How to get a grid-gap between the grid item and the container?

Question

How can I get a left-sided gap? As you can see the Box1 is sitting 'sticky' to the left side I've used grid-gap: 1em; but it only applies to top bottom and right?

/*Defining the font and pixels so we can work with em later*/
body {
    font-family: 'Poppins', sans-serif;
    font-size: 25px;
}

/*BG gradient layer + bg elements*/
.BG_gradient {
    background-image: linear-gradient(-135deg, #FEE140 0%, #FA709A 100%);
    /*Padding = 10vh top + 10vh bottom = 20vh*/
    padding: 10vh 5vh 10vh 5vh;
    /*Padding top and bottom is already 20vh combined so height left is 70vh*/
    height: 80vh;
}

/* wrapper of the content*/
.wrapper {
    /*Here we define the start of the grid*/
    display: grid;
    /*This means left colom is 1fr, middle 2fr, and right 1fr so total it's 4fr*/
    grid-template-columns: 1fr 2fr 1fr; 
    
    /*Rows = vertical so min it should be 95px atleast and max it's on auto*/
    grid-auto-rows: minmax(95px, auto);   
    grid-gap: 1em;

    /* BG visuals: */
    background: #EEF3F4;
    box-shadow: 0 0 90px 0 rgba(0,0,0,0.10);
    border-radius: 15px;
    height: 500px;
}
.header {
    grid-column: 4/4;
}
.left {
    background-color: rgba(230,45,45,0.50);
}
.middle {
    background-color: rgba(50,115,180,0.50);
}
.right {
    background-color: rgba(120,230,45,0.50);
}

<div class="BG_gradient">
  <div class="wrapper">
    <section class="header"></section>
    <section class="mainbox left">Box 1</section>
    <section class="mainbox middle">Box 2</section>
    <section class="mainbox right">Box 3</section>
  </div>
</div>

https://jsfiddle.net/ZanicL3/Ldtcqdtb/

Veratrine

Answer 1

The grid-gap property applies only between grid items. It never applies between a grid item and the grid container.

If you want a gap between the item and the container, then use padding on the container.

.wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(95px, auto);   
    grid-gap: 1em;
    padding: 1em; /* NEW */
}

https://jsfiddle.net/Ldtcqdtb/3/

Polysaccharide

Answer 2

Here's an alternative approach that allows you to apply the grid (or flex) gap to the 'outer' of the object using collapsed tracks.

This method lends itself nicely to dynamic content where the parent element may not always be the same, providing a powerful single property to set the margins/gutters.

Edit: The following example demonstrates an explicit grid, but the same method can be used for implicit grids when combined with the use of the grid-row-start/end grid-column-start/end properties.

.parent {
    display: grid;
    grid: 0 repeat(3, auto) 0 / 0 repeat(3, auto) 0;
    grid-template-areas: " . . . . . "
                         " . a b c . "
                         " . d e f . "
                         " . g h i . "
                         " . . . . . ";   
    gap: 0.5em;
    width: 100%;
    height: 100vh;
    background: #ddd;
}

.child {
    grid-area: var(--position);
    width: 100%;
    height: 100%;
    background: #fff;
}

body {
    margin: 0;
}

<div class="parent">
  <div class="child" style="--position: a;"></div>
  <div class="child" style="--position: b;"></div>
  <div class="child" style="--position: c;"></div>
  <div class="child" style="--position: d;"></div>
  <div class="child" style="--position: e;"></div>
  <div class="child" style="--position: f;"></div>
  <div class="child" style="--position: g;"></div>
  <div class="child" style="--position: h;"></div>
  <div class="child" style="--position: i;"></div>
</div>

Cannot

Answer 3

The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-column-gap: 50px;
  grid-row-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

<h1>The grid-column-gap Property</h1>

<p>Use the <em>grid-column-gap</em> property to specify the size of the gap between the columns.</p>
<p>This grid has a 50px gap between columns (and a 10px gap between rows):</p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
</div>

Flyover

That's not an answer to the question – Counterstatement

The question was requested on to add space between container and the grid item. This is possible only by using padding in between as shown the answer with demo. Kindly review – Flyover