按行和列灵活调整单元格大小的HTML/CSS/JavaScript方法

Question

-----------------------    -----------------------    -----------------------    -----------------------
| 1 |        2        |    | 1 |                 |    | 1 |        2        |    |                     |
-----------------------    -----                 |    -----------------------    |                     |
|   |                 |    |   |                 |    |                     |    |                     |
| 3 |        4        |    | 3 |        4        |    |          4          |    |          4          |
|   |                 |    |   |                 |    |                     |    |                     |
-----------------------    -----                 |    -----------------------    |                     |
| 5 |        6        |    | 5 |                 |    | 5 |        6        |    |                     |
-----------------------    -----------------------    -----------------------    -----------------------

这是我的网页布局的四张粗略图画。最左边的图形显示了所有数据单元格。它有3行和2列。

顶行是页眉，中间行是内容，底行是页脚。

左栏是带有三个控件块的侧边栏，右栏是content +页眉和页脚的一部分。

我想隐藏整个页眉和/或页脚(第二张图)，但我也希望能够只隐藏侧栏列的中间行(第三张图)。在这两种情况下，我都希望剩余的内容填充开放空间，就像在flex容器中一样。我也想隐藏除内容(第四张图)以外的所有内容，但一旦我解决了其他两个布局，这并不困难。

我将使用javascript在这些配置之间切换。

那么这里最好的方法是什么呢？在我看来，我可以使用CSS网格和网格区域来实现，也可以使用HTML表和rowspan/colspan来实现。我也可以用我现有的flex布局和元素的绝对或相对位置来做到这一点。这些方法都不像我希望的那样是自动的，除非我遗漏了什么。我希望CSS网格能有一种同时自动填充行和列的方法，但它似乎使用了"tracks“，并将自己定位为行或列，而不是两者。

Answer 1

首先-你不能在css-grid中做L形区域，只允许矩形区域(在MDN上阅读更多)。

因此，(据我所知)不可能只用css-grid在你的第二个和第三个布局之间创建一些东西(例如，你不能同时隐藏3和2，同时让4占用它们的空间)。

Second - css-grid设计用于调整大小和定位，而不是隐藏项目。在下面的解决方案中，我在不需要的项目上使用了display: none;。

记住这一点--有几种方法可以让你做到这一点：

grid-template-areas解决方案

​

