Width of columns in grid

[dofdary]

Question

Hello,

Is is possible to have a ui.grid where the columns doesn't have the same width ?

I want to put a very small icon in the first columns, and a link on the last column. I would like the link to not wrap if possible.

I read everything on here, and tried to set the corresponding classes to my elements but did not succeed : https://quasar.dev/layout/grid/row#setting-one-column-width

What I have now:

from nicegui import ui

@ui.page("/")
def index():
    with ui.element().classes("bg-grey").style("width: 800px"):
        with ui.grid(columns=5).classes("w-full justify-around no-wrap"):
            for _ in range(4):
                ui.icon("visibility")
            ui.link("https://quasar.dev/layout/grid/row#setting-one-column-width").classes("col-6")


if __name__ == "__main__":
    ui.run(
        host="0.0.0.0",
        port=8080,
        show=False,
        reload=False,
    )

Result:

I would like the column containing the link to take as much space as possible, and the columns containing the icons to be smaller.
I also want the row to take all the space available

Note that there will only be one row in my grid. I'm using grid because in the doc of quasar they say that it's preferable to use grid

[falkoschindler]

Hi @dofdary!

You can define the column template yourself with custom widths:

with ui.grid().classes("w-full").style("grid-template-columns: auto auto auto auto 1fr"):
    for _ in range(4):
        ui.icon("visibility")
    ui.link("https://quasar.dev/layout/grid/row#setting-one-column-width")

• auto: This value makes the column only as wide as the content inside it. If you specify this value for the first 4 columns, they will each take up only as much space as they need.
• 1fr: This value distributes container space proportionally. So, if you use 1fr for the last column, it will take up any remaining space in the grid container.

But you can also use a ui.row:

with ui.row().classes("w-full"):
    for _ in range(4):
        ui.icon("visibility")
    ui.link("https://quasar.dev/layout/grid/row#setting-one-column-width").classes("flex-grow")

[dofdary]

Thank you this is awesome, I used the two solutions in two different parts of my project