1

I have a list of cards that are displayed in a grid layout. When I click in one of these cards, a div will appear, displaying the details.

This detail element should have a minimum of 300px and occupy all space but my cards should be displayed as much as possible occupying more than 1 per row if possible.

enter image description here

https://jsfiddle.net/3h1kx9Lz/


    .parent {
      width: 100%;
      gap: 10px;
      display:flex;
    }
    
    .container {
      grid-template-columns: repeat(auto-fit, minmax(100px, 200px));
      grid-auto-rows: min-content;
      gap: 10px;
      display: grid;
      flex-grow: 1;
      align-items: flex-start;
    }
    
    .card {
      height: 30px;
      background: red;
    
    }
    
    .detail {
      min-width:300px;
      flex-grow:1;
      background: blue;
      height: 200px;
    
    }
William Martins
  • 357
  • 2
  • 14
  • 1
    if let both column's element expand, it would be easier, could be somethink alike : https://jsfiddle.net/z4tvamy3/ – G-Cyrillus Jul 22 '21 at 13:33
  • didnt know about clamp. Thanks. But my grid items have fixed size – William Martins Jul 22 '21 at 13:55
  • Here is another approach (minus the header) that you may also inspire yourself from : https://stackoverflow.com/questions/58897450/css-grid-with-top-bar-sidebar-and-repeating-content/58900281#58900281 (shrinking down to 2col https://codepen.io/gc-nomade/details/xxxmGNE or a single https://codepen.io/gc-nomade/pen/qBOPgpX – G-Cyrillus Jul 22 '21 at 22:48

1 Answers1

0

Here it is

.parent {
    width: 100%;
    display:flex;
}

and removed the flex-grow from the ,card

https://jsfiddle.net/xbc2vdg9/

E P
  • 389
  • 4
  • 16