在<body>元素上设置CSS网格布局？

Question

在<body>元素上设置CSS网格布局？

htmlcsscss-grid

3

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

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

- Stephen Selvey

1

你可以这样做，但我通常觉得这不是一个好主意。其余的只需要一个合适的CSS重置来去除默认的内边距和外边距。- https://dev59.com/N10a5IYBdhLWcg3wipNA - undefined

1

@Paulie_D 有什么原因一般来说不是个好主意吗？ - undefined

1

@Paulie_D 也好奇为什么这通常不是一个好主意？ - undefined

2个回答

2

当然，如果您想寻求纯CSS解决方案而不使用任何第三方API系统（如Bootstrap），您可以使用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/。

- Jake

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Scath · Accepted Answer

只需在 CSS 中添加通用选择器 (*)，就可以将任何规则应用于页面上的所有元素。如果某些元素需要它们，则可以向这些元素本身添加边距或填充。当您无法确定间距的原因时，这有助于消除间距。

  * {
        margin:0;
        padding:0;
    }