Grid configuration

gbenj

Hello,
I'm new on Silex (and on web…)
'd like to use the grid layout, and can select it in the General > Display section but where can I then configure the grid layout ? (row/columns, size of blocs in grid, etc)
Thanks !

chris

Hi gbenj, welcome to Silex!

Grid layout is available in the Display dropdown, but the detailed grid configuration options (grid-template-columns, grid-template-rows, gap, etc.) may not be fully exposed in the UI yet. @ceubri @Jeaan-phi can you confirm?

In the meantime, Flex layout works well and gives you good control over rows/columns — you can set it on a container and use flex-direction, gap, and flex-wrap to organize child elements.

If Grid configuration is something you need, I'd suggest creating a Feature Request post here on the forum so it can be tracked on the roadmap.

If you're new to CSS layouts, this is a good reference for Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Let us know how it goes!

ceubri

Exactly chris

gbenj

Hi,
Thanks for your replies. Indeed, I've considered flex layout, but in one of the blocks, I want to put a vis timeline, which seems to not render when included in a flex layout… That's why I came to grid option.
I will check anyway in the css-trick link you shared, thanks.
Maybe I can prepared that page outside of silex and input them as custom code.
Or if you think of an alternative to flex and grid, which is available in the UI, I'll check that also !

Thanks!

chris

Hi gbenj,

Good news — you can use CSS Grid with custom CSS. Go to the site settings > Code section and add your grid styles there.

Documentation: https://docs.silex.me/en/user/settings#code-settings

For example:

.your-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

If you'd like native grid support in the Silex UI (without custom CSS), let's discuss how it could work in this thread first. Then you can submit it on the roadmap at https://roadmap.silex.me/ — with clear details on the UX, it could be implemented quickly.

gbenj

Hi chris ,

Thanks for the ressource, advice and example. I'll do that with my custom code.
If native support should be implemented, maybe a submenu in the style panel, as it is available for the flex layout, would be nice (eg. specify either a generic size for all grid elements like with repeat(…), or specify for any element the targeted size ; specify behaviour between device sizes).
For this projet, I'll stay with custom code, but if you think that native grid support would be interesting for other people, I could submit it on the roadmap.

chris

Glad custom CSS works for you! Please do submit a feature request here: https://roadmap.silex.me/ — your details would really help us prioritize it.

lexoyo

Hey @gbenj
We can talk about the UX maybe?
And then a feature request would be great

gbenj

Hello @chris @gbenj
Sorry, I did not activate notifications for replies (done now) and did not see your answers before.
Ok, regarding UX, I'm not an expert at all, but when choosing "flex" in the General > Display dropdown, a new Flex section appears in the options. Maybe could be nice to have the same behaviour when choosing "grid" ?
I guess that some configurations can be done at the main div level (the one containing the sub elements to be gridded), but also maybe for each element? If so, then some options could be available at element level, to specify how the element is placed into the grid?
(I'm very new to html/css stuff, so maybe that's not relevant at all…)

(If preferable, as I'm french, discussions can be done in french. Up to you)

lexoyo

Hey @gbenj

Thanks, this is great feedback - your idea is very clear 👍

Could you add it as a feature request on the roadmap with these details? That would be perfect for us to track and prioritize it

And we can switch to French if you prefer, no problem 🙂