1.13.96 • Published 2 years ago
@myntra/uikit-component-grid v1.13.96
import Grid from './src/grid'
export const _styles = (function () {
// Add some styles for showing grid column examples.
if (document.querySelector('#grid-example-override')) return
const style = document.createElement('style')
style.id = 'grid-example-override'
style.textContent = .grid-example .u-grid-column > div {
box-sizing: border-box;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
text-align: center;
background: #efefef;
border: 1px solid #ccc;
}
document.head.appendChild(style)
})();
Grid
Examples
Sizes
Common sizes:
<div className="grid-example">
<Grid>
<Grid.Column size="full">
<div>full</div>
</Grid.Column>
</Grid>
<Grid>
<Grid.Column size="three-quarters">
<div>three-fourths</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
<Grid>
<Grid.Column size="two-thirds">
<div>two-third</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
<Grid>
<Grid.Column size="half">
<div>half</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
<Grid>
<Grid.Column size="one-third">
<div>one-third</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
<Grid>
<Grid.Column size="one-quarter">
<div>one-quarter</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
</div>Divided in five:
<div className="grid-example">
<Grid>
<Grid.Column size="full">
<div>full</div>
</Grid.Column>
</Grid>
<Grid>
<Grid.Column size="four-fifth">
<div>four-fifth</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
<Grid>
<Grid.Column size="three-fifth">
<div>three-fifth</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
<Grid>
<Grid.Column size="two-fifth">
<div>two-fifth</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
<Grid>
<Grid.Column size="one-fifth">
<div>one-fifth</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
</div>12 column grid:
<div className="grid-example">
<Grid>
<Grid.Column size={12}>
<div>12</div>
</Grid.Column>
</Grid>
<Grid>
<Grid.Column size={11}>
<div>11</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
<Grid>
<Grid.Column size={10}>
<div>10</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
<Grid>
<Grid.Column size={9}>
<div>9</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
<Grid>
<Grid.Column size={8}>
<div>8</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
<Grid>
<Grid.Column size={7}>
<div>7</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
<Grid>
<Grid.Column size={6}>
<div>6</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
<Grid>
<Grid.Column size={5}>
<div>5</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
<Grid>
<Grid.Column size={4}>
<div>4</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
<Grid>
<Grid.Column size={3}>
<div>3</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
<Grid>
<Grid.Column size={2}>
<div>2</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
<Grid>
<Grid.Column size={1}>
<div>1</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
</div>Multi-line Grid
<div className="grid-example">
<Grid multiline>
<Grid.Column size={6}>
<div>6</div>
</Grid.Column>
<Grid.Column size={4}>
<div>4</div>
</Grid.Column>
<Grid.Column size={4}>
<div>4</div>
</Grid.Column>
<Grid.Column size={2}>
<div>2</div>
</Grid.Column>
<Grid.Column size={6}>
<div>6</div>
</Grid.Column>
</Grid>
</div>Offset
<div className="grid-example">
<Grid multiline>
<Grid.Column size="full">
<div>full</div>
</Grid.Column>
<Grid.Column size="three-quarters" offset="one-quarter">
<div>three-quarters</div>
</Grid.Column>
<Grid.Column size="two-thirds" offset="one-third">
<div>two-thirds</div>
</Grid.Column>
<Grid.Column size="half" offset="half">
<div>half</div>
</Grid.Column>
<Grid.Column size="one-third" offset="two-thirds">
<div>one-third</div>
</Grid.Column>
<Grid.Column size="one-quarter" offset="three-quarters">
<div>one-quarter</div>
</Grid.Column>
</Grid>
</div><div className="grid-example">
<Grid multiline>
<Grid.Column size={12}>
<div>12</div>
</Grid.Column>
<Grid.Column size={11} offset={1}>
<div>11</div>
</Grid.Column>
<Grid.Column size={10} offset={2}>
<div>10</div>
</Grid.Column>
<Grid.Column size={9} offset={3}>
<div>9</div>
</Grid.Column>
<Grid.Column size={8} offset={4}>
<div>8</div>
</Grid.Column>
<Grid.Column size={7} offset={5}>
<div>7</div>
</Grid.Column>
<Grid.Column size={6} offset={6}>
<div>6</div>
</Grid.Column>
<Grid.Column size={5} offset={7}>
<div>5</div>
</Grid.Column>
<Grid.Column size={4} offset={8}>
<div>4</div>
</Grid.Column>
<Grid.Column size={3} offset={9}>
<div>3</div>
</Grid.Column>
<Grid.Column size={2} offset={10}>
<div>2</div>
</Grid.Column>
<Grid.Column size={1} offset={11}>
<div>1</div>
</Grid.Column>
</Grid>
</div>Column Gap
Default:
<div className="grid-example">
<Grid multiline>
<Grid.Column size={6}>
<div>6</div>
</Grid.Column>
<Grid.Column size={4}>
<div>4</div>
</Grid.Column>
<Grid.Column size={2}>
<div>2</div>
</Grid.Column>
<Grid.Column size={4}>
<div>4</div>
</Grid.Column>
<Grid.Column size={2}>
<div>2</div>
</Grid.Column>
<Grid.Column size={6}>
<div>6</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
</div>Gapless:
<div className="grid-example">
<Grid multiline gapless>
<Grid.Column size={6}>
<div>6</div>
</Grid.Column>
<Grid.Column size={4}>
<div>4</div>
</Grid.Column>
<Grid.Column size={2}>
<div>2</div>
</Grid.Column>
<Grid.Column size={4}>
<div>4</div>
</Grid.Column>
<Grid.Column size={2}>
<div>2</div>
</Grid.Column>
<Grid.Column size={6}>
<div>6</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
</div>Custom Gap:
<div className="grid-example">
<Grid multiline gap="xx-small">
<Grid.Column size={6}>
<div>6</div>
</Grid.Column>
<Grid.Column size={4}>
<div>4</div>
</Grid.Column>
<Grid.Column size={2}>
<div>2</div>
</Grid.Column>
<Grid.Column size={4}>
<div>4</div>
</Grid.Column>
<Grid.Column size={2}>
<div>2</div>
</Grid.Column>
<Grid.Column size={6}>
<div>6</div>
</Grid.Column>
<Grid.Column>
<div>-</div>
</Grid.Column>
</Grid>
</div>Sub Components
Grid.Column
<div className="grid-example">
<Grid>
<Grid.Column>
<div>-</div>
</Grid.Column>
<Grid.Column size={4}>
<div>4</div>
</Grid.Column>
</Grid>
</div>