CSS 网格未使用 100% 的屏幕宽度

Question

以下面的示例片段为例:

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
}

.grid-item {
    border: 1px solid #000;
    text-align: center;
}

<div class="grid-container">
    <div class="grid-item">item 1</div>
    <div class="grid-item">item 2</div>
    <div class="grid-item">item 3</div>
</div>

结果是一个表that looks like this.我的问题是我想消除表格左侧、右侧和顶部的 10 个像素间隙，以便它覆盖 100% 的宽度(基本上，我希望它从 0、0 开始)。我发现唯一可行的方法是在 .grid-container 中将边距设置为 margin: -10px -10px 0 -10px; 但这似乎是错误的的方法。

我是否遗漏了一些非常明显的东西？

Answer 1

您只需要从正文中删除默认的填充和边距。浏览器添加它们自己的默认 CSS。这就是为什么您会看到该填充:

像这样:-

body {
  padding: 0;
  margin: 0;
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
}

.grid-item {
    border: 1px solid #000;
    text-align: center;
}

    <div class="grid-container">
        <div class="grid-item">item 1</div>
        <div class="grid-item">item 2</div>
        <div class="grid-item">item 3</div>
    </div>

同时检查 Eric Meyer 的 CSS 重置以删除所有浏览器默认 CSS。

Eric Meyer's CSS reset