SponsorsBecome a sponsor
- Get Started
- Svelte Components
- App
- Accordion
- Action Sheet / Actions
- Appbar
- Area Chart
- Badge
- Block / Content Block
- Breadcrumbs
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Button
- List Index
- List Item
- Login Screen
- Menu
- Menu List
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Pie Chart
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Skeleton
- Smart Select
- Sortable
- Stepper
- Subnavbar
- Swipeout
- Swiper
- Tabs
- Text Editor
- Toggle
- Toolbar / Tabbar
- Treeview
- View
- Virtual List
Grid Svelte Component
Grid Svelte component represents Framework7's Layout Grid.
Grid Components
There are following components included:
Row- grid rowCol- grid column (cell)
Grid Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| <Row> properties | |||
| noGap | boolean | false | Removes spacing between columns |
| tag | string | div | Defines which tag must be used to render row element. Can be div or p |
| resizable | boolean | false | Makes row resizable |
| resizableAbsolute | boolean | false | Enables absolute resizing (in px) |
| resizableFixed | boolean | false | Keeps resizable row in fixed size (not resizable) |
| resizableHandler | boolean | true | Adds resize handler element (between rows) to resize them |
| <Col> properties | |||
| tag | string | div | Defines which tag must be used to render column element. Can be div or span |
| width | number string | auto | Column width. Check available Column Sizes |
| xsmall | number string | Column width when app width >= 480px | |
| small | number string | Column width when app width >= 568px | |
| medium | number string | Column width when app width >= 768px | |
| large | number string | Column width when app width >= 1024px | |
| xlarge | number string | Column width when app width >= 1200px | |
| resizable | boolean | false | Makes column resizable |
| resizableAbsolute | boolean | false | Enables absolute resizing (in px) |
| resizableFixed | boolean | false | Keeps resizable column in fixed size (not resizable) |
| resizableHandler | boolean | true | Adds resize handler element (between columns) to resize them |
Grid Events
| Event | Description |
|---|---|
| <Row> events | |
| gridResize | Event will be triggered on resizable grid row resize |
| <Col> events | |
| gridResize | Event will be triggered on resizable grid column resize |
Examples
<Page class="grid-demo">
<Navbar title="Grid / Layout"></Navbar>
<Block>
<p>Columns within a row are automatically set to have equal width. Otherwise you can define your column with pourcentage of screen you want.</p>
</Block>
<BlockTitle>Columns with gap</BlockTitle>
<Block>
<Row>
<Col>50% (.col)</Col>
<Col>50% (.col)</Col>
</Row>
<Row>
<Col>25% (.col)</Col>
<Col>25% (.col)</Col>
<Col>25% (.col)</Col>
<Col>25% (.col)</Col>
</Row>
<Row>
<Col>33% (.col)</Col>
<Col>33% (.col)</Col>
<Col>33% (.col)</Col>
</Row>
<Row>
<Col>20% (.col)</Col>
<Col>20% (.col)</Col>
<Col>20% (.col)</Col>
<Col>20% (.col)</Col>
<Col>20% (.col)</Col>
</Row>
<Row>
<Col width="33">33% (.col-33)</Col>
<Col width="66">66% (.col-66)</Col>
</Row>
<Row>
<Col width="25">25% (.col-25)</Col>
<Col width="25">25% (.col-25)</Col>
<Col width="50">50% (.col-50)</Col>
</Row>
<Row>
<Col width="75">75% (.col-75)</Col>
<Col width="25">25% (.col-25)</Col>
</Row>
<Row>
<Col width="80">80% (.col-80)</Col>
<Col width="20">20% (.col-20)</Col>
</Row>
</Block>
<BlockTitle>No gap between columns</BlockTitle>
<Block>
<Row noGap>
<Col>50% (.col)</Col>
<Col>50% (.col)</Col>
</Row>
<Row noGap>
<Col>25% (.col)</Col>
<Col>25% (.col)</Col>
<Col>25% (.col)</Col>
<Col>25% (.col)</Col>
</Row>
<Row noGap>
<Col>33% (.col)</Col>
<Col>33% (.col)</Col>
<Col>33% (.col)</Col>
</Row>
<Row noGap>
<Col>20% (.col)</Col>
<Col>20% (.col)</Col>
<Col>20% (.col)</Col>
<Col>20% (.col)</Col>
<Col>20% (.col)</Col>
</Row>
<Row noGap>
<Col width="33">33% (.col-33)</Col>
<Col width="66">66% (.col-66)</Col>
</Row>
<Row noGap>
<Col width="25">25% (.col-25)</Col>
<Col width="25">25% (.col-25)</Col>
<Col width="50">50% (.col-50)</Col>
</Row>
<Row noGap>
<Col width="75">75% (.col-75)</Col>
<Col width="25">25% (.col-25)</Col>
</Row>
<Row noGap>
<Col width="80">80% (.col-80)</Col>
<Col width="20">20% (.col-20)</Col>
</Row>
</Block>
<BlockTitle>Nested</BlockTitle>
<Block>
<Row>
<Col>50% (.col)
<Row>
<Col>50% (.col)</Col>
<Col>50% (.col)</Col>
</Row>
</Col>
<Col>50% (.col)
<Row>
<Col width="33">33% (.col-33)</Col>
<Col width="66">66% (.col-66)</Col>
</Row>
</Col>
</Row>
</Block>
<BlockTitle>Responsive Grid</BlockTitle>
<Block>
<p>Grid cells have different size on Phone/Tablet</p>
<Row>
<Col width="100" medium="50">.col-100.medium-50</Col>
<Col width="100" medium="50">.col-100.medium-50</Col>
</Row>
<Row>
<Col width="50" medium="25">.col-50.medium-25</Col>
<Col width="50" medium="25">.col-50.medium-25</Col>
<Col width="50" medium="25">.col-50.medium-25</Col>
<Col width="50" medium="25">.col-50.medium-25</Col>
</Row>
<Row>
<Col width="100" medium="40">.col-100.medium-40</Col>
<Col width="50" medium="60">.col-50.medium-60</Col>
<Col width="50" medium="66">.col-50.medium-66</Col>
<Col width="100" medium="33">.col-100.medium-33</Col>
</Row>
</Block>
<BlockTitle>Resizable Cols</BlockTitle>
<Block class="grid-resizable-demo">
<Row>
<Col resizable style="min-width: 20px">1</Col>
<Col resizable style="min-width: 20px">2</Col>
<Col resizable style="min-width: 20px">3</Col>
</Row>
</Block>
<BlockTitle>Resizable Fixed Col</BlockTitle>
<BlockHeader>2nd column has fixed size</BlockHeader>
<Block class="grid-resizable-demo">
<Row>
<Col resizable style="min-width: 20px">1</Col>
<Col resizable resizableFixed style="min-width: 20px">2</Col>
<Col resizable style="min-width: 20px">3</Col>
</Row>
</Block>
<BlockTitle>Resizable Grid</BlockTitle>
<Block class="grid-resizable-demo">
<Row class="align-items-stretch" style="height: 300px">
<Col resizable class="demo-col-center-content" style="min-width: 50px">Left</Col>
<Col resizable class="display-flex flex-direction-column" style="padding: 0px; border: none; min-width: 50px; background-color: transparent">
<Row resizable style="height: 50%; min-height: 50px">
<Col class="demo-col-center-content" style="height: 100%">Center Top</Col>
</Row>
<Row resizable style="height: 50%; min-height: 50px">
<Col class="demo-col-center-content" style="height: 100%">Center Bottom</Col>
</Row>
</Col>
<Col resizable class="demo-col-center-content" style="min-width: 50px">Right</Col>
</Row>
</Block>
</Page>
<style>
:global(.grid-demo div[class*="col"]) {
background: #fff;
text-align: center;
color: #000;
border: 1px solid #ddd;
padding: 5px;
margin-bottom: 15px;
font-size: 12px;
}
:global(.grid-resizable-demo) {
--f7-grid-row-gap: 16px;
}
:global(.grid-resizable-demo div[class*="col"]) {
margin-bottom: 0;
}
:global(.grid-resizable-demo .demo-col-center-content) {
display: flex;
align-items: center;
justify-content: center;
}
</style>
<script>
import {Page, Navbar, Block, BlockTitle, Row, Col, BlockHeader} from 'framework7-svelte';
</script>