Layouts

This project is an implementation of CSS Flexbox & Grid for Svelte framework for making it easier for developers to create layouts and build apps faster

Install

// npm
npm install svelte-layouts

// yarn
yarn add svelte-layouts

Get started

Layouts have four main components: Row, Col (Column) ,Grid and Item

Row: a layout with horizontal main-axis, place it items from left to right

Col: a layout with vertical main-axis, place it items from top to left

Grid: a multi-directional layout, where items can be positione vertically and horizontally

Item: a controllable layout item

Examples

<script>
    import { Row, Col, Grid, Item } from 'svelte-layouts'
</script>

// control how elements are positioned horizontally
<Row justifyContent="space-between">
  // Create div element, controled with style property
  <div></div>

  // Create an item
  <Item></Item>

  // Create a row item
  <Row></Row>

  // Create a Col item
  <Col></Col>

  // Create a grid item
  <Grid></Grid>
</Row>

<Col></Col>

// Define the number & width of rows and columns
<Grid templateRows="auto" templateCols="20vw 1fr"></Grid>

Responsive Design

<div class="container">
  <Row class="custom-class"></Row>
</div>

@media (min-width: 1000px) {
/*
you can target .col , .row, .grid, .item, also you can add .layout class to prevent style collision 
or you can target a specific  class provided to the component via it class prop
.class :global(.class) syntax is recommended to prevent style leakage
*/
  .container :global(.row) { 
    /*make sure to use !important to override component's inline style*/
    background-color: black !important;
  }
}

License

svelte-layouts is MIT Licenced

Learn More

if you want to learn more about css flexbox and grid and how they works, you can feel free to check out these useful links:

• A Complete Guide to Flexbox
• A Complete Guide to Grid
• Flexbox vs Grid