I want two rows horizontally using display grid

Question

as my title says i want two rows side by side using display grid problem is i can't select two rows side by side when i use..

.grid-container {
display: grid;
grid-template-rows: auto auto;
grid-template-columns: auto;
grid-column-gap:100px;}

it creates two rows but vertically and one column. and when i use..

.grid-container {
display: grid;
grid-template-rows: auto auto;
grid-template-columns: auto auto;
grid-column-gap:100px;}

it creates two column side by side and two vertical rows like this..

which is good so far until i click my accordian button when i clicked this happened..

Both Columns taking height when i clicked which i don't want. the only way is to tackle this problem is create two separate rows side by side. or anybody can give different suggestions would be appreciated i am too exhausted right now to think the logic behind this problem. thanks :)

MilanDemoniack · Accepted Answer

I know you wish to use display: grid properties but I have not found a way to do so using those properties. I offer you an alternative here, using display:flex.

I used Bootstrap's accordion for the example below.

1) You need to use some display:flex on a container to get its direct children elements (here, blocks/divs) next to one another.

2) you need to define 2 child blocks of that container in order to have 2 columns. You can use the col-6 of bootstrap that does a width:50% in order to do so.

3) inside those 2 columns, place your accordions. They should act and open without stretching their neighboors that live in the other column.

This is what it visually looks like:

If you wish to do so, here's a code example using Bootstrap 5.1.3 :


    
        
        
      
        
        Document
    
    
    
      
        
          
            
              
                
              
              
                
                  This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
                
              
            
            
              
                
              
              
                
                  This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
                
              
            
            
              
                
              
              
                
                  This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
                
              
            
          
        
        
          
            
              
                
              
              
                
                  This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
                
              
            
            
              
                
              
              
                
                  This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
                
              
            
            
              
                
              
              
                
                  This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

-- UPDATE --

I have found another way of doing what you have described, still using display:flex but with more structural changes in order to respect your description regarding responsive design:

on mobile / tablet : horizontal design with two elements next to each other.? Accordions don't affect the other side's height when opened.
on desktop / large screens : vertical design

Here's a code sample, let me know if it helps (please try responsive to see structural changes).


    
        
        
      
        
        Document
    
    
    
      
        
          
            
              
                
                  
                
                
                  
                    This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
                  
                
              
              
                
                  
                
                
                  
                    This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
                  
                
              
              
                
                  
                
                
                  
                    This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
                  
                
              
            
          
          
            
              
                
                  
                
                
                  
                    This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
                  
                
              
              
                
                  
                
                
                  
                    This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
                  
                
              
              
                
                  
                
                
                  
                    This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

I want two rows horizontally using display grid

Answers (1)

-- UPDATE --

Related Questions