I need to develop an SPFx web part that can be well displayed in both one column and three columns.

How can I optimize the CSS for these two sections? Is there a fixed class in SPO that can distinguish between one column and three columns? Or is there any mention in the documentation of how to handle this situation?


enter image description here

2 Answers 2


You cannot differentiate between one column and three column directly inside the SPFx web parts.

However, you can determine the rendered size of web part inside the SPFx which you can use to optimize the content and CSS of your web part based on the rendered size.

The width property on the web part class returns the current rendered width of the web part as a number.


public render(): void {
  this.domElement.innerHTML = `
    <div class="${ styles.helloWorld }">
      <div class="${ styles.container }">
        <div class="${ styles.row }">
          <div class="${ styles.column }">
            <p class="${ styles.description }">Web Part width: ${this.width}</p>

You can also detect when the web part width changes by overriding onAfterResize method like:

protected onAfterResize(newWidth: number) {
  console.log(`the new width of the web part is ${newWidth}`);

Documentation: Determine the rendered web part size


Also, check below Microsoft documentations which might help you with your development going forward:

  1. Supporting section backgrounds
  2. Use web parts with the full-width column

In SharePoint Online, there isn't a fixed class that directly distinguishes between one column and three columns layouts. However, you can leverage SharePoint's responsive grid system and media queries to optimize the CSS for different sections.

Here are some general guidelines to help you handle this situation:

  1. Responsive CSS: Write your CSS styles in a responsive manner to adapt to different screen sizes and layouts. Use relative units (such as percentages, em, or rem) instead of fixed pixel values for better flexibility.

  2. CSS Media Queries: Utilize CSS media queries to apply specific styles based on the screen size or viewport width. You can define breakpoints and adjust the layout accordingly. For example:

    /* Styles for one column layout / @media (max-width: 767px) { / CSS rules for small screens */ }

    /* Styles for three columns layout / @media (min-width: 768px) { / CSS rules for larger screens */ }

  3. SharePoint's Responsive Grid: SharePoint's modern experience uses a responsive grid system that adapts to different screen sizes. You can utilize the built-in CSS classes such as Canvas and CanvasSection-sm12 to create responsive layouts.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.