---
title: "Core — grid-parent"
canonical: https://sky-ui.cf.sky.com/core/system/grid-parent
---

# Core — grid-parent

Applying the `grid-parent` system modifier to your component will allow consumers of your component to pass in the following props:

| Property | Type | Description |
| --- | --- | --- |
| `$gap` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) | Applies gap (grid-gap) styles to the element |
| `$columnGap` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) | Applies column-gap (grid-column-gap) styles to the element |
| `$rowGap` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) | Applies row-gap (grid-row-gap) styles to the element |
| `$gridTemplateAreas` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) | Applies gridTemplateAreas styles to the element |
| `$gridTemplateColumns` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) | Applies gridTemplateColumns styles to the element |
| `$gridTemplateRows` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) | Applies grid-template-rows styles to the element |
| `$gridAutoFlow` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) | Applies grid-auto-flow styles to the element |
| `$justifyItems` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) | Applies justify-items styles to the element |
| `$justifyContent` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) | Applies justify-content styles to the element |
| `$alignItems` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | Applies align-items styles to the element |
| `$alignContent` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) | Applies align-content styles to the element |