ChemWriter

Create a Structure Grid

A grid of structures can be implemented using several generic HTML tools. One of the best methods uses CSS Grid, as in the following example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Structure Grid | ChemWriter</title>
    <link rel="stylesheet" href="https://chemwriter.com/sdk/chemwriter.css"> 
    <script src="https://chemwriter.com/sdk/chemwriter.js" data-chemwriter-license="https://chemwriter.com/licenses/396f597e46fbdbd39e34108b010c6efcb2ef2ed2.txt"></script>
    <style>
      .grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 8em);
        grid-gap: 0.3em;
      }

      .chemwriter {
        border: 2px solid #d0d0d0;
        padding: 0.1em;
        border-radius: 0.2em;
      }

      /* Suppress iOS/Webkit bug */
      .chemwriter svg {
        max-height: 100%;
        min-height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <div data-chemwriter-ui="image" data-chemwriter-src="https://chemwriter.com/data/structure-1.mol"></div>
      <div data-chemwriter-ui="image" data-chemwriter-src="https://chemwriter.com/data/structure-2.mol"></div>
      <div data-chemwriter-ui="image" data-chemwriter-src="https://chemwriter.com/data/structure-3.mol"></div>
      <div data-chemwriter-ui="image" data-chemwriter-src="https://chemwriter.com/data/structure-4.mol"></div>
      <div data-chemwriter-ui="image" data-chemwriter-src="https://chemwriter.com/data/structure-5.mol"></div>
      <div data-chemwriter-ui="image" data-chemwriter-src="https://chemwriter.com/data/structure-6.mol"></div>
      <div data-chemwriter-ui="image" data-chemwriter-src="https://chemwriter.com/data/structure-7.mol"></div>
      <div data-chemwriter-ui="image" data-chemwriter-src="https://chemwriter.com/data/structure-8.mol"></div>
      <div data-chemwriter-ui="image" data-chemwriter-src="https://chemwriter.com/data/structure-9.mol"></div>
      <div data-chemwriter-ui="image" data-chemwriter-src="https://chemwriter.com/data/structure-10.mol"></div>
      <div data-chemwriter-ui="image" data-chemwriter-src="https://chemwriter.com/data/structure-11.mol"></div>
      <div data-chemwriter-ui="image" data-chemwriter-src="https://chemwriter.com/data/structure-12.mol"></div>
    </div>
  </body>
</html>

Run Demo

Other approaches are also possible, such as the use of an HTML <table> element.