How to make responsive Image and text displayed side by side in grid format

Question

Hi Expert,

I want to display image and text in grid format.

But the distance between the Image+text is big how can that be adjusted.

Here is the codepen link https://codepen.io/melwyn-mendonca/pen/RwQPKbp

Attached is the image how it is displayed enter image description here

Also want it in the middle of the page.

.grid-container {
  display: flex;
  
}
.grid-container>*{
  flex: 1;
  }

img{
  width: 50%;
  height: 50%;
}

.grid-item p{
  padding: 1rem;
  
}




  
Podcast
  
    

    Ebooks
    

Youtube
    



  
Podcast
  
    

    Ebooks
    

Youtube
    



  
Podcast
  
    

    Ebooks
    

Youtube

user_16690281 · Answer

ive have made a template for you hope it helps

                
                
                
                
                
                
                
                Document
                
                
                
                
                
                
                
                    
                
                
                
                
                use the name
                
                
                
                
                
                
                use the name
                
                
                
                
                
                
                use the name
                
                
                
                
                
                
                use the name
                
                
                
                
                
                
                use the name

user_814172 · Answer

HTML (snippet):


    
      
      Podcast
    
    
    
      
      Ebooks
    
    
    
      
      Youtube

CSS:

.grid-container {
  display: flex;  
}

.grid-item
{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.grid-item img{
  width: 50%;
  height: 50%;
  vertical-align: middle;
}

.grid-item p {
  padding: 1rem;
  display: inline-block;
  vertical-align: middle;
}

How to make responsive Image and text displayed side by side in grid format

2 Answers