root
/
css-mastery-16-master


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Grid layout using the auto algorithm – dense</title>

  <!-- the base styles and "housekeeping" styles are in here: -->
  <link rel="stylesheet" href="css/grid-base.css">
<!-- the HTML5 shiv, to help older browsers understand styling
 on newer HTML5 elements: -->
 <script src="js/html5shiv.min.js"></script>
 <style>

  /* grid styling */

  .grid-auto-rows {
    list-style: none;
    padding: 0;
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-rows: auto;
            grid-template-rows: auto;
    -webkit-grid-template-columns: repeat(5, 1fr);
            grid-template-columns: repeat(5, 1fr);
    -webkit-grid-auto-flow: row dense;
            grid-auto-flow: row dense;
    /* grid-auto-rows: auto; - this is implied */
    margin: 1.5em -.6875em;
  }

  /* some stories with different spans */

  .story:nth-child(1),
  .story:nth-child(2) {
    -webkit-grid-column: span 3;
            grid-column: span 3;
  }
  .story:nth-child(4) {
    -webkit-grid-column: span 2;
            grid-column: span 2;
  }

  .story {
    padding: .6875em;
    margin: 0 .6875em 1.375em;
    background-color: #eee;
  }

</style>
</head>
<body>
  <div class="wrapper">
    <main>
      <div class="subsection">
        <ul class="grid-auto-rows">
          <li class="story">
            <h3><a href="#">Story 1</a></h3>
          </li>

          <li class="story">
            <h3><a href="#">Story 2</a></h3>
          </li>

          <li class="story">
            <h3><a href="#">Story 3</a></h3>
          </li>

          <li class="story">
            <h3><a href="#">Story 4</a></h3>
          </li>

          <li class="story">
            <h3><a href="#">Story 5</a></h3>
          </li>

          <li class="story">
            <h3><a href="#">Story 6</a></h3>
          </li>

          <li class="story">
            <h3><a href="#">Story 7</a></h3>
          </li>

          <li class="story">
            <h3><a href="#">Story 8</a></h3>
          </li>

          <li class="story">
            <h3><a href="#">Story 9</a></h3>
          </li>

        </ul>
      </div>
    </main>
  </div>

</body>
</html>