How to use grid system in materialize
Deepak Tailor - Dec 25 2020
We are using a standard 12 column fluid responsive grid system. You can set the grid as per your choice. And Grid helps you to layout your page in a simple, easy way.
How to use container
The container is set to a 70% width of the desktop screen, which uses text and content to center.
Live Demo<div class="container">
<h6>Text With Container</h6>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore repellendus, vel facere dolore ut enim atque in adipisci est, corporis totam incidunt amet, officia earum perspiciatis? Quidem minus vero suscipit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore repellendus, vel facere dolore ut enim atque in adipisci est, corporis totam incidunt amet, officia earum perspiciatis? Quidem minus vero suscipit.</p>
</div>All the screens are divided into 12 columns with materialize css. Grid systems work the same on all screens. To get a feel of how the grid is used in HTML, take a look at the code below which will produce a similar result to the one above. We have to set different classes on different screens. like :
1. Use .s for small screen.
2. Use .m for small screen.
3. Use .l for small screen.
4. Use .xl for small screen.
How to set 12 columns in large screen
<div class="row">
<div class="col l1">col-1</div>
<div class="col l1">col-2</div>
<div class="col l1">col-3</div>
<div class="col l1">col-4</div>
<div class="col l1">col-5</div>
<div class="col l1">col-6</div>
<div class="col l1">col-7</div>
<div class="col l1">col-8</div>
<div class="col l1">col-9</div>
<div class="col l1">col-10</div>
<div class="col l1">col-11</div>
<div class="col l1">col-12</div>
</div>how to set 12 columns in medium screen
<div class="row">
<div class="col l1 m1">col-1</div>
<div class="col l1 m1">col-2</div>
<div class="col l1 m1">col-3</div>
<div class="col l1 m1">col-4</div>
<div class="col l1 m1">col-5</div>
<div class="col l1 m1">col-6</div>
<div class="col l1 m1">col-7</div>
<div class="col l1 m1">col-8</div>
<div class="col l1 m1">col-9</div>
<div class="col l1 m1">col-10</div>
<div class="col l1 m1">col-11</div>
<div class="col l1 m1">col-12</div>
</div>How to set 12 columns in small screen
<div class="row">
<div class="col l1 m1 s1">col-1</div>
<div class="col l1 m1 s1">col-2</div>
<div class="col l1 m1 s1">col-3</div>
<div class="col l1 m1 s1">col-4</div>
<div class="col l1 m1 s1">col-5</div>
<div class="col l1 m1 s1">col-6</div>
<div class="col l1 m1 s1">col-7</div>
<div class="col l1 m1 s1">col-8</div>
<div class="col l1 m1 s1">col-9</div>
<div class="col l1 m1 s1">col-10</div>
<div class="col l1 m1 s1">col-11</div>
<div class="col l1 m1 s1">col-12</div>
</div>How to set 2 columns in large screen
<div class="row">
<div class="col l6">col-1</div>
<div class="col l6">col-2</div>
</div>How to set 3 columns in large screen
<div class="row">
<div class="col l4">col-1</div>
<div class="col l4">col-2</div>
<div class="col l4">col-3</div>
</div>How to set 4 columns in large screen
<div class="row">
<div class="col l3">col-1</div>
<div class="col l3">col-2</div>
<div class="col l3">col-3</div>
<div class="col l3">col-4</div>
</div>How to set 6 columns in large screen
<div class="row">
<div class="col l2">col-1</div>
<div class="col l2">col-2</div>
<div class="col l2">col-3</div>
<div class="col l2">col-4</div>
<div class="col l2">col-5</div>
<div class="col l2">col-6</div>
</div>How to set grid on multiple screen like as (Large / Medium / Small)
<div class="row">
<div class="col l3 m4 s12">
<div class="card">
<div class="card-content"></div>
</div>
</div>
<div class="col l3 m4 s12">
<div class="card">
<div class="card-content"></div>
</div>
</div>
<div class="col l3 m4 s12">
<div class="card">
<div class="card-content"></div>
</div>
</div>
<div class="col l3 m4 s12">
<div class="card">
<div class="card-content"></div>
</div>
</div>
</div>How to use offset in grid
To apply an offset on any screen, use the offset keyword and the size of the screen on which to apply, such as offset -l6, offset-m6, offset-s6.
Live Demo<div class="row">
<div class="col l6 offset-l6 m6 offset-m6 s6 offset-s6">
<div class="card">
<div class="card-content"></div>
</div>
</div>
</div>
Deepak Tailor
My name is Deepak tailor as a fullstack developer. I have been in the IT industry (PHP, Nodejs, flutter) for the last 5 years. For professional and customize web development & app development, you can send inquiry on our email.
----
You can contact him at deepaktailor10@yahoo.in