add support for custom row and column templates for ui.grid (#2701)

nicegui/elements/grid.py

@@ -1,4 +1,4 @@
-from typing import Optional
+from typing import Optional, Union
 
 from ..element import Element
 
@@ -7,19 +7,25 @@ class Grid(Element):
 
     def __init__(self,
                  *,
-                 rows: Optional[int] = None,
-                 columns: Optional[int] = None,
+                 rows: Optional[Union[int, str]] = None,
+                 columns: Optional[Union[int, str]] = None,
                  ) -> None:
         """Grid Element
 
         Provides a container which arranges its child in a grid.
 
-        :param rows: number of rows in the grid
-        :param columns: number of columns in the grid
+        :param rows: number of rows in the grid or a string with the grid-template-rows CSS property (e.g. 'auto 1fr')
+        :param columns: number of columns in the grid or a string with the grid-template-columns CSS property (e.g. 'auto 1fr')
         """
         super().__init__('div')
         self._classes.append('nicegui-grid')
-        if rows is not None:
+
+        if isinstance(rows, int):
             self._style['grid-template-rows'] = f'repeat({rows}, minmax(0, 1fr))'
-        if columns is not None:
+        elif isinstance(rows, str):
+            self._style['grid-template-rows'] = rows
+
+        if isinstance(columns, int):
             self._style['grid-template-columns'] = f'repeat({columns}, minmax(0, 1fr))'
+        elif isinstance(columns, str):
+            self._style['grid-template-columns'] = columns

website/documentation/content/grid_documentation.py

@@ -16,6 +16,23 @@ def main_demo() -> None:
         ui.label('1.80m')
 
 
+@doc.demo('Custom grid layout', '''
+    This demo shows how to create a custom grid layout passing a string with the grid-template-columns CSS property.
+    You can use any valid CSS dimensions, such as 'auto', '1fr', '80px', etc.
+          
+    - 'auto' will make the column as wide as its content.
+    - '1fr' or '2fr' will make the corresponding columns fill the remaining space, with fractions in a 1:2 ratio.
+    - '80px' will make the column 80 pixels wide.
+''')
+def custom_demo() -> None:
+    with ui.grid(columns='auto 80px 1fr 2fr').classes('w-full gap-0'):
+        for _ in range(3):
+            ui.label('auto').classes('border p-1')
+            ui.label('80px').classes('border p-1')
+            ui.label('1fr').classes('border p-1')
+            ui.label('2fr').classes('border p-1')
+
+
 @doc.demo('Cells spanning multiple columns', '''
     This demo shows how to span cells over multiple columns.