Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Show navigation section

Layout grid

Guidance Code Accessibility

Component demo

Interactive example

Grid item 1
Grid item 2
Grid item 3
Grid item 4
Web component React
StackBlitz
Show full code 
<ic-layout-gridcolumns="2"style="border:1px dashed var(--ic-architectural-500);">
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 1
</div>
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 2
</div>
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 3
</div>
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 4
</div>
</ic-layout-grid>

Layout grid details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name Description Default
Property aligned
Attribute aligned

The alignment of the grid.

type: IcAlignment - "center" | "full-width" | "left" | undefined
"left"
Property columns
Attribute columns

The number of columns in the grid. This can be a number or an object specifying different values for each breakpoint.

type: IcGridBreakpoints - number | undefined | { xs?: number | undefined; sm?: number | undefined; md?: number | undefined; lg?: number | undefined; xl?: number | undefined; }
Property defaultColSpan
Attribute default-col-span

The default column span for grid items.

type: IcGridBreakpoints - number | undefined | { xs?: number | undefined; sm?: number | undefined; md?: number | undefined; lg?: number | undefined; xl?: number | undefined; }
1
Property defaultColWidth
Attribute default-col-width

The default column width for grid items. This is used when the grid type is set to "fixed".

type: string - string | undefined
"64px"
Property defaultRowSpan
Attribute default-row-span

The default row span for grid items.

type: number - number | undefined
1
Property fullHeight
Attribute full-height

Iftrue , the standard vertical padding from the grid will be removed.

type: boolean - boolean | undefined
false
Property gridSpacing
Attribute grid-spacing

The space between grid items, in multiples of the base spacing unit (var(--ic-space-xs) ).

type: number - number | undefined
2
Property rows
Attribute rows

The number of rows in the grid.

type: number - number | undefined
1
Property type
Attribute type

The layout type of the grid.

type: IcGridType - "fixed" | "fluid"
"fixed"
Property aligned
Attribute aligned

The alignment of the grid.

type: IcAlignment - "center" | "full-width" | "left" | undefined
Default: "left"
Property columns
Attribute columns

The number of columns in the grid. This can be a number or an object specifying different values for each breakpoint.

type: IcGridBreakpoints - number | undefined | { xs?: number | undefined; sm?: number | undefined; md?: number | undefined; lg?: number | undefined; xl?: number | undefined; }
Property defaultColSpan
Attribute default-col-span

The default column span for grid items.

type: IcGridBreakpoints - number | undefined | { xs?: number | undefined; sm?: number | undefined; md?: number | undefined; lg?: number | undefined; xl?: number | undefined; }
Default: 1
Property defaultColWidth
Attribute default-col-width

The default column width for grid items. This is used when the grid type is set to "fixed".

type: string - string | undefined
Default: "64px"
Property defaultRowSpan
Attribute default-row-span

The default row span for grid items.

type: number - number | undefined
Default: 1
Property fullHeight
Attribute full-height

Iftrue , the standard vertical padding from the grid will be removed.

type: boolean - boolean | undefined
Default: false
Property gridSpacing
Attribute grid-spacing

The space between grid items, in multiples of the base spacing unit (var(--ic-space-xs) ).

type: number - number | undefined
Default: 2
Property rows
Attribute rows

The number of rows in the grid.

type: number - number | undefined
Default: 1
Property type
Attribute type

The layout type of the grid.

type: IcGridType - "fixed" | "fluid"
Default: "fixed"

Layout grid item details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name Description Default
Property colSpan
Attribute col-span

The number of columns the grid item should span.

type: number - number | undefined
1
Property colStart
Attribute col-start

The column the grid item should start at.

type: number - number | undefined
1
Property hideInMobileMode
Attribute hide-in-mobile-mode

Iftrue , the grid item will be hidden on smaller screens.

type: boolean - boolean | undefined
false
Property rowSpan
Attribute row-span

The number of rows the grid item should span.

type: number - number | undefined
1
Property rowStart
Attribute row-start

The row the grid item should start at.

type: number - number | undefined
1
Property colSpan
Attribute col-span

The number of columns the grid item should span.

type: number - number | undefined
Default: 1
Property colStart
Attribute col-start

The column the grid item should start at.

type: number - number | undefined
Default: 1
Property hideInMobileMode
Attribute hide-in-mobile-mode

Iftrue , the grid item will be hidden on smaller screens.

type: boolean - boolean | undefined
Default: false
Property rowSpan
Attribute row-span

The number of rows the grid item should span.

type: number - number | undefined
Default: 1
Property rowStart
Attribute row-start

The row the grid item should start at.

type: number - number | undefined
Default: 1

Variants

Aligned center

Interactive example

Grid item 1
Grid item 2
Grid item 3
Grid item 4
Web component React
StackBlitz
Show full code 
<ic-layout-gridcolumns="2"aligned="center"style="border:1px dashed var(--ic-architectural-500);">
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 1
</div>
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 2
</div>
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 3
</div>
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 4
</div>
</ic-layout-grid>

Aligned full width

Interactive example

Grid item 1
Grid item 2
Grid item 3
Grid item 4
Web component React
StackBlitz
Show full code 
<ic-layout-gridcolumns="2"aligned="full-width"style="border:1px dashed var(--ic-architectural-500);">
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 1
</div>
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 2
</div>
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 3
</div>
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 4
</div>
</ic-layout-grid>

Full height

Interactive example

Grid item 1
Grid item 2
Grid item 3
Grid item 4
Web component React
StackBlitz
Show full code 
<ic-layout-gridcolumns="2"full-height="true"style="border:1px dashed var(--ic-architectural-500);">
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 1
</div>
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 2
</div>
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 3
</div>
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 4
</div>
</ic-layout-grid>

Column object

Interactive example

Grid item 1
Grid item 2
Grid item 3
Grid item 4
Web component React
StackBlitz
Show full code 
<ic-layout-gridstyle="border:1px dashed var(--ic-architectural-500);">
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 1
</div>
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 2
</div>
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 3
</div>
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 4
</div>
</ic-layout-grid>
<script>
    const grid = document.querySelector("ic-layout-grid");
    grid.columns = { xs: 1, sm: 2, md: 4, lg: 4, xl: 6 };
</script>

Default column width

Interactive example

Grid item 1
Grid item 2
Grid item 3
Grid item 4
Web component React
StackBlitz
Show full code 
<ic-layout-gridcolumns="2"default-col-width="100px"style="border:1px dashed var(--ic-architectural-500);">
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 1
</div>
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 2
</div>
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 3
</div>
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 4
</div>
</ic-layout-grid>

Layout grid item

Interactive example

Grid item 1
Grid item 2
Grid item 3
Grid item 4
Grid item 5
Web component React
StackBlitz
Show full code 
<ic-layout-gridcolumns="3"style="border:1px dashed var(--ic-architectural-500);">
<ic-layout-grid-item
col-start="2"
col-span="2"
row-start="2"
row-span="2"
>
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
            Grid item 1
</div>
</ic-layout-grid-item>
<ic-layout-grid-itemhide-in-mobile-mode="true">
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
            Grid item 2
</div>
</ic-layout-grid-item>
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 3
</div>
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 4
</div>
<divstyle="width:50px;height:50px;border:1px solid var(--ic-color-text-primary);color:var(--ic-color-text-primary);">
        Grid item 5
</div>
</ic-layout-grid>
Last reviewed 20 August 2025 .
Accessibility Statement Privacy Policy Cookies and Storage Policy Versions
Go to S.I.S. website Go to MI5 website Go to GCHQ website Go to HMGCC website
Navigated to Layout grid - Intelligence Community Design System