Create responsive layout grids for Figma file

[itsmylam]

Overview

Currently, the style guide doesn't have responsive layout grids.

Action Items

• Create layout grids for mobile, tablet, and desktop of multiple sizes.
• Review with design team
• Finalize and add to the Design System file

Figma File
https://www.figma.com/file/9hPmNSsyaH2VMGNz5mffmI/FOLA-Design-%232?type=design&node-id=3992-4722&t=qV2p6UztvLtMRcfz-0

[staceyrebekahscott]

@itsmylam Moving this to Prioritized Backlog.

@jnaito777 @nkiwan This has a label of Feature: Design System, for you to assess where it fits in to the Design System Planning process. Linking Issue #1204 Design System Update.

[fancyham]

A grid like this might be particularly useful on the org details screens (currently we have a lot of flush left and right, but that leaves odd gaps)

For the static screens, would also be useful to define how the page adapts between mobile and larger screens.

[sei1122]

Final
https://www.figma.com/file/9hPmNSsyaH2VMGNz5mffmI/FOLA-Design-%232?type=design&node-id=640%3A119&mode=design&t=3XP04rwhE75ceF7p-1

Created Fluid Grid and Fixed Grid.

• Fluid grid is used for full width
• Fixed Grid is used for static pages. The max width is 1200 px and if the screen size is over 1200 px, content stays on the 1200 px size.