Materialize CSS Grids

by Online Tutorials Library July 14, 2022

Materialized CSS Grids

Materialize provides a standard 12 column fluid responsive grid system. It uses the row and column style classes to define rows and columns respectively.

Index	Class name	Description
1)	row	It is used to specify a padding-less container to be used for responsive columns. This class is mandatory for responsive classes to be fully responsive.
2)	col	It is used to specify a column with sub-classes.

Note: col contains several sub-classes for different types of screens.

Columns for Small Screen Devices

Following is a list of column-level styles for small screen devices, typically smartphones.

Index	Class name	Description
1)	s1	It is used to define 1 of 12 columns with width as 08.33%.
2)	s2	It is used to define 2 of 12 columns with width as 16.66%.
3)	s3	It is used to define 3 of 12 columns with width as 25.00%.
4)	s4	It is used to define 4th of 12 columns with width as 33.33%. It contains s4, s5, s6, s7, s8, s9, s10, s11
12)	s12	It is used to define 12th of 12 columns with width as 100%. Default class for small screen phones.

Columns for Medium Size Screen Devices

See the list of column-level styles for medium screen devices i.e. tablets:

Index	Class name	Description
1)	m1	It is used to define 1 of 12 columns with width as 08.33%
2)	m2	It is used to define 2 of 12 columns with width as 16.66%.
3)	m3	It is used to define 3 of 12 columns with width as 25.00%.
4)	m4	It is used to define 4 of 12 columns with width as 33.33%.m5 – m11
12)	m12	It is used to define 12 of 12 columns with width as 100%. Default class for medium screen phones.

Columns for Large Size Screen Devices

See the list of column-level styles for large screen devices i.e. laptops, desktops etc.

Index	Class name	Description
1)	l1	It is used to define 1 of 12 columns with width as 08.33%.
2)	l2	It is used to define 2 of 12 columns with width as 16.66%.
3)	l3	It is used to define 3 of 12 columns with width as 25.00%.
4)	l4	It is used to define 4 of 12 columns with width as 33.33%. l5 – l11
12)	l12	It is used to define 12 of 12 columns with width as 100%. Default class for large screen devices.

Usage

Each subclass determines the number of columns of the grid to be used based on the type of a device. Consider the following HTML snippet.

  <div class = “row”>     <div class = “col s2 m4 l3”>        <p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on        a large screen.</p>     </div>  </div>  

Example

  <!DOCTYPE html>  <html>     <head>        <title>The Materialize Grids Example</title>        <meta name = “viewport” content = “width = device-width, initial-scale = 1”>              <link rel = “stylesheet”           href=”https://fonts.googleapis.com/icon?family=Material+Icons”>        <link rel = “stylesheet”           href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css”>        <script type = “text/javascript”           src = “https://code.jquery.com/jquery-2.1.1.min.js”></script>                   <script src = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js”>        </script>                  </head>          <body>        <div class = “teal”>           <h2>Mobile First Design Demo</h2>           <p>Resize the window to see the effect!</p>        </div>                <hr/>         <div class = “row”>           <div class = “col m1 grey center”>1</div>           <div class = “col m1 center”>2</div>           <div class = “col m1 grey center”>3</div>           <div class = “col m1 center”>4</div>           <div class = “col m1 grey center”>5</div>           <div class = “col m1 center”>6</div>           <div class = “col m1 center grey”>7</div>           <div class = “col m1 center”>8</div>           <div class = “col m1 center grey”>9</div>           <div class = “col m1 center”>10</div>           <div class = “col m1 center grey”>11</div>           <div class = “col m1 center”>12</div>        </div>                <div class = “row”>           <div class = “col m4 l3 yellow”>              <p>This text will use 12 columns on a small screen, 4 on a medium screen (m4),                 and 3 on a large screen (l3).</p>           </div>                      <div class = “col s4 m8 l9 grey”>                <p>This text will use 4 columns on a small screen (s4), 8 on a medium screen                 (m8), and 9 on a large screen (l9).</p>           </div>        </div>     </body>  </html>  

Test it Now

Output:

Materialize Grids 1

Next TopicMaterialize CSS Utility classes