rows-columns.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <!-- This is the title element. The contents inside will appear on the tab name of the website! -->
    <title>CSS Grid | Rows and Columns</title>

    <!-- Here, we are connecting our css to this current HTML file. -->
    <link rel="stylesheet" href="style.css">

    <!-- Here, we are connecting Materialize to this current HTML file to use external components from their webpage. -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
    <!-- This nav element will allow us to create a menu for this website! -->
  <nav id="navi">
        <div class="nav-wrapper">
           <!-- The a element stands for anchor, which will reference a hyperlink or destination. -->
           <a href="#" class="brand-logo" id="loogoo"> CSS Grid</a>
           <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li><a href="index.html">HOME</a></li>
           </ul>
        </div>
  </nav>
</head>

<body id="rows-col">
   <br/>
   <br/>
   <br/>
   <br/>
   <h2> Adding Rows and Columns</h2>
   <p class="rows-col-bio">To make a two-dimensional layout, we’ll need to define the columns and rows.
      For this example, we'll create three columns and three rows by using the <code>grid-template-row</code> and <code>grid-template-column</code> properties.
      Let's take a look at the markup below and see what we are defining with these properties.
      <br/>
      <br/>
      <code>
      #grid { <br/>
          display: grid; <br/>
          grid-template-columns: 100px 100px 100px; <br/>
          grid-template-rows: 100px 100px 100px; <br/>
       }<br/>
      </code>
      <br/>
    As we’ve written three values for <code>grid-template-columns</code>, we’ll get three columns.
    Similarly, we’ll get three rows as we’ve specified three values for the <code>grid-template-rows</code>.
    The values dictate how wide we want our columns to be (100px) and how tall we’d want our rows to be (100px).
    With these values, our result is a 3x3 grid: </p>
        <div id="grid-1" class="centerr">
           <div id="item-1">1</div>
           <div id="item-2">2</div>
           <div id="item-3">3</div>
           <div id="item-4">4</div>
           <div id="item-5">5</div>
           <div id="item-6">6</div>
           <div id="item-7">7</div>
           <div id="item-8">8</div>
           <div id="item-9">9</div>
         </div>
         <br/>
         <br/>
         <br/>
</body>

</html>