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

On this page

• Coding and accessibility for grids
• Examples
• Code builder

Coding 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

In this section

• Optional attributes
• Slots

align-content

The align-content attribute sets the alignment of the grid along the block (column) axis when the total grid size is less than the size of its grid container. The available options are:

• center
• end
• space-around
• space-between
• space-evenly
• start
• stretch

<gcds-grid align-content="space-between" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</gcds-grid>

align-items

The align-items attribute sets the alignment of grid items along the block (column) axis. The available options are:

• baseline
• center
• end
• start
• stretch

<gcds-grid align-items="baseline" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p class="pb-800">2</p>
  <p class="pt-900">3</p>
</gcds-grid>

alignment

The alignment attribute sets the grid’s alignment if the grid container’s size is smaller than the parent’s size. The available options are:

• center
• end
• start

<gcds-grid alignment="end" container="sm" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</gcds-grid>

columns

The columns attribute defines the default number of grid columns for all viewports if columns-tablet and columns-desktop are not defined. Option to set different layouts for desktop with columns-desktop and for tablet with columns-tablet.

<gcds-grid columns="1fr 1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</gcds-grid>

columns-desktop

The columns-desktop attribute provides the option to set a different number of grid columns for desktop screens.

<gcds-grid columns-desktop="1fr 1fr 1fr" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</gcds-grid>

columns-tablet

The columns-tablet attribute provides the option to set a different number of grid columns for tablet screens. If columns-desktop is not defined, columns-tablet will be used to define the number of columns for desktop as well.

<gcds-grid columns-tablet="1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</gcds-grid>

container

The container attribute defines the grid container size. The available options are:

• full
• xl
• lg
• md
• sm
• xs

<gcds-grid container="sm" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</gcds-grid>

display

The display attribute defines the element as a grid or inline-grid container. The available options are:

• grid (default)
• inline-grid

<gcds-grid display="inline-grid" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</gcds-grid>

gap

The gap attribute defines the horizontal and vertical spacing between items in a grid container for all viewports if gap-tablet and gap-desktop are not defined. Option to set different spacing for desktop with gap-desktop and for tablet with gap-tablet.

<gcds-grid gap="450" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</gcds-grid>

gap-desktop

The gap-desktop attribute provides the option to set horizontal and vertical spacing between items in a grid container for desktop screens.

<gcds-grid gap-desktop="800" gap="400" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</gcds-grid>

gap-tablet

The gap-tablet attribute provides the option to set horizontal and vertical spacing between items in a grid container for tablet screens. If gap-desktop is not defined, gap-tablet will be used to define the spacing for desktop screens as well.

<gcds-grid gap-tablet="500" gap="400" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</gcds-grid>

justify-content

The justify-content attribute sets the alignment of the grid along the inline (row) axis if the total grid size is less than the size of its grid container. The available options are:

• center
• end
• space-around
• space-between
• space-evenly
• start
• stretch

<gcds-grid justify-content="center" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</gcds-grid>

justify-items

The justify-items attribute sets the alignment of the grid items along the inline (row) axis. The available options are:

• center
• end
• start
• stretch

<gcds-grid justify-items="center" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</gcds-grid>

place-content

The place-content attribute sets both the align-content and justify-content attributes. The available options are:

• center
• end
• space-around
• space-between
• space-evenly
• start
• stretch

<gcds-grid place-content="space-around" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</gcds-grid>

place-items

The place-items attribute sets both the align-items and justify-items attributes. The available options are:

• center
• end
• start
• stretch

<gcds-grid place-items="end" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</gcds-grid>

tag

The tag attribute sets the HTML element used to render the grid container. By default, it is set to div. The available options are:

• div (default)
• article
• aside
• dl
• main
• nav
• ol
• section
• ul

<gcds-grid tag="article" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</gcds-grid>

default

The default slot is for placing the grid items.

<gcds-grid columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</gcds-grid>

Code builder

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.