* {
  box-sizing: border-box;
}
body {
  --gap-size: 1rem;
  font-size: 1.5rem;
  margin: 0;
  padding: var(--gap-size);
  background-color: #fbb;
}
.container {
  /* Grid consts */
  --header-height: 50px;
  --footer-height: 50px;
  --sidebar-width: 100px;
  
  height: 300px;
  grid-gap: var(--gap-size);
  border: 2px solid #555;
  padding: var(--gap-size);
  background: #ddd;
  
  /* Grid layout */
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--header-height) 1fr var(--footer-height);
}
.container:not(:last-child) {
  margin-bottom: var(--gap-size);
}
.item {
  border: 2px solid #555;
  padding: var(--gap-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

/* Grid-areas */
.item-1 {
  grid-area: item-1;
}
.item-2 {
  grid-area: item-2;
}
.item-3 {
  grid-area: item-3;
}
.item-4 {
  grid-area: item-4;
}
.item-5 {
  grid-area: item-5;
}
.item-6 {
  grid-area: item-6;
}

/* Grid-templates */
.grid-1 {
  grid-template-areas: 
    'item-1 item-2'
    'item-3 item-4'
    'item-5 item-6'
  ;
}
.grid-2 {
  grid-template-areas: 
    'item-1 item-4'
    'item-3 item-4'
    'item-5 item-4'
  ;
}
.grid-3 {
  grid-template-areas: 
    'item-1 item-2'
    'item-4 item-4'
    'item-5 item-6'
  ;
}
.grid-4 {
  grid-template-areas: 
    'item-4 item-4'
    'item-4 item-4'
    'item-4 item-4'
  ;
}

/* Hiding items */
.grid-2 .item-2,
.grid-2 .item-6 {
  display: none;
}
.grid-3 .item-3 {
  display: none;
}
.grid-4 .item-1,
.grid-4 .item-2,
.grid-4 .item-3,
.grid-4 .item-5,
.grid-4 .item-6 {
  display: none;
}

<div class="container grid-1">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
</div>

<div class="container grid-2">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
</div>

<div class="container grid-3">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
</div>

<div class="container grid-4">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
</div>

​

grid-column / grid-row解决方案

​

* {
  box-sizing: border-box;
}
body {
  --gap-size: 1rem;
  font-size: 1.5rem;
  margin: 0;
  padding: var(--gap-size);
  background-color: #fbb;
}
.container {
  /* Grid consts */
  --header-height: 50px;
  --footer-height: 50px;
  --sidebar-width: 100px;
  
  height: 300px;
  grid-gap: var(--gap-size);
  border: 2px solid #555;
  padding: var(--gap-size);
  background: #ddd;
  
  /* Grid layout */
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--header-height) 1fr var(--footer-height);
}
.container:not(:last-child) {
  margin-bottom: var(--gap-size);
}
.item {
  border: 2px solid #555;
  padding: var(--gap-size);
  background: #fff;
  
  /* Centering content */
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-2 .item-4 {
  grid-row: 1 / -1;
  grid-column: 2;
}
.grid-3 .item-4 {
  grid-row: 2;
  grid-column: 1 / -1;
}
.grid-4 .item-4 {
  grid-row: 1 / -1;
  grid-column: 1 / -1;
}

/* Hiding items */
.grid-2 .item-2,
.grid-2 .item-6 {
  display: none;
}
.grid-3 .item-3 {
  display: none;
}
.grid-4 .item-1,
.grid-4 .item-2,
.grid-4 .item-3,
.grid-4 .item-5,
.grid-4 .item-6 {
  display: none;
}

<div class="container grid-1">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
</div>

<div class="container grid-2">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
</div>

<div class="container grid-3">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
</div>

<div class="container grid-4">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
</div>

​

Answer 2

所以，我意识到这听起来像是一个老派的前端家伙(并不完全是真的)，但我认为在这种情况下，浮动实际上给了你更多的灵活性。使用flex，您需要对每一行或每列进行换行，因此您有一个结构，其中项目1-6并不都是siblings...they，或者分组在两个(如果行)中。

<div class="row1">
  <div class="item1"></div>
  <div class="item2"></div>
</div>

或三个(如果是列)：

<div class="column1">
  <div class="item1"></div>
  <div class="item3"></div>
  <div class="item5"></div>
</div>

使用网格，所有内容都可以是兄弟级的，但你必须非常明确地定义所有内容，并且对每个布局都这样做variation...which不一定是不好的，但是如果你的内容不是故意非常统一的，你就会在溢出等方面陷入麻烦。

@fen1x已经很好地演示了网格如何做到这一点，所以我不会尝试重新创建它。

So...floats -不管你喜欢还是讨厌它们，它们实际上很好地处理了这个用例，再加上一些定位(使用flexbox你也需要定位，但实际上在那种情况下会更复杂)。

https://codepen.io/ryantdecker/pen/vYYwYKL

如果没有其他问题，它至少让代码保持了相当不错的minimal...just食粮。

Answer 3

我稍微改变了我的作用域，并使用CSS Grid找到了一个解决方案。下面是一个代码：https://codepen.io/sidewayss/pen/gObOzxr

范围的变化是现在有3个按钮，每个区域一个:页眉、侧边栏和页脚。页眉和页脚现在独立隐藏。

我的解决方案是使用一个由4个元素组成的数字数组来设置媒体窗格的grid-area样式(在我的原始绘图中是#4)。在javascript的其他地方，我已经以类似的方式处理了SVG viewBox属性。因为网格区域一次只扩展/收缩一行/列，所以我可以递增/递减该数字数组中的相应值。

一旦设置好基础设施，分配就很简单了：

isHide == isFooter ? ++area[index] : --area[index];
element.style.gridArea = area.join("/");

我碰巧已经有了很多相关的基础设施，所以这个解决方案对我来说是有意义的。我的项目代码的文字比代码少:)

下一个问题是当所有窗格都隐藏时显示窗格的UI，尽管这在这里应该是一个单独的问题。在真正的网页(不是代码)中，按钮在导航栏中，导航栏也可以隐藏。是否应该有半透明的浮动按钮来恢复它们？触摸屏与鼠标的对比如何？是否应该有一种方法来悬停并看到它们？