brincando com css

gestaoRaul/templates/static/comandas/css/comandas.css

@@ -1,14 +1,14 @@
 .grid-container {
     display: grid;
-    grid-template-columns: repeat(3, 2fr);
+    grid-template-columns: repeat(4, 2fr);
     gap: 20px;
     max-width: 800px; /* Define a largura máxima do grid */
     margin: 0 auto; /* Centraliza o grid na página */
   }
 
 .card {
-    width: 220px;
-    height: 220px;
+    width: 120px;
+    height: 120px;
     background-color: #f2f2f2;
     border-radius: 15px;
     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
@@ -77,3 +77,11 @@ input, textarea {
     border-radius: 5px;
     border: 1px solid #ccc;
 }
+
+
+@media (min-width: 768px) {
+    .grid-containerid {
+        grid-template-columns: repeat(3, 1fr);
+      /* grid-template-columns: repeat(auto-fit, minmax(2%, 3fr)); */
+    }
+  }

gestaoRaul/templates/static/comandas/css/viewcomanda.css

@@ -1,6 +1,6 @@
 .grid-container {
     display: grid;
-    grid-template-columns: repeat(2, 2fr);
+    grid-template-columns: repeat(1, 2fr);
     gap: 10px;
     max-width: 800px; /* Define a largura máxima do grid */
     margin: 0 auto; /* Centraliza o grid na página */

gestaoRaul/templates/static/comandas/js/comandas.js

@@ -1,5 +1,7 @@
 function openModal() {
     document.getElementById('Modal-create-comanda').style.display = 'block';
+    // HTMLDialogElement.show()
+    // HTMLDialogElement.showModal()
 }
 
 function closeModal() {