Building layouts with grid components with Mytril

The Mytril grid system uses a flexible 12-column layout powered by flexbox, allowing developers to create responsive and customized designs with ease. With adaptable breakpoints and a range of components, Mytril’s grid enables tailored, device-friendly layouts.

<script>
	import { Grid, GridRow, GridCol } from 'mytril';
</script>

<Grid>
	<GridRow>
		<GridCol>1</GridCol>
		<GridCol>2</GridCol>
		<GridCol>3</GridCol>
		<!-- Add more columns as needed -->
	</GridRow>
</Grid>

Mytril’s grid system includes seven default breakpoints (xs, sm, md, lg, xl, xxl, and default ) designed to match specific screen sizes. Each breakpoint allows you to target particular devices or orientations, ensuring flexibility across viewports.

These breakpoints are defined within Mytril’s configuration and can be customized to fit specific project needs. To modify breakpoints, you can adjust the settings in plugins/mytril.(js|ts), tailoring your grid to accommodate different design preferences and responsive requirements.

With the GridCol component, you can define custom spans and adjust layouts for different breakpoints. The following example adapts column widths based on screen size:

<script>
	import { Grid, GridRow, GridCol } from 'mytril';
</script>

<Grid>
	<GridRow dense>
		<GridCol cols="12" lg="4">1</GridCol>
		<GridCol cols="12" md="6" lg="2">2</GridCol>
		<GridCol cols="12" md="6" lg="2">3</GridCol>
		<GridCol cols="12" lg="4">4</GridCol>
	</GridRow>
</Grid>

Each component in the grid system has properties that allow for precise layout control:

Grid

<script>
	import { Grid } from 'mytril';
</script>

<Grid>// your content</Grid>

GridRow

<script>
	import { Grid, GridRow } from 'mytril';
</script>

<Grid>
	<GridRow>// your content</GridRow>
</Grid>

GridCol

<script>
	import { Grid, GridRow, GridCol } from 'mytril';
</script>

<Grid>
	<GridRow>
		<GridCol>// your content</GridCol>
	</GridRow>
</Grid>

Spacer

<script>
	import { Grid, GridRow, GridCol, Spacer } from 'mytril';
</script>

<Grid>
	<GridRow>
		<GridCol>// your content 1</GridCol>
		<Spacer />
		<GridCol>// your content 2</GridCol>
	</GridRow>
</Grid>

1. Effortless responsiveness: pre-defined breakpoints make adapting layouts to various screen sizes easy.
2. Fine-grained control: alignment, spacing, and ordering can be customized without additional CSS.
3. Developer-focused design: each component integrates smoothly, saving time and simplifying layout management.

Using Mytril’s grid components, developers can build professional-grade, responsive layouts that are efficient and easy to manage.