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.

Core grid sub components

<script>
	import { Container, Row, Col } from 'mytril';
</script>

<Container>
	<Row>
		<Col>1</Col>
		<Col>2</Col>
		<Col>3</Col>
		<!-- Add more columns as needed -->
	</Row>
</Container>

Responsive breakpoints grid system

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.

Customizing grid layouts

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

<script>
	import { Container, Row, Col } from 'mytril';
</script>

<Container>
	<Row dense>
		<Col cols="12" lg="4">1</Col>
		<Col cols="12" md="6" lg="2">2</Col>
		<Col cols="12" md="6" lg="2">3</Col>
		<Col cols="12" lg="4">4</Col>
	</Row>
</Container>

Properties of each grid component

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

Container

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

<Container>// your content</Container>

Row

<script>
	import { Container, Row } from 'mytril';
</script>

<Container>
	<Row>// your content</Row>
</Container>

Col

<script>
	import { Container, Row, Col } from 'mytril';
</script>

<Container>
	<Row>
		<Col>// your content</Col>
	</Row>
</Container>

Spacer

<script>
	import { Container, Row, Col, Spacer } from 'mytril';
</script>

<Container>
	<Row>
		<Col>// your content 1</Col>
		<Spacer />
		<Col>// your content 2</Col>
	</Row>
</Container>

Key benefits of this grid system

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.