CSS 网格背景仅在单元格中与其他单元格重叠

Question

我正在尝试使用 CSS 网格布局以下结构，但对实现它的最佳方法感到困惑：

我只是想知道是否有人有建议或一些示例代码以及在 CSS 网格上实现此目的的最佳方法：

• 主要区域的背景图片
• 左侧是菜单，右侧是标题和缩略图。

感谢您对此的任何帮助。

Answer 1

您可以为此目的创建一个

grid

布局。 您实际上有 3 列、5 行和 3 个元素

menu

、

header

、

thumbnails

。因此，只需将元素放置在

grid

布局中即可。

下面是示例代码。

* {
  padding: 0;
  margin: 0;
  border: 1px dashed red;
}

html,
body {
  height: 100%;
}

.container {
  height: 100%;
  background-color: lightgoldenrodyellow;

  display: grid;
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 30px;
}

.menu {
  background-color: pink;
}

.header {
  background-color: yellow;
  grid-column: 3;
  grid-row: 2;

}

.thumbnail {
  background-color: lime;
  grid-column: 3;
  grid-row: 4;
}

<div class="container">
  <div class="menu">Menu</div>
  <div class="header">Header</div>
  <div class="thumbnail">Thumbnail</div>
</div>