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

Question

I am looking for a responsive Grid System. The clue is, I also need something like Row Details for the clicked/selected cell (Cell Details? Expandable?).

For example: pr0gramm.com Its pretty close to my Feature.

Columns:

• Dekstop: 4
• Tablet: 3
• Phone: 2

With all 4 Columns in a Row, I can just append a new div after the Row of the selected Cell. See: http://i.stack.imgur.com/FcbfO.png

With 3 of 4 Columns in a Row (still 4 Columns in the div) im getting this result: http://i.stack.imgur.com/5raJE.png

Are there any frameworks or something similar? Or do I have to implement this by myself with js ?

Answer 1

you can do that with CSS. add something like @media (max-width: 768px) to detect the screen size to give different CSSs to different screen sizes.

No More Table is a good example

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

}