javascript - 具有行详细信息的自适应网格

Question

我正在寻找一个响应式网格系统。提示是，对于单击/选中的单元格，我还需要Row Details之类的内容（“单元格详细信息”？是否可扩展？）。

例如：pr0gramm.com它非常接近我的功能。

列：


Dekstop：4
平板电脑：3
电话：2


在一行中有所有4列的情况下，我可以在所选单元格的行之后追加一个新的div。看到：
http://i.stack.imgur.com/FcbfO.png

连续4列中有3列（div中仍然有4列），im会得到以下结果：
http://i.stack.imgur.com/5raJE.png

是否有任何框架或类似的东西？还是我必须自己使用js来实现？

Answer 1

您可以使用CSS做到这一点。添加类似@media（最大宽度：768像素）之类的内容以检测屏幕尺寸，以便为不同的屏幕尺寸提供不同的CSS。

No More Table是一个很好的例子

的HTML

<div class="columns">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

的CSS

@media (max-width: 1024px){

  .columns:nth-child(3){
    display:none;
  }

}

@media (max-width: 768px){

  .columns:nth-child(3){
    display:none;
  }

  .columns:nth-child(4){
    display:none;
  }

}