Creating a grid layout that features responsive images and text displayed side by side is a simple and effective way to

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>

htmlcss

Answer №1

Here is the HTML snippet for creating a grid layout with images and text:

<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">
      <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">
      <p>Ebooks</p>
    </div>
    
    <div class="grid-item">
      <img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/youtube.png?v=1651638533" alt="youtube">
      <p>Youtube</p>
    </div>
  </div>

And here is the accompanying CSS to style the grid layout:

.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;
}

Answer №2

Here is a template I created to assist you:

                <!DOCTYPE html>
                <html lang="en">
                <head>
                <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27454848535453554657671209160914">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
                <meta charset="UTF-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Document</title>
                </head>
                
                <body>
                <div class="container">
                <div class="row row-cols-2 row-cols-lg-6 g-2 g-lg-3">
                <div class="col">
                <div class="p-md-2 ">
                    <img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/podcast_063b8574-56e0-4fa2-a9a9-c85f701754f3.png?v=1651638533" alt="podcast"    width="75%;" >
                
                </div>
                </div>
                <div class="col">
                <div class="p-2 ">Insert Name Here</div>
                </div>
                <div class="p-md-2 ">
                <img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/podcast_063b8574-56e0-4fa2-a9a9-c85f701754f3.png?v=1651638533" alt="podcast"    width="75%;" >
                
                </div>
                <div class="col">
                <div class="p-2 ">Insert Name Here</div>
                </div>
                <div class="p-md-2 ">
                <img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/podcast_063b8574-56e0-4fa2-a9a9-c85f701754f3.png?v=1651638533" alt="podcast"    width="75%;" >
                
                </div>
                <div class="col">
                <div class="p-2 ">Insert Name Here</div>
                </div>
                <div class="p-md-2 ">
                <img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/podcast_063b8574-56e0-4fa2-a9a9-c85f701754f3.png?v=1651638533" alt="podcast"    width="75%;" >
                
                </div>
                <div class="col">
                <div class="p-2 ">Insert Name Here</div>
                </div>
                <div class="p-md-2 ">
                <img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/podcast_063b8574-56e0-4fa2-a9a9-c85f701754f3.png?v=1651638533" alt="podcast"    width="75%;" >
                
                </div>
                <div class="col">
                <div class="p-2 ">Insert Name Here</div>
                </div>
                </div>
                </div>
                
                </body>
                </html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The autocomplete attribute for "current-password" in React is failing to display the form fill option

Encountering an issue with the autocomplete="current-password" attribute not displaying the current password in a form, even though it is saved in Chrome. The input field is enclosed within a form. Is anyone else experiencing problems with the autocomplete ...

htmlreactjsautocomplete

The dimensions of the window - creating divs within td elements - the appearance of scroll

Here is the HTML code that I am working with: <table> <tr> <td class='tclone' id='clone'></td> <td class='loader' id='loader'> <div id='tdiv& ...

htmlcsshtml-table

Guide to animating the height of a div using jQuery:

I'm hoping to create a cool animation effect where a certain part of a div expands to 100% width when clicked, and then reverts back to its original height on a second click. I've tried writing some code for this, but it's not working as exp ...

javascriptjqueryhtmlcssanimation

Achieving consistent alignment for text on a curved path

I am working on a unique "flow-builder" project and I need to achieve this specific result: https://i.sstatic.net/6TTuS.png At the moment, my current edge looks like this: https://i.sstatic.net/9ydzx.png The text on the edge is currently aligned with the ...

cssreactjscanvas

Using CSS to create a color combination of black with varying opacities

I attempted to achieve a black color by blending together the colors red, yellow, and blue in CSS, but encountered an issue... Is there a way to create black color using opacity? ...

htmlcss

Discovering elements in selenium can be achieved through various techniques such as

I am trying to locate the element "Holiday4" within the span class="fc-title". Should I use a CSS selector or an XPath query for this task? <tr> <td class="fc-day-number fc-sun fc-future hp-cal-selected" data-date="2016-02-14">14</td ...

