In order to make it easy to place various objects on the web page, people usually use a grid. In Materialize the grid can have multiple rows and each row can be divided into 12 columns. The name "row" is actually slightly confusing in this context. A name such as "block" might have been better as each "row" can actually contain several 12-width physical row.

For more details see the documentation of the grid

examples/materializecss/rows-and-columns.html

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <!-- Compiled and minified CSS -->
  5.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  6.  
  7.  
  8.     <!--Let browser know website is optimized for mobile-->
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  10.  
  11.     <title>Materialize: rows and columns</title>
  12.   </head>
  13.  
  14.   <body>
  15.     <div class="container">
  16.  
  17.       <h3>A row with a single line of 12 1-width columns</h3>
  18.       <div class="row">
  19.         <div class="col s1">1</div>
  20.         <div class="col s1">2</div>
  21.         <div class="col s1">3</div>
  22.         <div class="col s1">4</div>
  23.         <div class="col s1">5</div>
  24.         <div class="col s1">6</div>
  25.         <div class="col s1">7</div>
  26.         <div class="col s1">8</div>
  27.         <div class="col s1">9</div>
  28.         <div class="col s1">10</div>
  29.         <div class="col s1">11</div>
  30.         <div class="col s1">12</div>
  31.       </div>
  32.  
  33.       <h3>A row with two lines: a line with a single 12-width column and a line with 2 6-width columns</h3>
  34.       <div class="row">
  35.         <div class="col s12">This div is 12-width column on all screen sizes</div>
  36.         <div class="col s6">6-width column</div>
  37.         <div class="col s6">6-width column</div>
  38.       </div>
  39.  
  40.       <h3>A row with two lines: a line with a single 12-width column and a line with various width columns</h3>
  41.       <div class="row">
  42.         <div class="col s12">This div is 12-columns wide on all screen sizes</div>
  43.         <div class="col s1">1-col</div>
  44.         <div class="col s2">2-col</div>
  45.         <div class="col s3">3-col</div>
  46.         <div class="col s6">6-col</div>
  47.       </div>
  48.  
  49.       <div class="row">
  50.         <div class="col s12"><span class="flow-text">This div is 12-width column</span></div>
  51.  
  52.         <div class="col s6 offset-s6"><span class="flow-text">6-width column (offset-by-6)</span></div>
  53.  
  54.         <div class="col s6 offset-s3"><span class="flow-text">6-width column (offset-by-3)</span></div>
  55.         <div class="col s3"><span class="flow-text">&nbsp;<!-- has to be filled with something to take up the rest of the line --></span></div>
  56.  
  57.         <div class="col s2"><span class="flow-text">2-width col</span></div>
  58.         <div class="col s10"><span class="flow-text">This div is 10-width column</span></div>
  59.       </div>
  60.  
  61.     </div>
  62.     <!--JavaScript at end of body for optimized loading-->
  63.     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  64.   </body>
  65. </html>
  66.  
  67. <style>
  68. .col:nth-of-type(even) {
  69.     background-color: #add8e6;
  70. }
  71. .col:nth-of-type(odd) {
  72.     background-color: #e0e0e0;
  73. }
  74. </style>
  75.  
  76.  
Try!

At the bottom of the file I've added some manual CSS in order to change the background-color of the boxes. Hopefully this will make it easier to see the individual cells in the grid.