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

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;
  }

}