How to align images within CSS grid

Question

I am recreating the below photoshop template in html and css. I'm getting closer to reproducing it however I am having difficulty with aligning some of the images to closer replicate the template.

My html is as follows:

 <div className="methodology__processPoints">

        {/* <div> */}
            <img className="process__image" src={one}/>
            <div className="process__text">
                <h2>First point</h2>
                <p>risus viverra adipiscing at in tellus integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit amet porttitor eget dolor morbi non arcu risus quis varius quam quisque id</p>
            </div>
            <img className="process__arrow"src={oneArrow}/>
            
        {/* </div> */}

        {/* <div> */}
            <img className="process__arrow" src={twoArrow}/>
            <div className="process__text --odd">
                <h2>Second point</h2>
                <p>risus viverra adipiscing at in tellus integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit amet porttitor eget dolor morbi non arcu risus quis varius quam quisque id</p>
            </div>
            <img className="process__image" src={two}/>
        {/* </div> */}
       
       {/* <div> */}
            <img className="process__image" src={three}/>
            <div className="process__text">
                <h2>Third point</h2>
                <p>risus viverra adipiscing at in tellus integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit amet porttitor eget dolor morbi non arcu risus quis varius quam quisque id</p>
            </div>
            <img className="process__arrow" src={threeArrow}/>
            
       {/* </div> */}

        {/* <div> */}
            <div className="process__arrow"></div>
            <div className="process__text --odd">
                <h2>Fourth point</h2>
                <p>risus viverra adipiscing at in tellus integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit amet porttitor eget dolor morbi non arcu risus quis varius quam quisque id</p>
            </div>
            <img className="process__image" src={four}/>
        {/* </div> */}

    </div>

and the scss is

  .methodology{
        &__processPoints{
            padding-bottom: $med;
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            justify-content: center;
            align-items: center;
            grid-gap:$small;
    
            > * {
                text-align:left;
            }
            
        }

        &__processPoints--mobile{
            display:none;
        }
            

        .process__arrow{
            display: block;
            content: '';
            object-fit: contain;
            margin: 0;
            max-width: 80px;
            height: auto;
        }

        .process__image{
            object-fit: contain;
            max-width: 130px;
            height: auto;
            margin: 0 $small;
        }
        
        .process__text{
            display: flex;
            flex-direction: column;
            p{
                margin-top: 0.5rem;
            }
        }
    }
    
    .--odd{
        text-align: right;
    }

This produces the following result:

I am struggling to figure out how I can precisely control the position of the images within CSS grid. At the moment the images are aligned to the start of the grid i.e left border, as is seen from the element inspector dev tools shown below:

How could I center an individual image to align with one of the corners of the parent grid cell rather than just the left border? For instance I want to move the "1" image to the bottom right corner of it's parent grid cell, the first arrow image to the bottom-left corner of it's parent grid cell.

Answer 1

To align any item within its grid box, do the following:

1. Select the item (in this case, the image)
2. Give it the following property:

.my-image {
  justify-self: start;
}

The code above places it on the left of the box.

.my-image {
  justify-self: end;
}

The code above places it on the right of the box.

.my-image {
  justify-self: end;
}

The code above places it on the center of the box.