htmlcssselenium

Expand the column to occupy the remaining height of the row

I've been on the hunt for a solution to this issue, but I haven't had any luck finding one. Various flexbox properties like flex-grow: 1; and align-self: stretch; have been attempted, but none seem to achieve the desired outcome. The goal is to ...

htmlcssbootstrap-4flexbox

Adjust the height of a div using jQuery once the AJAX call retrieves the data

There is a div that always matches the height of the adjacent div, depending on the content loaded in it. This setup was functioning properly until I implemented a search feature using jQuery. Now, when I perform a search, the element used in the jQuery ca ...

javascriptjquerycssajax

Tips for enhancing a table cell using JavaScript

Is it possible to use javascript to style a specific cell in an HTML table? A sample HTML table is provided below: <table border="1" width="300" height="200"> <tr> <td id="11">& ...

javascripthtmlcssnode.js

Please select a text color for displaying tabular data in HTML using XML and XSL as a guide

<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format"> <xsl:template match="/"> <html> <head> <style type="text ...

htmlxmlxsltxslt-1.0xslt-2.0

The gap in rows is not displayed in CSS subgrid

Currently, I am delving into the world of CSS grid and subgrid. My current project involves creating a simple form with two columns and incorporating a few subgrids. In my design, the parent grid displays a gap of 1em - both the columns and rows have a pr ...

csscss-gridsubgrid

How to Create a Speech Bubble in SVG Using SnapSVG

In the process of developing a chat program, I have animated figures moving across the screen engaging in conversations. One crucial aspect I am yet to implement is creating scalable speech bubbles for when users interact. Being relatively new to SVG and ...

javascriptcsssvgsnap.svg

Cordova: Opening App through a Website Link Click

Embarking on my app development journey, I recently dived into creating an Android app with Cordova. However, I found myself stuck at a particular issue: In the sign-up process, users receive an email containing an activation link to click and confirm the ...

androidhtmlcordova

PHP: Dynamically update div content upon submission

I am attempting to update the "refresh" div after clicking the Submit button and also at regular intervals of 5 seconds. Despite looking through various resources, I have not been able to find a solution that meets my requirements. <script src="h ...

javascriptphpjqueryhtml

The responsive navigation bar yielded an unforeseen outcome

Looking to create a responsive navigation bar similar to the one shown here My code successfully shows and hides the navigation items, but it's not updating the burger icon No console errors or warnings are present This is my HTML: <nav> ...

javascripthtmljquerycss

Top strategy for incorporating text into a logo design

My goal is to create a logo similar to the image below, with the black rectangle as an image and the text as real text. I have tried the code below (also available on jsfiddle http://jsfiddle.net/ueZ2H/ and it seems to be working. However, I am unsure if t ...

htmlcss

Achieve a sleek look by adjusting the start and end margins of the navbar in Bootstrap 5 to sit closely to the edge

After removing ms-2, the content shifts to the right. When I put it back in, the content shifts to the left again. I've tried different options but can't seem to figure out how it works and the correct order it needs to be in. Bootstrap is giving ...

htmlbootstrap-5navbar

Tips for designing the microphone appearance on the Google Chrome speech input interface

Google Chrome features an input control for speech recognition. If you want to know how to use it, check out this link. I'm looking to enlarge the microphone icon and possibly use a customized image for it. Increasing the width and height of the inp ...

javascripthtmlcssgoogle-chromestyles

Is there a way to verify the file extension in a multi-input form during an upload process?

I am looking for a solution that requests users to upload 4 different files when filling out the form. Check out this example of one of the inputs: <div class="custom-file"> <input type="file" class="custom-file-input" accept="video/*" id="v ...

javascripthtml

How can we prevent the navigation from fading out when scrolling back up, as JQuery control the opacity of the Nav to fade in?

Looking for some guidance on jQuery assistance. I currently have a fixed navigation bar at the top of my webpage with an initial opacity set to 0 upon page load. As the user scrolls down, I want the navigation bar to fade in using the following code: fun ...

jquerycss