Need help using streamlit_card in grid

Using Streamlit
, ,
1

Hi,
I came across the streamlit_card and it’s perfect for my use case. However, I 'm not sure how to use it in the grid.
I can use the grid for the image but I need it for card.
Please do help. I started on stremlit only from today and the requirement is urgent and hence the request.
Apologies, if I have made any mistake in posting the issue.

Code:

import streamlit as st
from streamlit_extras.grid import grid
from streamlit_card import card

filepath=r"C:\Users\u1\v920-kul-61.jpg"

with open(filepath, "rb") as f:
    data = f.read()
    encoded = base64.b64encode(data)

data = "data:image/png;base64," + encoded.decode("utf-8")

def gen_card(fname):
    return card(
    title=f"Hello {fname}!",
    text="Some description",
    image=data,
    url="https://google.com",
    styles={
            "card": {
                "width": "150px",
                "height": "150px",
                #"border-radius": "100px",
                "box-shadow": "0 0 10px rgba(0,0,0,0.5)",
            },
            "text": {
                "font-family": "serif",
                "font-size": "16px",
            }
        }
    )
	
n_cols = 3
n_rows = 3
rows = [st.container() for _ in range(n_rows)]
cols_per_row = [r.columns(n_cols) for r in rows]
cols = [column for row in cols_per_row for column in row]

card_images = ["C1", "C2", "C3", "C4", "C5", "C6", "C7", "C8", "C9"]

for image_index, card_image in enumerate(card_images):
    cols[image_index].image(data) #This works for images but I need this for card

Thanks
Shashi