Update app.py

app.py

@@ -1,3 +1,39 @@
+"""
+/* Define the background colors for dark and light squares */
+.dark-square {
+  background-color: #555;
+}
+
+.light-square {
+  background-color: #ccc;
+}
+
+/* Style the column containers to have the appropriate background color */
+.col {
+  flex: 1 0 8.33333%;
+  margin: 0 5px;
+  text-align: center;
+  padding: 10px;
+}
+
+/* Alternate the background colors between dark and light squares */
+.layout .col:nth-child(odd) .col:nth-child(odd) {
+  background-color: #555;
+}
+
+.layout .col:nth-child(even) .col:nth-child(odd) {
+  background-color: #ccc;
+}
+
+.layout .col:nth-child(odd) .col:nth-child(even) {
+  background-color: #ccc;
+}
+
+.layout .col:nth-child(even) .col:nth-child(even) {
+  background-color: #555;
+}
+"""
+
 # Import necessary libraries
 import gradio as gr  # Gradio is used to create web interfaces for Python scripts.
 from transformers import AutoConfig  # AutoConfig is from the Hugging Face Transformers library, used to create configuration for various models.
@@ -87,7 +123,7 @@ with gr.Blocks(css=custom_css) as demo:
 import gradio as gr
 
 def generate_grid():
-    with gr.Blocks(label="The Big Gridio", elem_class="layout", elem_id="grid-lg") as grid:
+    with gr.Blocks(css=css, label="The Big Gridio", elem_class="layout", elem_id="grid-lg") as grid:
         for row in range(12):
             with gr.Row() as row_container:
                 for col in range(12):