How to Get a Grid-Gap Between the Grid Item and the Container

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

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/

Is there a way to stretch a grid item over the grid gap?

According to the MDN docs :

In terms of grid sizing, gaps act as if they were a regular grid track however nothing can be placed into the gap. The gap acts as if the grid line at that location has gained extra size, so any grid item placed after that line begins at the end of the gap.

Therefore you have to overlap your content above that gap with margin-right: -20px

.container {
  background: green;
  display: grid;
  height: 200px;
  grid-template-columns: repeat(21, 1fr);
  gap: 20px;
  width: 100%;
}

.container .child {
  grid-column: 1/ 4;
  background: orange;
  margin-right: -20px;
}

<div class="container">
  <div class="child" />
</div>

CSS Grid: Grid-gap causing items to overflow?

Update the code like below (related question to understand the first code adjustment: Why does minmax(0, 1fr) work for long elements while 1fr doesn't?)

* {
  margin: 0;
}

.container {
  display: flex;
  justify-content: center;
  background-color: firebrick;
}

.form {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  margin: 2rem;
  width: 25rem;
  background-color: white;
}
.content {
  border: 1px solid red;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* here */
  grid-gap: 4rem;
}

/* here */
input {
  max-width: 100%;
  box-sizing: border-box;
}

<div class="container">
  <form class="form">
    <div class="content">
      <div class="field">
        <label for="title" class="label">Title</label>
        <input type="text" placeholder="Job Title" id="title" class="input">
        <i class="icon icon--success"></i>
        <i class="icon icon--fail">
        </i>
        <small class="error-msg"></small>
      </div>
      <div class="field">
        <label for="company" class="label">Company</label>
        <select name="company" id="company" class="input">
            <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="location" class="label">Location</label>
        <select name="location" id="location" class="input">
            <!-- options added in js -->
        </select>                        
        <i class="icon"></i>
        <i class="icon"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="wage" class="label">Wage</label>
        <input type="text" placeholder="Wage" id="wage" class="input">
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="type" class="new-job__label">Type</label>
        <select name="type" id="type" class="input">
          <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="position" class="label">Position</label>
        <select name="position" id="position" class="input">
          <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="pqe" class="label">PQE</label>
        <select name="pqe" id="pqe" class="input">
            <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="featured" class="label">Featured</label>
        <select name="featured" id="featured" class="input">
          <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>
    </div>
    <button class="new-job__submit">Submit</button>

  </form>
</div>

Grid space-between leaving a gap on the right when several rows

Is this your desired result? It has no gaps now. Minmax() setted to img width.

.Countries {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(256px, 256px));
  justify-content: center;

}

<div class ="Countries">

      <div class="Country"> 
        <img src="https://i.stack.imgur.com/3V9SV.gif?s=256&g=1">
          <div class="country-desc">
            <p>...</p>
          </div>
      </div>
        <div class="Country"> 
        <img src="https://i.stack.imgur.com/3V9SV.gif?s=256&g=1">
          <div class="country-desc">
            <p>...</p>
          </div>
      </div>
        <div class="Country"> 
        <img src="https://i.stack.imgur.com/3V9SV.gif?s=256&g=1">
          <div class="country-desc">
            <p>...</p>
          </div>
      </div>

      <div class="Country"> 
        <img src="https://i.stack.imgur.com/3V9SV.gif?s=256&g=1">
          <div class="country-desc">
            <p>...</p>
          </div>
      </div>

      <div class="Country"> 
        <img src="https://i.stack.imgur.com/3V9SV.gif?s=256&g=1">
          <div class="country-desc">
            <p>...</p>
          </div>
      </div>

      <div class="Country"> 
        <img src="https://i.stack.imgur.com/3V9SV.gif?s=256&g=1">
          <div class="country-desc">
            <p>...</p>
          </div>
      </div>
   </div>

Proper way to set margin between MUI grid items

To achieve a result like the image, I would suggest to give the background-color in the div inside the Grid item and use the padding for making it to have some white area on the right (if you don't want to use the spacing as it gives space around the Grid item)

  <Grid 
  container sx={{ width: 800, border: 1 }} m={2} 
  // spacing={2} decide if you want extra spacing or not
  >
    <Grid item xs={4}>
      <div style={{ marginRight: "40px", backgroundColor: "yellow" }}>
        Box 1
      </div>
    </Grid>
    <Grid item xs={4}>
      <div style={{ marginRight: "40px", backgroundColor: "lightblue" }}>
        Box 2
      </div>
    </Grid>
    <Grid item xs={4}>
      <div style={{ marginRight: "40px", backgroundColor: "limegreen" }}>
        Box 3
      </div>
    </Grid>
  </Grid>

Here is a codesandbox

CSS Grid make the column gap identical

Flexbox now offers a gap property. We could use that along with multiple rows of content to make it work.

You should use flexbox for the flexible-sizing. It is because grid is meant to be table-like. And it does not really want to have you mess around with the spaces too much. It is always aligned to some raster.

It should work accross all major browsers (see: https://caniuse.com/?search=gap) but you could always fallback to using paddings instead or space the items evenly and make the rows wide enough so that the available space is equal to the n * n_size + (n-1) * gap.

#container {
  border: 1px dashed black;
  /* just for visuals */
  display: flex;
  align-items: center;
  justify-content: center;
}

#innerContainer {
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
}

.row {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.item {
  width: 90px;
  height: 90px;
  background-color: blue;
}

<div id="container">
  <div id="innerContainer">
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
</div>

How to remove grid gap / padding?

You have 20px padding on the left item but not on the right item.

The padding is not being counted in the height of the left item because the default setting for box-sizing will be being used.

You can make that padding be included in the dimensions of the item by setting box-sizing: border-box;

This snippet also sets the margins of all elements to 0 initially so as to remove the small (normally 8px) margins around the body.

* {
  margin: 0;
}

body {
  width: 100%;
  height: 100vh;
  background-color: #5FAAD9;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 0;
  gap: 0;
}

#Record {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
}

#List {
  width: 100%;
  height: 100vh;
  background-color: white;
}

<body>
  <div id="Record"></div>
  <div id="List"></div>
</body>

---

Related Topics