Grid

In progress

For the moment a very basic grid is provided.

# Examples

<hy-grid-container>
  <hy-grid-row>
    <hy-grid-item columns="6" columnsSm="12" columnsLg="4" contentAlign="left"></hy-grid-item>
  </hy-grid-row>
</hy-grid-container>

# Grid example

Content aligned to left Content aligned to center Content aligned to right Content aligned to left Content aligned to right Content aligned to center Content aligned to left Content aligned center Content aligned to left
<style lang="scss">
.hy-example-grid {
  hy-grid-item {
    background-color: var(--grayscale-medium-dark);
    color: var(--grayscale-white);

    &:nth-child(even) {
      background-color: var(--grayscale-medium);
    }
  }
}
</style>

<hy-docs-container>
<hy-grid-container class="hy-example-grid">          
<hy-grid-row>
<hy-grid-item columns="6" columnsSm="12" columnsLg="4" contentAlign="left">
  <hy-tiny-text>Content aligned to left</hy-tiny-text>
</hy-grid-item>
<hy-grid-item columns="6" columnsSm="12" columnsLg="4" contentAlign="center">
  <hy-tiny-text>Content aligned to center</hy-tiny-text>
</hy-grid-item>
<hy-grid-item columns="6" columnsSm="12" columnsLg="4" contentAlign="right">
  <hy-tiny-text>Content aligned to right</hy-tiny-text>
</hy-grid-item>
<hy-grid-item columns="6" columnsSm="12" columnsLg="4" contentAlign="left">
  <hy-tiny-text>Content aligned to left</hy-tiny-text>
</hy-grid-item>
<hy-grid-item columns="6" columnsSm="12" columnsLg="4" contentAlign="right">
  <hy-tiny-text>Content aligned to right</hy-tiny-text>
</hy-grid-item>
<hy-grid-item columns="6" columnsSm="12" columnsLg="4" contentAlign="center">
  <hy-tiny-text>Content aligned to center</hy-tiny-text>
</hy-grid-item>
<hy-grid-item columns="6" columnsSm="12" columnsLg="4" contentAlign="left">
  <hy-tiny-text>Content aligned to left</hy-tiny-text>
</hy-grid-item>
<hy-grid-item columns="6" columnsSm="12" columnsLg="4" contentAlign="center">
  <hy-tiny-text>Content aligned center</hy-tiny-text>
</hy-grid-item>
<hy-grid-item columns="6" columnsSm="12" columnsLg="4" contentAlign="left">
  <hy-tiny-text>Content aligned to left</hy-tiny-text>
</hy-grid-item>
</hy-grid-row>
</hy-grid-container>
</hy-docs-container>

Helsinki University Design System

← Heading →