Search code examples
csscss-grid

How to remove grid gap / padding?

I want to divide body into 2 parts without any padding or gap. But when I divide body by grid.

It shows me some gap even if I set grid-gap as 0. It should show left as whole blue and right as whole white.

How to remove those gaps?

enter image description here

enter image description here

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

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

  • 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>