javascript - 具有行详细信息的响应式网格

Question

我正在寻找响应式网格系统。线索是，我还需要Row Details单击/选定单元格（单元格详细信息？可扩展？）之类的东西。

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

列：

• 桌面：4
• 平板电脑：3
• 电话：2

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

一行中有 4 列中的 3 列（div 中仍然有 4 列）我得到了这个结果：http: //i.stack.imgur.com/5raJE.png

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

Answer 1

你可以用 CSS 做到这一点。添加类似@media (max-width: 768px)的内容来检测屏幕尺寸，从而为不同的屏幕尺寸提供不同的 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;
  }

}