Page Layouts and Sections

Analogy categoryAnalogies

Every modern SharePoint page is structured as a stack of sections, and every section is subdivided into one or more columns that hold web parts. The available section layouts are One column, One column full width, Two columns, Three columns, One-third left column plus two-thirds, Two-thirds plus one-third, and a Vertical section that runs alongside the rest of the page like a sidebar.

🏏

Cricket analogy: Page sections are like innings segments in a Test match — each section is a self-contained phase (like a powerplay) with its own internal structure of overs (columns) that hold specific events.

Section Types and Column Layouts

Column width in a section is expressed as a fraction of 12 (so a 'two-thirds' column is really 8 of 12 grid units), and web parts placed in a narrower column automatically stack their internal elements vertically to remain readable, since SharePoint's canvas is responsive down to a single-column view on mobile. Choosing 'One column full width' is common for hero banner images or the Hero web part because it breaks out of the page's normal content margins edge-to-edge.

🏏

Cricket analogy: A 12-unit grid dividing into a two-thirds/one-third split is like a stadium's screen split during a rain delay — two-thirds showing replays and one-third showing the weather radar, both scaling down together if the broadcast switches to a mobile feed.

Vertical Sections and Responsive Behavior

A vertical section, added via the plus icon at the far right of a section, creates a persistent sidebar-like column that runs alongside every horizontal section above and below it on the same page — commonly used for a Quick Links or Events web part that should stay visible as the reader scrolls the main content. On mobile, the vertical section doesn't literally run alongside anything; it moves to render below all the horizontal sections, since a true side-by-side layout isn't usable on a narrow screen.

🏏

Cricket analogy: A vertical section is like a broadcast's persistent scorecard sidebar during a Test match — always visible next to the main camera feed on a TV, but on a phone app it drops below the video instead of squeezing beside it.

json

{
  "sections": [
    {
      "layout": "OneColumnFullWidth",
      "columns": [
        { "factor": 12, "webParts": ["HeroWebPart"] }
      ]
    },
    {
      "layout": "TwoThirdsOneThird",
      "columns": [
        { "factor": 8, "webParts": ["TextWebPart", "ImageWebPart"] },
        { "factor": 4, "webParts": ["QuickLinksWebPart"] }
      ]
    },
    {
      "layout": "Vertical",
      "columns": [
        { "factor": 4, "webParts": ["EventsWebPart"] }
      ]
    }
  ]
}

Section backgrounds can be set to emphasized (light gray) or a theme color via the section's 'Edit section' menu, which is a simple way to visually separate content zones without adding a full custom web part.

Only one vertical section is allowed per page, and it cannot itself contain another vertical section or a full-width section — attempting to nest incompatible layouts will simply disable the option in the section-add menu rather than showing an error.

Modern pages stack sections top to bottom, and each section divides into columns holding web parts.
Available layouts include one, two, three columns, one-third/two-thirds splits, full width, and vertical.
Column widths are fractions of a 12-unit grid (e.g., two-thirds equals 8 of 12 units).
One column full width is typically used for hero banners since it breaks the page's normal margins.
A vertical section acts as a persistent sidebar alongside horizontal sections on desktop.
On mobile, the vertical section renders below all horizontal sections instead of beside them.
Only one vertical section is permitted per page, and it can't nest another vertical or full-width section.

Practice what you learned

1. How is column width expressed in a SharePoint modern page section?

2. Which section layout is typically used for a full-bleed hero banner image?

3. How does a vertical section behave on a mobile screen?

4. How many vertical sections can a single modern page contain?

5. Where is a modern page's full section/column/web part structure stored?

Was this page helpful?

Hub Sites

Related Study Notes in Programming

Browse all study notes

Programming

Apache Spark Study Notes

Programming · 30 topics

Programming

Apache Flink Study Notes

Programming · 30 topics

Programming

Hadoop Study Notes

Programming · 30 topics

Programming

Snowflake Study Notes

Programming · 30 topics

Programming

Apache Airflow Study Notes

Programming · 30 topics

Programming

dbt (Data Build Tool) Study Notes

Programming · 30 topics

Topics covered

#Programming#SharePointStudyNotes#PageLayoutsAndSections#Page#Layouts#Sections#Section#StudyNotes#SkillVeris#ExamPrep

Page Layouts and Sections