Grid
<gcds-grid>

Also called: layout, columns, columns layout, grid container.

A grid is a responsive, flexible column layout to position elements on a page.

• GitHub
• Figma

Build a grid

Use grids to create flexible and responsive layouts for various screen sizes. The grid component uses CSS grid to allow for more complex layouts.

Code and accessibility for grids

Adjust layouts to optimize the experience on different screen sizes

• Optimize each grid component for the different screen sizes a person will use — or switch between — when they visit your site or use your product.
• Adapt for mobile, tablet, and large screens by defining each viewport layout for that grid component.
  • Smaller screens, like mobile devices, typically display a single column layout.
  • Medium-sized screens, like tablets, a single or 2-column layout.
  • Larger screens, like desktop, a 3- or 4- column layout.
• Use the columns property to add your layout for smaller screens or if you are using the same layout for all screens.
• Use the columns-tablet property to set your tablet layout (48em and 768px and above) or if you are using the same layout for medium and large screens.
• Use the columns-desktop property to define your layout for larger screens (64em and 1024px and above).

Tip: Keep layouts simple. Consider optimizing each layout for mobile, tablet, and desktop to provide a better user experience for all viewports.

Maintain standard tag usage to be accessible

By default, the tag property is set to use a div tag.

• Opt to change the tag to a context-appropriate value using standard tags. For example, when using an unordered list set the tag property to ul.
• Choose a tag from the list of available options for grid in the code builder. Using established standards for HTML tags that are semantic increase the accessibility of the content and improves the experience for everyone.

Add spacing between columns

• Use the gap property to add spacing between your columns in the grid.
• Use GC Design System design tokens as a reference for the size of the gap in the grid. The tokens measurements match up with the spacing values for the gap attribute (150-800).

Choose an option for equal width columns

Opt out of setting the minimum and maximum width when you want to design equal-width columns without width restrictions. This will allow the grid and its columns to scale to the size of the viewport.

Example displaying 3 columns for desktop, 2 columns for tablet, and 1 column for mobile:

Desktop

Tablet

Mobile

Set the minimum and maximum width to design equal-width columns with restrictions to limit how wide they will span on any screen size.

• Set a minimum width when you want to prevent a column from being too narrow in smaller viewports.
• Set a maximum width when you want to prevent a column from being too wide in larger viewports.

Example uses equal-width columns with a minimum width of 6.25rem (100px) and a maximum width of 18.75rem (300px) for all screen sizes:

Desktop

Tablet

Mobile

Get your code

Generate an instance of the component you need by selecting its code properties.

1. Explore by choosing different code values to generate the instance you want.

2. Get the code and pull it into your environment.

3. Add any copy you need to the component (like text for a label).

Note: The code builder uses English for all code elements, which follows standard practice.