使用CSS网格和flexbox可以在没有媒体查询的情况下实现响应式页面布局吗？

Question

我正在尝试使用顶部，主要部分和侧面部分来实现此布局（https://codepen.io/totkeks/pen/PowodPq）。

<div class="grid">
  <div class="top">Top</div>
  <div class="main">Main</div>
  <div class="side">Side</div>
</div>

body {
  padding: 0;
  margin: 0;
}

.grid {
  display: grid;
  grid-gap: 3rem;

  grid-template-columns: 22rem minmax(48rem, auto);
  grid-auto-rows: auto;

  padding: 3rem;
  min-height: 100vh;
  box-sizing: border-box;
  border: 2px dotted black;
}

.top, .main, .side {
  background-color: papayawhip;
}

.main {
  grid-row: span 2;
}

@media screen and (max-width: 1200px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

当页面较小时（当前在CSS查询中为<1280像素），这三个部分相互堆叠，首先是顶部，然后是主要，然后是侧面，全部覆盖了整个宽度。

当页面变宽时，顶部和侧面部分在左侧是固定大小的，而主要部分在右侧，随着可用空间的增加而增大。

[刚才，我找到了这个问与答Responsive layout without media query，尽管它朝着正确的方向发展，但这并不是我要实现的全部目标。

我已经花了两个晚上的时间提出这个想法，并想找到一个解决方案或得到一个明确的“不，用当前的CSS无法实现”。

Answer 1

您可以尝试使用auto-fill，grid-colum，grid-row，然后使用width + calc()来包装。但是您会发现从浏览器到注释器的有趣行为。 （需要自动流动）但是，mediaquerie是为这种用途而制造的，更加清洁和可靠。

body {
  padding: 0;
  margin: 0;
}

.grid {
  display: grid;
  grid-gap: 3rem;
  margin: 1em;
  border: solid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  grid-auto-rows: auto;

  padding: 3rem;
  min-height: 100vh;
  box-sizing: border-box;
}

.top,
.main,
.side {
  background-color: papayawhip;
}
.top,
.side {
  grid-column: 1;
  width: 22rem;
  min-width: 100%;
}
.main {
  grid-column: auto;
  min-width: calc(100vw - 36rem);
  grid-row: span 2;
}

<div class="grid">
  <div class="top">Top</div>
  <div class="main">Main</div>
  <div class="side">Side</div>
</div>