I made a responsive grid layout where the number of columns adjusts automatically with this specification, template-rows are not explicit:

grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));

Here is the website if you want to have a closer look(https://vahid1919.github.io/#explanation)

I created a psuedoclass that displays tags on the right-top corner whenever I hover on a card. What I could not figure out is how to write selectors so that the tags appear on the left-top corner if the card is the right-most card on the webpage. This is helpful incase I want to have a more descriptive(larger) element I want to display when a user hovers.

This is what site situation looks like I want the last cell in the row to display the tags on the left side. How do I select for that. Or if I can't, please point me to the right direction perhaps if I need to use Javascript...I'm fairly a noob at that.

CodePudding user response：

First, you'll need to add jQuery to your site's header with the following:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Then you can add the following script which will identify the last element with a class named "partners-grid-items", select the children of that element with a class name of "tags" and modify the css to position it to the left (you may need to tweak this part).

$(document).ready(function () {
      $('.partners-grid-items:last-child').children('.tags').css('right', '100%');
});

PS - your last .tag for education doesn't have the same positioning as applied to the others in your css.