Svelteit

Layouts & Grids

Example :: 12 Column Responsive Grid

col

col-2

col-3

col-4

col-2

col-5

col-6

col


<script>
  import { Container, Row, Column } from '@colorfuldots/svelteit'
</script>

<Container>
  <Row>
    <Column class="col">col</Column>
    <Column class="col">col</Column>
    <Column class="col">col</Column>
    <Column class="col">col</Column>
    <Column class="col">col</Column>
    <Column class="col">col</Column>
    <Column class="col">col</Column>
    <Column class="col">col</Column>
    <Column class="col">col</Column>
    <Column class="col">col</Column>
    <Column class="col">col</Column>
    <Column class="col">col</Column>
  </Row>
  <Row>
    <Column class="col-2">col-2</Column>
    <Column class="col-2">col-2</Column>
    <Column class="col-2">col-2</Column>
    <Column class="col-2">col-2</Column>
    <Column class="col-2">col-2</Column>
    <Column class="col-2">col-2</Column>
  </Row>
  <Row>
    <Column class="col-3">col-3</Column>
    <Column class="col-3">col-3</Column>
    <Column class="col-3">col-3</Column>
    <Column class="col-3">col-3</Column>
  </Row>
  <Row>
    <Column class="col-4">col-4</Column>
    <Column class="col-4">col-4</Column>
    <Column class="col-4">col-4</Column>
  </Row>
  <Row>
    <Column class="col-2">col-2</Column>
    <Column class="col-5">col-5</Column>
    <Column class="col-5">col-5</Column>
  </Row>
  <Row>
    <Column class="col-6">col-6</Column>
    <Column class="col-6">col-6</Column>
  </Row>
  <Row>
    <Column class="col">col</Column>
  </Row>
</Container>

Example :: 2 Column Layout

Header

Side Bar

Content

Footer


<script>
  import { Container, Row, Column } from '@colorfuldots/svelteit'
</script>

<Container>
  <Row>
    <Column class="col">Header</Column>
  </Row>
  <Row>
    <Column class="col-sm-4">Side Bar</Column>
    <Column class="col-sm-8">Content</Column>
  </Row>
  <Row>
    <Column class="col">Footer</Column>
  </Row>
</Container>

Example :: 3 Column Layout

Header

Side Bar

Content

Side Bar with long content and more things could be inside of this it all depends on what you want to put into this box right here.

Footer


<script>
  import { Container, Row, Column } from '@colorfuldots/svelteit'
</script>

<Container>
  <Row>
    <Column class="col">Header</Column>
  </Row>
  <Row>
    <Column class="col-sm-2">Side Bar</Column>
    <Column class="col-sm-8">Content</Column>
    <Column class="col-sm-2">
      Side Bar with long content and more things could be inside of this it
      all depends on what you want to put into this box right here.
    </Column>
  </Row>
  <Row>
    <Column class="col">Footer</Column>
  </Row>
</Container>

API

Prop Name	Type	Is Required	Default Value	Description
full	bool	false	false	Adds full-width class to container for full-width layouts

Layouts & Grids

CSS grid layout or CSS grid is a technique in Cascading Style Sheets that allows web developers to create complex responsive web design layouts more easily and consistently across browsers. There have been other methods for controlling web page layout methods, such as tables, the box model, and CSS flex box.