CSS Grid Unused space on left and right [closed] - css

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I am trying to create CSS grid components but one problem keeps poping up and for the life of me I cant find any solution.
So for a basic example:
.grid {
display: grid;
grid-gap: 1px;
background: black;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.item {
background: white;
}
<div class="grid">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
</div>
What gives the following result:
The question is:
How do you remove the side space, the black one to be the same as the grid gap?
It is a bit simplistic, but a major problem. What am i missing?
I tried margins, and puddings, all sorts of "work-around" but all of them made different problems down the way.
I feel like this had to have an answer already, but for the life of me I can't find a proper solution.

Answer 1

body {margin: 0;} works for me.
body {
margin: 0;
}
.grid {
display: grid;
grid-gap: 1px;
background: black;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.item {
background: white;
}
<div class="grid">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
</div>

Answer 2

Ok so I Figured it out. So I'm not sure whether this is a bug or I'm missing something, but the solution is to wrap the grid in to a wrapper like:
<style>
.grid-container {
border:1px solid red;
}
.grid {
display: grid;
grid-gap: 1px;
background: black;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
border:1px solid green;
}
.item {
background: white;
}
</style>
<div class="grid-container">
<div class="grid">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
</div>
</div>
The wrapper (red border) takes the available space, but the grid then fits properly, without the wrapper the grid would spread out like the wrapper but behave like it was inside the wrapper.
As i mentioned in a comment this is happening with razor components in Blazor Server Side project. Not sure if this is an exclusive problem to me, the project or technology.
P.S.
The wrapper does not need a CSS class or styling, it can be a simple tag.