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

# Core — grid-child

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

| Property | Type | Description |
| --- | --- | --- |
| `$gridArea` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) | Applies grid-area styles to the element |
| `$gridColumn` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column) | Applies grid-column styles to the element |
| `$gridRow` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row) | Applies grid-row styles to the element |
| `$justifySelf` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self) | Applies justify-self styles to the element |
| `$alignSelf` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) | Applies align-self styles to the element |