update grid layout

app.py

@@ -22,7 +22,7 @@ def process_response(response_dict):
 
 response_dict = get_initial_images()
 initial = process_response(response_dict)
-initial_imgs  = '<div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-gap: 0; ">\n' + "\n".join(initial[:-1])
+initial_imgs  = '<div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-gap: 0; position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; padding: 20px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);">\n' + "\n".join(initial[:-1])
 
 #Third: Load more images for the grid
 def get_next10_images(response_dict, row_count):
@@ -38,10 +38,11 @@ def get_next10_images(response_dict, row_count):
     #print("(2)",type(response))
     #print("(3)",type(response['data'][0]))
     next_set  = [resp[0][:-1] for resp in response_dict["data"]]
-    next_set_images = '<div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-gap: 0; ">\n' + "\n".join(next_set[:-1])
+    next_set_images = '<div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-gap: 0; position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; padding: 20px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); ">\n' + "\n".join(next_set[:-1])
     return response['data'][0], row_count, next_set_images
 
 #get_next10_images(response_dict=response_dict, row_count=9)
+#position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; padding: 20px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
 
 #Defining the Blocks layout
 with gr.Blocks(css = """#img_search img {width: 100%; height: 100%; object-fit: cover;}""") as demo: