This is made by using the basic concept of grid

we use the no. of CSS properties and grid properties mentioned below.

Live Link

https://cofee-cart.netlify.app/

grid container properties=>

display: grid; grid-template-columns; grid-template-rows;

grid items properties=>

grid-row-start; grid-row-end; grid-column-start; grid-column-end;

To give the radius of the image corner we use

border-top-left-radius; border-bottom-left-radius;

#some other normal CSS properties used-> line-height:; box-sizing: ; padding : ; margin: ; box-shadow: ; border-radius: ; width: fit-content; letter-spacing: ;cursor: pointer ;