带有顶栏、侧边栏和重复内容的 CSS 网格

Question

我很难使用 CSS 网格功能创建以下布局，我不确定是否可行：

我可以将顶部和右侧的栏放在表格中的网格之外，但是由于网格的重复部分中的列是固定宽度，我还没有找到不在它们之间留空间的方法，并且侧边栏不让它们伸展。

我尝试了很多不同的方法，但都没有奏效。我认为解决方案看起来像这样：

.my_grid {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, 300px);
}

.grid_top_bar {
    grid-row-start: 1;
    grid-row-end: 1;
    grid-column-start: 1;
    grid-column-end: -1;
}

.grid_right_side_bar {
    grid-row-start: 2;
    grid-row-end: -1;
    grid-column-start: -1;
    grid-column-end: -1;
}

.grid_item {
}

<div class="my_grid">
    <div class="grid_top_bar">...</div>
    <div class="grid_right_side_bar">...</div>
    
    <!-- repeating items -->
    <div class="grid_item">...</div>
    <div class="grid_item">...</div>
    <div class="grid_item">...</div>
    ...
</div>

...但是这当然行不通。知道是否/如何做到这一点吗？

Answer 1

对于可变数量的列，为了避免空白和响应行为，您可以使用

• width:max-content,
• 使用特定标签时的子网格
• 一个连贯的标记 (header,aside,main) 而不是中性的 div。

除了父级上的width:max-content 之外，您必须通过calc() 将min-width 设置为main 以避免空白并允许根据窗口宽度而不是单列换行：

.grid {
  display: grid;
  grid-gap: 0.5em;
}

#myGrid {
  grid-template-columns: 1fr 300px;
  grid-template-rows: auto 1fr;
  grid-auto-flow: dense;
  width: max-content;
  margin: auto;
}

main {
  grid-template-columns: repeat(auto-fit, 300px);
  min-width: calc( (100vw - 400px) / 1.35);  /* make it smaller than window's removing average 400px fom aside and gaps to start width then divide (1.x) or multiplicate (0.x) to adjust */
}

header {
  grid-column: 1/3;
}

aside {
  grid-column: 2;
}

.grid> :not(.grid) {
  border: solid rgb(0, 112, 202);
  padding: 0.5em;
  background: linear-gradient(40deg, rgb(9, 164, 233), transparent, rgb(9, 164, 233), rgb(9, 164, 233), transparent), linear-gradient(-40deg, rgb(9, 164, 233), transparent, rgb(9, 164, 233), rgb(9, 164, 233), transparent) rgb(144, 215, 245);
  background-size: 8px 15px, 6px 12px
}

<div class="grid" id="myGrid">
  <header>Play me in full page mode and resize window's width to check on my behavior</header>
  <aside>...</aside>
  <main class="grid">
    <!-- repeating items -->
    <div class="grid_item">...</div>
    <div class="grid_item">...</div>
    <div class="grid_item">...</div>
    <div class="grid_item">...</div>
    <div class="grid_item">...</div>
    <div class="grid_item">...</div>
    <div class="grid_item">...</div>
    <div class="grid_item">...</div>
    <div class="grid_item">...</div>
    <div class="grid_item">...</div>
    <div class="grid_item">...</div>
    <div class="grid_item">...</div>
  </main>

</div>

codepen to play with