Why are the grid elements not spanning, positioning and resizing properly?

Question

I have a simple grid of six images with the following html template:--

<div class="why-edukashi">
    <div>
        <img src="../project/extras-2.jpg" class="normal">
        <h3>Quality Education</h3>
    </div>
    <div>
        <img src="https://image.freepik.com/free-vector/isometric-education-background_23-2148100136.jpg" class="normal">
        <h3>Interactive Learning</h3>
    </div>
    <div>
        <img src="../project/group_sessions.jpg" class="normal">
        <h3>Group Sessions</h3>
    </div>
    <div>
        <img src="../project/quality_edu.jpg" class="normal">
        <h3>Concept clarity and Practical education</h3>
    </div>
    <div>
        <img src="../project/home.jpg" class="normal">
        <h3>Unlimited Resources</h3>
    </div>
    <div>
        <img src="../project/girls.jpg" class="large">
        <h3>We got these..</h3>
    </div>
</div>

All I want is to align them side by side in a 3 x 2 rectangle! Somewhat like this:

But they are not even spanning nor I'm able to position or resize them properly!

Here's the CSS i tried (without span):

  .why-edukashi{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: auto auto;
  }
      

  .normal{
        margin: 0;
        padding: 15px;
        height: 40%; /*The height property is also not able  to resize every image (of "normal" class)*/
        width: auto;
    }

Then tried this..

.why-edukashi{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: auto auto;
}
.normal{
    padding: 0;
    margin: 0;
    grid-column: 1 / 4;
    grid-row: 1 / 3;
 }

There is no change in the grid due to spanning! The alternate grid-column: span 3 is also changing nothing!

I tried different values in grid-template too, like percentage , minmax etc but still failed to position and resize! Other properties like grid-auto-flow (set to dense)and size property (for resizing) are also not working!

Also can you please explain the proper way of designing a CSS grid?

Grid properties only work between parent and child elements. In your code, you're applying grid properties to the grandchildren of the container, so the properties are being ignored. See the duplicate for more details. — Michael Benjamin, Aug 29 '20 at 23:18

score 2 · Answer 1 · answered Aug 28 '20 at 04:18

I used table tag to design grid layout. I have included css in my html file. As your wish, you can use a separated css file.

 <html>
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
            <meta http-equiv="Pragma" content="no-cache" />
            <meta http-equiv="Expires" content="0" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />

                      <style>
        .image_item{
        width:450px;
        height:300px;
        }
       </style>

         </head>

        <body>

<table style="text-align:center; margin-left:auto; margin-right:auto;">
    <tr>
        <td>
            
                    <div>
                <img class="image_item" src="https://image.freepik.com/free-vector/isometric-education-background_23-2148100136.jpg">
                <p class="title">Quality Education</p>
                    </div>
        </td>
                
        <td>
            <div>
                <img class="image_item" src="https://image.freepik.com/free-vector/isometric-education-background_23-2148100136.jpg">
                <p class="title">Quality Education</p>
                    </div>  
        </td>

        <td>
            <div>
                <img class="image_item" src="https://image.freepik.com/free-vector/isometric-education-background_23-2148100136.jpg">
                <p class="title">Quality Education</p>
                    </div>  
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <img class="image_item" src="https://image.freepik.com/free-vector/isometric-education-background_23-2148100136.jpg">
                <p class="title">Quality Education</p>
                    </div>  
        </td>

        <td>
            <div>
                <img class="image_item" src="https://image.freepik.com/free-vector/isometric-education-background_23-2148100136.jpg">
                <p class="title">Quality Education</p>
                    </div>  
        </td>

        <td>
            <div>
                <img class="image_item" src="https://image.freepik.com/free-vector/isometric-education-background_23-2148100136.jpg">
                <p class="title">Quality Education</p>
                    </div>  
        </td>


    </tr>
</table>

        </body>
    </html>

score 0 · Answer 2 · answered Aug 28 '20 at 05:10

I have made some changes in your code, hope you find your desire result. try it once.

.why-edukashi{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: auto auto;
      }
          

      .normal{
            margin: 0;
            padding: 15px;
            height: 40%;
            width: auto;
            border-radius:30px;
        }

<div class="why-edukashi">
        <div class="edukashi">
            <img src="https://image.freepik.com/free-vector/isometric-education-background_23-2148100136.jpg" alt="not found" class="normal">
            <h3>Quality Education</h3>
        </div>
        <div >
            <img src="https://image.freepik.com/free-vector/isometric-education-background_23-2148100136.jpg"alt="not found" class="normal">
            <h3>Interactive Learning</h3>
        </div>
        <div>
            <img src="https://image.freepik.com/free-vector/isometric-education-background_23-2148100136.jpg" alt="not found" class="normal">
            <h3>Group Sessions</h3>
        </div>
        <div>
            <img src="https://image.freepik.com/free-vector/isometric-education-background_23-2148100136.jpg" alt="not found"  class="normal">
            <h3>Concept clarity and Practical education</h3>
        </div>
        <div>
            <img src="https://image.freepik.com/free-vector/isometric-education-background_23-2148100136.jpg" alt="not found" class="normal">
            <h3>Unlimited Resources</h3>
        </div>
        <div>
            <img src="https://image.freepik.com/free-vector/isometric-education-background_23-2148100136.jpg" alt="not found" class="normal">
            <h3>We got these..</h3>
        </div>
    </div>

Why are the grid elements not spanning, positioning and resizing properly?

2 Answers2