Fluid grid - SKY UX design system

Modern visual theme

The fluid grid component provides a responsive 12-column layout to organize content for all device sizes.

Demo

 [screenSmall]="1"  [screenSmall]="1"  [screenSmall]="1"  [screenSmall]="1"  [screenSmall]="1"  [screenSmall]="1"  [screenSmall]="1"  [screenSmall]="1"  [screenSmall]="1"  [screenSmall]="1"  [screenSmall]="1"  [screenSmall]="1" 
 [screenSmall]="2"  [screenSmall]="2"  [screenSmall]="2"  [screenSmall]="2"  [screenSmall]="2"  [screenSmall]="2" 
 [screenSmall]="3"  [screenSmall]="3"  [screenSmall]="3"  [screenSmall]="3" 
 [screenSmall]="4"  [screenSmall]="4"  [screenSmall]="4" 
 [screenSmall]="5"  [screenSmall]="7" 
 [screenSmall]="6"  [screenSmall]="6" 
 [screenSmall]="8"  [screenSmall]="4" 
 [screenSmall]="9"  [screenSmall]="3" 
 [screenSmall]="10"  [screenSmall]="2" 
 [screenSmall]="11"  [screenSmall]="1" 
 [screenXSmall]="6" [screenSmall]="8" [screenMedium]="9" [screenLarge]="10"  [screenXSmall]="6" [screenSmall]="4" [screenMedium]="3" [screenLarge]="2" 
 First column  Second column  Third column 

Guidelines

Installation

Defined in: SkyFluidGridModule None found.
NPM package: @skyux/layoutView in NPM | View in GitHub None found.
Installation: npm install --save-exact @skyux/layout
None found.

Components

SkyFluidGridComponent

Wraps the fluid grid to ensure proper spacing. Without the wrapper, the alignment, padding, and margins do not behave as expected.

Selector

sky-fluid-grid

Input	Description
`disableMargin?: boolean`	Disables the outer left and right margin of the fluid grid container. Optional. Default is `false`.
`gutterSize?: SkyFluidGridGutterSizeType`	The type that defines the size of the padding between columns. Optional. Default is `"large"`.

SkyRowComponent

Displays a row within the sky-fluid-grid wrapper. Previously, you could display a row without a wrapper, but we no longer officially support that option.

Selector

sky-row

Input	Description
`reverseColumnOrder?: boolean`	Whether to reverse the display order for columns in the row. Optional. Default is `false`.

SkyColumnComponent

Displays a column within a row of the fluid grid.

Selector

sky-column

Input	Description
`screenLarge?: number`	The number of columns (1-12) on large screens (more than 1200px). If you do not specify a value, the column inherits the `screenMedium` value. Optional.
`screenMedium?: number`	The number of columns (1-12) on medium screens (992-1199px). If you do not specify a value, the column inherits the `screenSmall` value. Optional.
`screenSmall?: number`	The number of columns (1-12) on small screens (768-991px). If you do not specify a value, the column inherits the `screenXSmall` value. Optional.
`screenXSmall?: number`	The number of columns (1-12) on extra-small screens (less than 768px). If you do not specify a value, the fluid grid displays the column at the full width of the screen. Optional. Default is `12`.

Type aliases

SkyFluidGridGutterSizeType

type SkyFluidGridGutterSizeType = 'small' | 'medium' | 'large'

demo.component.ts

demo.component.html

Markup

