How to expand a sibling element of a grid?

Question

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.

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

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

score 0 · Answer 1 · answered Jul 22 '21 at 15:12

0

Here it is

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

and removed the flex-grow from the ,card

https://jsfiddle.net/xbc2vdg9/

answered Jul 22 '21 at 15:12

E P

389
4
16

1

Thanks. But this way when the detail is displayed we have just one single column of cards and theres space for more. – William Martins Jul 22 '21 at 17:12

How to expand a sibling element of a grid?

1 Answers1