[go: up one dir, main page]
Skip to content

Grid

Jump to bottom
Vinicius Reif Biavatti edited this page Oct 11, 2021 · 2 revisions

Description

The grid component is used to create responsive web applications. Grid allows you to control the layout by using the classes .container, .row, .col, and others. To change the default media queries, check the variables.scss file. The .s, .m and .l classes control the device size to consider the correct amount of columns. Check the classes table for more details.

Code Examples

Default structure:

<div class="container">
    <div class="row">
        <div class="col s12 m6 l3">...</div>
    </div>
</div>

Columns example:

<div class="row">
    <div class="col s12 m12 l12">12</div>
    
    <div class="col s6 m6 l6">6</div>
    <div class="col s6 m6 l6">6</div>
							  
    <div class="col s3 m3 l3">3</div>
    <div class="col s3 m3 l3">3</div>
    <div class="col s3 m3 l3">3</div>
    <div class="col s3 m3 l3">3</div>
							  
    <div class="col s1 m1 l1">1</div>
    <div class="col s1 m1 l1">1</div>
    <div class="col s1 m1 l1">1</div>
    <div class="col s1 m1 l1">1</div>
    <div class="col s1 m1 l1">1</div>
    <div class="col s1 m1 l1">1</div>
    <div class="col s1 m1 l1">1</div>
    <div class="col s1 m1 l1">1</div>
    <div class="col s1 m1 l1">1</div>
    <div class="col s1 m1 l1">1</div>
    <div class="col s1 m1 l1">1</div>
    <div class="col s1 m1 l1">1</div>
</div>

To offset columns, you can use the .offset classes for each device type.

<div class="container">
    <div class="row">
        <div class="col s12 m6 l6">6</div>
        <div class="col s12 m6 l6">6</div>
    </div>
    <div class="row">
        <div class="col offset-l3 offset-m3 s12 m3 l3">3</div>
        <div class="col offset-l3 offset-m3 s12 m3 l3">3</div>
    </div>
</div>

Component Classes

This is the table with available classes for this component.

Class Description
.container Creates a spacement depending the device size. For mobile, the space will not be applied
.row Defines that the element will has 12 columns
.col Defines that the element will be a column
.s[x] Set the column amout for small screens. [x] is a number between 1 - 12
.m[x] Set the column amout for medium screens. [x] is a number between 1 - 12
.l[x] Set the column amout for large screens. [x] is a number between 1 - 12
.offset-s[x] Offset the column amount for small screens. [x] is a number between 1 - 12
.offset-m[x] Offset the column amount for medium screens. [x] is a number between 1 - 12
.offset-l[x] Offset the column amount for large screens. [x] is a number between 1 - 12

Copyright © 2022 Vinícius Reif Biavatti

Clone this wiki locally