Is there a way to differentiate between one column and three column?

Question

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?

Thanks.

Answer 1

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.

Example:

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>
          </div>
        </div>
      </div>
    </div>`;
}

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

---

Additional:

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

Answer 2

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.