Can I change the “justify-content” value depending on the number of elements in the flex container?

Question

I am working on an image gallery on a legacy site. I can\'t use anything other than regular old HTML/jQuery or JS/CSS. I know this would be a lot easier with Bootstrap or so

Answer 1

Depending on what you need to support, it might make more sense to use CSS grid layouts (as TylerH pointed out, CSS Grids do not have universal browser support). Check the documentation for further info: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

.flex-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}

    
    
      
      
        
                
      
      
      
Image 1
      
    
    
    
      
      
        
                
      
      
      
Image 2
      
    
    
   
      
      
        
                
      
      
      
Image 3
      
    
    
    

      
       
                
      
      
      
Image 4
      
    
    
    
      
      
        
                
      
      
      
Image 5
      
    
    
    
      
      
        
                
      
      
      
Image 6
      
    
    
   
      
      

                
      
      
      
Image 7