<div class="highlight-columns">
  <sky-fluid-grid>
    <sky-row>
      <sky-column [screenSmall]="1"> [screenSmall]="1" </sky-column>
      <sky-column [screenSmall]="1"> [screenSmall]="1" </sky-column>
      <sky-column [screenSmall]="1"> [screenSmall]="1" </sky-column>
      <sky-column [screenSmall]="1"> [screenSmall]="1" </sky-column>
      <sky-column [screenSmall]="1"> [screenSmall]="1" </sky-column>
      <sky-column [screenSmall]="1"> [screenSmall]="1" </sky-column>
      <sky-column [screenSmall]="1"> [screenSmall]="1" </sky-column>
      <sky-column [screenSmall]="1"> [screenSmall]="1" </sky-column>
      <sky-column [screenSmall]="1"> [screenSmall]="1" </sky-column>
      <sky-column [screenSmall]="1"> [screenSmall]="1" </sky-column>
      <sky-column [screenSmall]="1"> [screenSmall]="1" </sky-column>
      <sky-column [screenSmall]="1"> [screenSmall]="1" </sky-column>
    </sky-row>

    <sky-row>
      <sky-column [screenSmall]="2"> [screenSmall]="2" </sky-column>
      <sky-column [screenSmall]="2"> [screenSmall]="2" </sky-column>
      <sky-column [screenSmall]="2"> [screenSmall]="2" </sky-column>
      <sky-column [screenSmall]="2"> [screenSmall]="2" </sky-column>
      <sky-column [screenSmall]="2"> [screenSmall]="2" </sky-column>
      <sky-column [screenSmall]="2"> [screenSmall]="2" </sky-column>
    </sky-row>

    <sky-row>
      <sky-column [screenSmall]="3"> [screenSmall]="3" </sky-column>
      <sky-column [screenSmall]="3"> [screenSmall]="3" </sky-column>
      <sky-column [screenSmall]="3"> [screenSmall]="3" </sky-column>
      <sky-column [screenSmall]="3"> [screenSmall]="3" </sky-column>
    </sky-row>

    <sky-row>
      <sky-column [screenSmall]="4"> [screenSmall]="4" </sky-column>
      <sky-column [screenSmall]="4"> [screenSmall]="4" </sky-column>
      <sky-column [screenSmall]="4"> [screenSmall]="4" </sky-column>
    </sky-row>

    <sky-row>
      <sky-column [screenSmall]="5"> [screenSmall]="5" </sky-column>
      <sky-column [screenSmall]="7"> [screenSmall]="7" </sky-column>
    </sky-row>

    <sky-row>
      <sky-column [screenSmall]="6"> [screenSmall]="6" </sky-column>
      <sky-column [screenSmall]="6"> [screenSmall]="6" </sky-column>
    </sky-row>

    <sky-row>
      <sky-column [screenSmall]="8"> [screenSmall]="8" </sky-column>
      <sky-column [screenSmall]="4"> [screenSmall]="4" </sky-column>
    </sky-row>

    <sky-row>
      <sky-column [screenSmall]="9"> [screenSmall]="9" </sky-column>
      <sky-column [screenSmall]="3"> [screenSmall]="3" </sky-column>
    </sky-row>

    <sky-row>
      <sky-column [screenSmall]="10"> [screenSmall]="10" </sky-column>
      <sky-column [screenSmall]="2"> [screenSmall]="2" </sky-column>
    </sky-row>

    <sky-row>
      <sky-column [screenSmall]="11"> [screenSmall]="11" </sky-column>
      <sky-column [screenSmall]="1"> [screenSmall]="1" </sky-column>
    </sky-row>

    <sky-row>
      <sky-column
        [screenXSmall]="6"
        [screenSmall]="8"
        [screenMedium]="9"
        [screenLarge]="10"
      >
        [screenXSmall]="6" [screenSmall]="8" [screenMedium]="9"
        [screenLarge]="10"
      </sky-column>
      <sky-column
        [screenXSmall]="6"
        [screenSmall]="4"
        [screenMedium]="3"
        [screenLarge]="2"
      >
        [screenXSmall]="6" [screenSmall]="4" [screenMedium]="3"
        [screenLarge]="2"
      </sky-column>
    </sky-row>

    <sky-row [reverseColumnOrder]="true">
      <sky-column [screenSmall]="4"> First column </sky-column>
      <sky-column [screenSmall]="4"> Second column </sky-column>
      <sky-column [screenSmall]="4"> Third column </sky-column>
    </sky-row>
  </sky-fluid-grid>
</div>

TypeScript

import { Component } from '@angular/core';
import { SkyFluidGridModule } from '@skyux/layout';

@Component({
  standalone: true,
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styles: [
    `
      .highlight-columns .sky-column {
        background-color: #97eced;
        border: 1px solid #56e0e1;
        overflow-wrap: break-word;
      }
    `,
  ],
  imports: [SkyFluidGridModule],
})
export class DemoComponent {}