Align Images right in a subgrid
I have a subgrid with a collection of images, I'm trying to right align them in the grid. I've tried grid-column-start: -1, align, justify, nothing seems to work, what am i doing wrong? any help would be great! Thanks
<div class="project-content">
<div class="project-copy">
<div>
<p class="subhead">For</p>
<h2>Client Name</h2>
</div>
<div>
<p class="subhead">Desc</p>
<p>The redesign of the Jugo.io website, including the creation of wireframes and the development of a design system, aimed to improve the user experience and align the website with the brand's values. The iterative design process, user testing, and optimization helped create a visually appealing and intuitive website that promotes the brand's focus on virtual experiuences.</p>
</div>
<div>
<p class="subhead">Date</p>
<p>2024</p>
</div>
</div>
<div class="project-pres">
<img src="/assets/ANEMONE_COVER.webp" alt="">
<img src="/assets/ANEMONE_COVER.webp" alt="">
<img src="/assets/ANEMONE_COVER.webp" alt="">
<img src="/assets/ANEMONE_COVER.webp" alt="">
<img src="/assets/ANEMONE_COVER.webp" alt="">
</div>
.project-content {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
column-gap: 1rem;
}
.project-copy {
display: flex;
flex-direction: column;
gap: 2rem;
}
.project-pres > * {
margin-bottom: 2rem;
max-width: 60ch;
}
<div class="project-content">
<div class="project-copy">
<div>
<p class="subhead">For</p>
<h2>Client Name</h2>
</div>
<div>
<p class="subhead">Desc</p>
<p>The redesign of the Jugo.io website, including the creation of wireframes and the development of a design system, aimed to improve the user experience and align the website with the brand's values. The iterative design process, user testing, and optimization helped create a visually appealing and intuitive website that promotes the brand's focus on virtual experiuences.</p>
</div>
<div>
<p class="subhead">Date</p>
<p>2024</p>
</div>
</div>
<div class="project-pres">
<img src="/assets/ANEMONE_COVER.webp" alt="">
<img src="/assets/ANEMONE_COVER.webp" alt="">
<img src="/assets/ANEMONE_COVER.webp" alt="">
<img src="/assets/ANEMONE_COVER.webp" alt="">
<img src="/assets/ANEMONE_COVER.webp" alt="">
</div>
.project-content {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
column-gap: 1rem;
}
.project-copy {
display: flex;
flex-direction: column;
gap: 2rem;
}
.project-pres > * {
margin-bottom: 2rem;
max-width: 60ch;
}
