It is quite similar to the Bootstrap Grid layout (for those who heard about it). In this post, I will focus on the layout handling in the Office UI Fabric core. This framework comes with a lot of reusable UI components but also provide core features mainly based on CSS for the UI to be responsive and consistent in styling. It mainly relies on a UI Framework from Microsoft called Office UI Fabric, most of the current Microsoft web-based interfaces relies on this framework nowadays. With the arrival of SharePoint Modern user experience, this concept of one of the keys. Anyway, the user experience should be optimal when visiting a web page from desktop or smartphone. It means, that, its layout is intuitive and user-friendly whatever the device used to display it.ĭesktop computers, smartphones, tablets and so on, they come with various display size, ratio, resolutions, etc. In the last 10 years or so, the key when designing web pages is that they are responsive.
Let me know what kind of experiences you’ve made with either of those (or maybe even completely separate) approaches.Today, I am writing about the outcome of some research I made on how to display the content of my custom WebPart according to the layout column it is inserted in. So far I mostly used grid simply because I’m the most familiar with it, but I definitely will try to use columns more often in theįuture (and try to build designs that allow me to do that). It’s also a good choice for cases where youĭon’t want white space between multiple elements inside the same columns, so it does not look/feel like a grid - for example for a If you want to split up a paragraph into multiple columns I definitely would recommend option one.
Also grid has a lot of advanced features like sub-grid which can be used to align stuff in different columns on the same vertical level. If you have a fixed amount of elements that you want to evenly distribute into columns (and rows) and want a grid look - elements in the rows should have the same height - then You can style the elements based on container width. However, with CSS Media Queries on the horizon, this mightĪctually be a neat and certainly will bring freshness (that would not be possible with grid) to the layout if Let’s look at our last example with flex, if your design does not allow for different widths in the last row this approach might not be the best solution. Why use one option with media queries or other workarounds, if another option does the same job just as well but without Secondly, I know that some drawbacks can be patched with the proper media queries - but I was looking for a solution Ultimately it comes down to your specific If you are expecting a final Use this approach answer, I have to disappoint you. If the first row only has space for 4 elements, the fifthĮlement will be put in the second row but stretched to the entire width.Įxample image to demonstrate flex row breaking issuesĪs far as I know there is no workaround to prevent this kind of behaviour (since this is supposed how flex should work) that does not
As far as I know there is no similar thing compared to column-rule, so if something similar is needed you need to set a border on the child elements (and don’t show one on :last-child)īy the nature of flex, it will always scale to the full available width.Alias for grid-gap and is according to MDN docs also supposed to be used for flex containers ( MDN Docs)
Let’s start with this one, because it probably is the most interesting and at the same time least known version. We will touch a flex version, a grid version and a less familiar columns property of CSS. And by fully responsive I mean a layout that is responsive without the necessity to specify In this short tutorial I want to demonstrate three different ways how to achieve a fully responsive column layout with