# The grid

# Philosophy

Matise's grid is based on 24 columns, all our designs also fit on this grid. This makes it very easy to translate our designs into code.

# Functions

The grid() function is based on view widths (vw), grid(1) is therefore equal to 1/24 of the screen width. You can also use negative and decimal values. A similar function in Gryd is the rem() function which turns pixel values to rem. If you'd like to use the grid or rem functions inside a calc function, for example, use interpolation:

	.image {
		width: calc(#{grid(2)} + 2rem);		
	}

# Breakpoints

We have a few predefined breakpoints:

These are the basis for both classes and media queries, the syntax for classes is breakpoint name plus column size, f.e. .mediumlarge-10.

# Media queries

All breakpoints except for small have three media query options: up, down and only:

.container {
	@media #{$medium-down} {
		// 1024px and down
	}
	@media #{$medium-up} {
		// 1024px and up
	}
	@media #{$medium-only} {
		// Between 750px and 1024px
	}
}

# Classes

The classes are based on percentages in stead of view widths, so their actual width will depend on the width of the surrounding container element. The classes are available in both numbers and written out fractions, see the defaults for specifics.

# Usage

The following section will take up one third of the available width on large (see media queries) screens, half of the width on medium screens and the entire width on small screens.

<section class="news-overview column small-full medium-half large-third"></section>

You can also add a .row class to the container element which adds display: flex and some complementary styles to the container. The following code will show the three columns next to each other on large screens and under each other on small screens.

<section class="news-overview row">
	<section class="news-overview__item column small-full large-8">[...]</section>
	<section class="news-overview__item column small-full large-8">[...]</section>
	<section class="news-overview__item column small-full large-8">[...]</section>
</section>

# Column class options