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开始）。我发现唯一可行的方法是在margin: -10px -10px 0 -10px;中将页边距设置为.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重置，以删除所有浏览器默认CSS。

Eric Meyer's CSS reset

Answer 2

喜欢吗？

html, body {margin:0; padding: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>

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

2 个答案: