动态调整网格单元格的大小答案

【问题标题】：Dynamically resizing grid cells动态调整网格单元格的大小
【发布时间】：2013-12-05 17:38:18
【问题描述】：

我正在尝试创建一个两行三列的网格布局：

这很简单。我想知道如何扩展任何一个给定的单元格，导致其他单元格在扩展的单元格周围重新排列：

我不一定要寻找纯 CSS 解决方案。我有它的工作，但我根据我正在扩展的单元格硬编码绝对位置，这感觉很脏：/谢谢！

【问题讨论】：

展开的方块总是在左上角吗？还是取决于正方形在展开之前的位置（右上角展开会使大正方形位于右上角）？如果依赖于后者，扩大中间的正方形会发生什么？
好问题：位置取决于展开的单元格。如果中间的单元格被扩展，我可以选择左或右，这并不重要。

标签： javascript html css grid responsive-design

【解决方案1】：

您可以使用像树状图这样的装箱解决方案。您可以对矩形进行排序并创建一棵树并沿 2 轴拆分树。选择下一个项目并将其放在最佳的可用空间中。然后重新启动该过程。有一个 jquery treemap 插件。这是一个示例，但打包了光照贴图。这是一个伪代码：http://www.blackpawn.com/texts/lightmaps/。

【讨论】：

感谢您在此场景中使用术语“树图”。我现在会调查一下。

【解决方案2】：

如果你总是有一个 3x2 的网格，我看不出硬编码部分的危害。

这是一个使用 CSS 的解决方案，如果它们是行中的中间或最后一个磁贴，则只需稍微移动磁贴。 http://jsfiddle.net/m2pWL/1/ 您只需单击方块即可将它们变大。

注意#wrapper 需要有这个公式的宽度

(3 * [width of small square]) + 6

这是因为边框也占用了 1 个像素。

【讨论】：