CSS Grid items not aligned as one row in Django template with tailwind-css

Question

I am new to Django and ran into this issue. so basically I am making an app where I have to display rooms on the main home page. The rooms are generated dynamically and are stored in the database that are fetched for the home page like this (in the views.py)

def home(request):
    return render(request, 'base/index.html', {'rooms':rooms})

then the index.html will display the data in the form of cards using jinja for loop, something like this, just ignore the classes and all that, they are just dummy images, here I am using tailwind-css for styling

{% for room in rooms %}

    
        
            
                
                
                
                
                    
                        {{room.id}}
                    
                
                
                    
                        27
                        March
                    
                
            
        
        
            {{room.name}}
            
                {{room.desc}}
            
        
        
            
                
                6 mins ago
        
    


{% endfor %}

I am using tailwindcss for styling, and the display grid doesn't seem to work with this, I have added grid-cols-4 for large screens, which means 4 columns of 1 fr so that 4 divs can be placed in 1 line, but only 1 is being placed and rest just goes to different line. (red borders are for troubleshooting)

In my understanding, the css applied is not able to detect the dynamically generated set of data, and consider only 1 card.

How to fix this and make 3-4 dynamically generated grid items to be in one row?

MagnusEffect · Accepted Answer

I think you made a mistake while calling a loop. I don't know how Django works but you should call the loop after the first div. So some pseudo-code can be like this

Below I am adding the tailwindcss code , since I can’t apply loop here so I just copy-paste the 4 cards code repetitively



  
    
        
            
                
                
                
                
                    
                        {{room.id}}
                    
                
                
                    
                        27
                        March
                    
                
            
        
        
            {{room.name}}
            
                {{room.desc}}
            
        
        
            
                
                6 mins ago
        
    

    
        
            
                
                
                
                
                    
                        {{room.id}}
                    
                
                
                    
                        27
                        March
                    
                
            
        
        
            {{room.name}}
            
                {{room.desc}}
            
        
        
            
                
                6 mins ago
        
    

    
        
            
                
                
                
                
                    
                        {{room.id}}
                    
                
                
                    
                        27
                        March
                    
                
            
        
        
            {{room.name}}
            
                {{room.desc}}
            
        
        
            
                
                6 mins ago
        
    

    
        
            
                
                
                
                
                    
                        {{room.id}}
                    
                
                
                    
                        27
                        March
                    
                
            
        
        
            {{room.name}}
            
                {{room.desc}}
            
        
        
            
                
                6 mins ago

CSS Grid items not aligned as one row in Django template with tailwind-css

Answers (2)

Related Questions