在 <body> 元素上设置 CSS 网格？答案

【问题标题】：Set CSS Grid on <body> element?在 <body> 元素上设置 CSS 网格？
【发布时间】：2018-06-22 15:11:02
【问题描述】：

可以在<body> 元素上声明网格吗？

我担心的是，如果您希望内容与浏览器边缘齐平，使用包装器 <div> 可能会留下一些不需要的填充/边距。

【问题讨论】：

可以，但我通常认为这不是一个好主意。其余的只需要一个像样的 CSS 重置来删除默认的填充和边距。 - stackoverflow.com/questions/30208335/…
@Paulie_D 有什么理由这通常不是一个好主意吗？
@Paulie_D 也很好奇为什么这通常不是一个好主意？

【解决方案1】：

只需将universal selector (*) 添加到您的 CSS，这会将任何规则应用于页面上的每个元素。如果任何元素需要它们，您可以为这些元素本身添加边距或填充。当您无法完全确定是什么原因时，这有助于消除间距。

  * {
        margin:0;
        padding:0;
    }

【讨论】：

使用* CSS 选择器会将在其{ } 中输入的任何规则应用于页面上的每个元素。以防 OP 不知道。

【解决方案2】：

当然，如果您正在寻求没有任何第三方 API 系统（例如 Bootstrap）的纯 CSS 解决方案，您可以使用 CSS Grids。

在您的 CSS 中：（尽管我认为它更适合 .container 而不是 body 类。

body {
  /* This defines the number of horizontal columns and how wide they all are */
  grid-template-columns: 40px 50px auto 50px 40px;
  /* This determines the number of verticle rows and their respective heights */
  grid-template-rows: 25% 100px auto;
}

要定义项目（使特定的类来保存某些网格属性：

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3
}

或者

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2
  grid-row-end: span 2
}

如果您想了解有关这套精彩规则的更多信息，请查看本指南（我从中提取了这些示例）：https://css-tricks.com/snippets/css/complete-guide-grid/

【讨论】：