what should I use to create a grid layout?

[imir-hoxha]

I would like to build a layout: header, body and footer. Do I have to use grid from fabric ui, stack or whatever?
What is the best way? I am creating a new application.

[spmonahan]

Hi @imir-hoxha,

Fluent UI v8 and v9 do not offer a Grid component and while v8 provides a Stack component v9 will not.

For layout in modern web browsers I recommend you use CSS grid and Flexbox. Based on the layout you described I'd use CSS grid to define the header, body and footer areas.

Grid by Example is a site that can help you get started with CSS grid if you're unfamiliar with it.

[Ashilex]

Hi, I am also interested to this topic.

We are migrating to v9 from v8. And now we are trying to understand what's the best approach to layout things.
From what I read on docs and your answer I'd say best option is to place inside makestyles objects plain flex and grid css properties.

Can another approach be to use css classes from node_modules/@fluentui/react/dist/css/fabric.css like ms-Grid-row , ms-Grid-col, ms-sm8 and so one to layout our structure?

an example in attached image

Thank you in advance!!

[spmonahan]

I would avoid using the ms-Grid-* classes when migrating to v9 as those are not part of Fluent v9 and as such are not tested as part of Fluent v9's test suite. I don't see any reason these classes would stop working or have problems with v9 but I think you'll be better served by adopting CSS grid and/or flexbox.

The are a few nice aspects of CSS grid and flexbox when compared to float layouts (ms-Grid uses float):

1. They tend to require less CSS to achieve that same results
2. They tend to more robustly handle text wrapping in grid cells and RTL/LTR
3. They need fewer HTML elements for equivalent layouts, making code cleaner and apps faster.

[Ashilex]

Thank you very much for your answer! We will take a more conscious decision now :)

[mark-wiemer]

@spmonahan any chance of updating the docs/react.fluentui.dev site to clarify this? I spent a long time looking there for clarity on "idiomatic Fluent styling patterns" for v9 as my teams and I have gotten used to Stack and Flex over the years, it took a while to think to look at the GitHub discussions for the repo. The only info there is that Stack was removed and Flex has a shim. The linked roadmap doesn't include anything about Stack or Flex, so no luck there either.

[spmonahan]

Sure, I'm open to this. What do you propose we add though? As it stands Fluent v9 doesn't support (and there are no plans to) layouts so I don't think it makes sense to document these things since the library does not have opinions about them. That said, clearly there are questions about this so some sort of resource makes sense.

[mark-wiemer]

I would add something to the Stack migration and Flex migration documentation clarifying "Fluent v9 will not have layout components by design. Instead we recommend using native CSS via Griffel, our CSS-in-JS engine." When I read the docs and saw the Griffel code I thought "neat, but will this be replaced with a layout component?" Same for Flex, it says there is a migration shim but there isn't clarity on the long-term goal for whether Flex will be replaced by some other layout component in v9.

[RudyCo]

The documentation is not clear enough. Even on the officiel Flluent 2 web site we can read : "Fluent’s layout system defines how our apps use space to create relationships between components" (https://fluent2.microsoft.design/layout) but there is no more information about how to create a decent layout with Fluent UI.

[mark-wiemer]

@spmonahan is the doc site open-source as well? I'd be happy to open a PR

[martinguenther]

I was looking for how to migrate Stack and StackItem on https://react.fluentui.dev/?path=/docs/concepts-migration-from-v8-components-flex-stack--page, which currently states

Stack's approach to layout is slightly different from Northstar's Flex, and CSS Flexbox, and a column layout is the default arrangement. For a clean usage scenario of Stack, these are the required CSS properties to achieve the same result

and goes on to show some code samples.

That v9 will not provide Stack and StackItem components was only clear after I found this discussion. Maybe I am just blinded by the fact, that we made intense use of Stack and StackItem and my mind therefore did not want to accept it at first :-).

As at least some people have stumbled across this, more clarity should be an improvement, imho. I therefore suggest adding a clarifying statement, like suggested by @mark-wiemer.