Hello Expert,
I am looking to showcase images and text in a grid layout.
However, I have noticed that there is too much space between the image and text. How can I adjust this?
Here is the CodePen link for reference: CodePen Link
Please find attached an image showing the current display: View Image Here
I also want the content to be centered on the page.
.grid-container {
display: flex;
}
.grid-container>*{
flex: 1;
}
img{
width: 50%;
height: 50%;
}
.grid-item p{
padding: 1rem;
}
<div class="grid-container">
<div class="grid-item">
<img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/podcast_063b8574-56e0-4fa2-a9a9-c85f701754f3.png?v=1651638533" alt="podcast"></div>
<div class="grid-item-Text">
<p>Podcast</p>
</div>
<div class="grid-item">
<img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/ebook.png?v=1651638533" alt="ebook"></div>
<p>Ebooks</p>
<div class="grid-item">
<img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/youtube.png?v=1651638533" alt="youtube"></div>
<p>Youtube</p>
</div>
<div class="grid-container">
<div class="grid-item">
<img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/podcast_063b8574-56e0-4fa2-a9a9-c85f701754f3.png?v=1651638533" alt="podcast"></div>
<div class="grid-item-Text">
<p>Podcast</p>
</div>
<div class="grid-item">
<img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/ebook.png?v=1651638533" alt="ebook"></div>
<p>Ebooks</p>
<div class="grid-item">
<img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/youtube.png?v=1651638533" alt="youtube"></div>
<p>Youtube</p>
</div>
<div class="grid-container">
<div class="grid-item">
<img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/podcast_063b8574-56e0-4fa2-a9a9-c85f701754f3.png?v=1651638533" alt="podcast"></div>
<div class="grid-item-Text">
<p>Podcast</p>
</div>
<div class="grid-item">
<img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/ebook.png?v=1651638533" alt="ebook"></div>
<p>Ebooks</p>
<div class="grid-item">
<img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/youtube.png?v=1651638533" alt="youtube"></div>
<p>Youtube</p>
</div>