Introducing flexible sections in SharePoint Pages and News

We are excited to share that we are releasing flexible sections in SharePoint Pages and News. This new section type will empower authors to build dynamic pages without the strict column structure. Within these sections, web parts can be moved anywhere on the 2-dimensional grid, resized, overlapped, and grouped.

Adding a flexible section to your page

When adding a section to your page, you will notice a new section type, “Flexible”, in the section toolbox.

Adding web parts to your flexible section

After adding a flexible section to your page, use the content pane Toolbox on the right side of the canvas to add web parts and media by clicking or dragging-and-dropping them into the section.

Web parts can be moved anywhere on the two-dimensional grid within flexible sections. When you move a web part using drag-and-drop, you’ll notice a drop hint appears. The top-left corner of web parts will snap to the nearest border.

When moving web parts, you will also notice alignment cues that help you align a web part to other web parts or to the middle of a section.

Resizing web parts and flexible sections

Web parts can be resized within flexible sections using the resize handles on the border of the web part. Web part size options vary by web part. Web parts such as Text and Image can be resized to most widths. Other web parts, such as People and Quick Links, have four size options. These four size options correlate to the sizes of these web parts in non-flexible sections. Custom web parts can be added to flexible sections and resized to four size options by default. When resizing web parts, you will notice resize hints.

Resize your section by using the section resize handle at the bottom right of the section. The section height will automatically grow if you add a web part to the bottom of a section when more space is needed.

Arranging and grouping web parts within flexible sections

Web parts can be overlapped within flexible sections. You can change the arrangement by using the dropdown in the web part toolbar.

Web parts can also be grouped together within flexible sections. This grouping persists across editing sessions and signifies that those web parts are related. When web parts are grouped, they reflow together in mobile view.

Changing and previewing the mobile reflow model for flexible sections

When a flexible section is viewed on mobile or in email, it is transformed into a one-column section. There are two reflow algorithms available, one that prioritizes web parts from left to right and another that prioritizes web parts from top to bottom. Within the section properties pane, you can change which reflow algorithm is used.

To preview how your flexible section looks across different device types and in email, use the Preview button in the command bar.

 

The features and capabilities mentioned in this blog post are demonstrated in the following video with Katelyn Helm (Microsoft) and Vesa Juvonen (Microsoft).

Frequently asked questions

When will this happen?

The feature has started rolling out to Targeted Release customers and will continue to roll out to all customers through the end of April 2025.

This message is associated with Microsoft Roadmap ID 395213.

Is custom web parts supported in flexible layouts?

Yes. Any custom web part build with SharePoint Framework (SPFx) is also supported within the flexible layouts. We will be also releasing first preview version of the SPFx v1.21 by end of February 2025 with additional support for flexible layout configuration in the web part manifest details.

What do you need to prepare?

There is nothing you need to do to prepare, but you can let your users know about this new experience.

What is next?

• We are planning to enable more sizing options for all web parts.
• We are considering other user customization for how flexible sections reflow in email and on smaller devices.

 

Thanks for reading. Please enjoy making beautiful, flexible pages and let us know any feedback or questions in the comments.