CSS Grid 不使用屏幕宽度的 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>

结果是一个看起来像这样的表。我的问题是我想消除表格左侧、右侧和顶部的 10 个像素间隙，使其覆盖 100% 的宽度（基本上，我希望它从 0, 0 开始）。我发现唯一有效的是将边距设置为margin: -10px -10px 0 -10px;in.grid-container但这似乎是错误的处理方式。

我在这里错过了一些非常明显的东西吗？

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 reset 以删除所有浏览器默认 CSS。

Eric Meyer 的 CSS 重置