Grid System

Using the grid system is a great way to display content on a page.

FOUR

FIVE

SIX

SEVEN

EIGHT

NINE

TEN

ELEVEN

TWELVE

Code Example

    <style>
     .products {
      background-color: dodgerblue;
      color: white;
      padding: 1rem;
      height: auto;
      text-align: center;
      clear: both}

     .display {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}

     .pic {
      width: 200px;
      height: auto;}

     figcaption {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12pt;
      color: #999;}
    </style>