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);
}


  
    
    Box 1
    Box 2
    Box 3

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

user_3597276 · Answer

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/

user_13757601 · Answer

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;
}

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

2 Answers