How to use flexible sections in SharePoint pages.docx

Discover how to design modern and dynamic SharePoint pages using the new Flexible Section layout with this detailed, easy-to-follow guide. Flexible sections are one of the most powerful additions to SharePoint page design, giving creators the freedom to move, resize, overlap, and group web parts anywhere within a two-dimensional grid — no coding required. This pin walks you through every step of using flexible sections to create stunning, responsive page layouts that adapt perfectly to desktop and mobile devices.

You’ll learn how to add a flexible section to your SharePoint page through the Section toolbox, explore its unique 12-cell grid system, and understand how grid alignment helps you design balanced layouts. The guide also explains how to add and move web parts within flexible sections using drag-and-drop functionality, duplicate content, or leverage the Toolbox pane to insert new elements seamlessly.

Next, it dives into resizing and overlapping web parts for fully customized layouts. You’ll see how different web parts—such as Text, Image, Quick Links, and People—respond to resizing, including their minimum and maximum width limits. Resize hints make it easy to create polished, well-structured designs while maintaining consistency across your SharePoint pages.

The guide also covers how to adjust section height and provides tips for organizing multiple elements in one area. You’ll discover how to arrange, layer, and group web parts to create interactive visual compositions, and how to ungroup them when you want more flexibility. These features empower designers to build engaging content layouts that are both functional and visually appealing.

For mobile optimization, the pin highlights how reordering web parts enhances usability on smaller screens. The Section Properties pane allows you to prioritize layout order from top-to-bottom or left-to-right, ensuring content appears logically for mobile users. It also clarifies that overlapping designs don’t carry over to mobile — instead, SharePoint automatically stacks elements vertically for readability, keeping your site user-friendly across all devices.

You’ll also see simple design examples that show how flexible sections can be used to build creative and responsive SharePoint pages tailored to your organization’s needs.

By the end of this guide, you’ll understand how to leverage SharePoint’s flexible sections to create dynamic, professional layouts that elevate the look and functionality of your intranet. These tools make it easier than ever to organize content, improve navigation, and deliver an exceptional user experience.

Transform your SharePoint pages today — and discover how flexible sections can help you design an engaging, modern, and mobile-ready digital workspace.

1. How to use flexible sections in
SharePoint pages: A Simple Guide
SharePoint Services
Introduction
SharePoint introduced flexible layout section, within the flexible
section we can move the webpart anywhere on the two-
dimensional grid, resizing, over lapping and grouping the
webparts, this guide covers how to use flexible sections in
SharePoint, from adding web parts to customizing layouts for
mobile views.
How to add flexible section in SharePoint Page
Just like adding other sections, click the Section button. This will
open the Section toolbox. In the toolbox, you will see the Flexible
Section listed first. Click on Flexible to add a Flexible Section to your
page.

2. How to add web parts inflexible sections
After adding a Flexible Section to your page, web parts cannot
be added directly. Instead, you need to drag them from one of
the Column Layouts into the Flexible Section, duplicate an
existing web part, or use the Toolbox pane. The Toolbox pane,
located on the right side, allows you to easily add web parts by
clicking or using the drag-and-drop feature into the Flexible
Section.

3. The Flexible Section contains a 12-cell,two-dimensional grid.
We can move web parts anywhere within this grid.
When dragging and dropping a web part, grid lines will
appear to help with alignment. The web part's top-left corner
will automatically align with the nearest border.
How to Resize Web Parts
We can easily resize web parts using the resize handles, which
are located at the center of the left and right borders of the
web part. Simply drag the handles to increase or decrease the
size of the web part within the Flexible Section. Additionally,
web parts can be overlapped within Flexible Sections for a
more customized layout.

4. Web part resizing options vary depending on the type of web
part. Web parts such as Text and Image can be resized to any
widths. Other web parts, like Quick Links and People, have a
default minimum width of four grid columns and a maximum
width of eight grid columns. Similarly, custom web parts added
within the Flexible Section follow the same default resizing
limits, with a minimum width of four grid columns and a
maximum of eight. Resize hints will appear while adjusting the
web part size.

5. How to Resize Flexible Sections
To adjust the height of the Flexible Section, Click on the section to
see the section resize handles located at the bottom. If you need

6. more space to add web parts within the Flexible Section, simply drag
the resize handles to adjust the section's height as needed.
How to Arrange and Group Web Parts
If web parts overlap within the Flexible Section, we can easily
arrange them. In the web part toolbar, click on the Arrange
Item icon from the dropdown to reposition the web parts,
adjusting which one appears in front and which one appears in
the back.
We can also group web parts within the Flexible Section. To do
this, click on the first web part you want to group, then hold

7. down the Ctrl key (Windows) or Option key (Mac) and select
the other web parts you want to include. Once all the desired
web parts are selected, click on the Arrange Items icon, then
choose Group from the dropdown to group them together.
Now, you can move the entire group by dragging it anywhere
within the Flexible Section.
To ungroup a web part, select Ungroup from the dropdown to
separate the web parts.

8. Want Pages That Wow? Discover how we use SharePoint flexible
layouts for engaging intranet designs.
Book a Design Consultation
How to Reorder on mobile
Reordering is only available in the Flexible Section layout. This
feature allows you to arrange web parts specifically for mobile
devices, ensuring a better user experience on smaller screens.
In the Section Properties pane, you can choose to prioritize
web parts from top to bottom or from left to right,
depending on the desired layout.

9. The Flexible Section layout allows for customizable
positioning of web parts. The image below is an example of
how it appears when viewed on a desktop.
When viewing this page in mobile view, the layout will adjust
and be displayed as shown in the image below.

10. Overlapped web parts do not work on mobile devices. Since
mobile layouts follow a single-column structure, overlapping
elements are automatically stacked vertically to ensure proper
readability and responsiveness.
If overlapping is needed on mobile devices, consider
using custom styling or adjusting the mobile layout
separately to achieve a similar visual effect.
Simple Design Example

11. Here is a sample design. Using the Flexible Section, we can
customize and create your own design.
Conclusion
The Flexible Section layout in SharePoint provides
a customizable way to design pages. With features like resizing
web parts, overlapping elements, arranging and grouping web
parts. It enables users to create dynamic and flexible designs,
allowing them to showcase their creativity and achieve the desired
layout. This flexibility enhances content organization and improves
the overall user experience. Additionally, the Reorder on
Mobile option ensures an optimized display on smaller screens. By
leveraging these features, users can customize their SharePoint
pages to meet specific design and functionality needs.
Transform Your SharePoint Experience Today!
Talk to Our SharePoint Consultant