Make Polymer Cards Align horizontally and vertically

Sorry if this is an easy problem to solve, I am still relatively new to polymer. Basically I just can not figure out how to make the cards stack or go side by side based on the available screen space. So in the image I attached, the cards are just stacked on top of one another but I want them to go side by side if there is available screen space.

My testing is just being done on the pre-made polymer demo so the code below is just my first page / "view1".

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-view1">
  <template>
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;
      }
    </style>



    <div class="card">
      <div class="circle"><img src = "../images/Icons/1Game.png" alt = "Contact" style="width : 42px; padding-top: 10px"></div>
      <h1>Game Development<div class="rightSide">Unity3D</div></h1>

      <p>srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn </p>
    </div>

    <div class="card">
      <div class="circle"><img src = "../images/Icons/1Game.png" alt = "Contact" style="width : 42px; padding-top: 10px"></div>
      <h1>Game Development<div class="rightSide">Unity3D</div></h1>

      <p>srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn </p>
    </div>

    <div class="card">
      <div class="circle"><img src = "../images/Icons/1Game.png" alt = "Contact" style="width : 42px; padding-top: 10px"></div>
      <h1>Game Development<div class="rightSide">Unity3D</div></h1>

      <p>srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn </p>
    </div>



  </template>

  <script>
    Polymer({
      is: 'my-view1'
    });
  </script>
</dom-module>

Solution

Consider using display: inline-block, which is widely supported.

.card {
  display: inline-block;  /* layout side by side; wrap if needed */
}

HTMLImports.whenReady(() => {
  Polymer({
    is: 'my-view1'
  });
});

body {
  margin: 0;
  font-family: Roboto, Noto, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  background-color: #eeeeee;
}

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-icon/iron-icon.html">
  <link rel="import" href="iron-icons/hardware-icons.html">
</head>
<body>
  <my-view1></my-view1>

  <dom-module id="my-view1">
    <template>
      <style include="shared-styles">
        :host {
          display: block;
          padding: 10px;
        }

        h1 {
          display: flex;
          justify-content: space-between;
        }

        iron-icon {
          color: #52ae54;
          --iron-icon-width: 40px;
          --iron-icon-height: 40px;
        }

        .card {
          display: inline-block;
          width: 25%;
          min-width: 250px;
          max-width: 300px;
          margin: 24px 7px;
        }

        .rightSide {
          display: inline;
          font-weight: normal;
        }
    </style>

      <template is="dom-repeat" items='[1,2,3,4]'>
        <div class="card">
          <div class="circle"><iron-icon icon="hardware:videogame-asset"></iron-icon></div>
          <h1>Game Development [[index]]<div class="rightSide">Unity3D</div></h1>
          <p>srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn </p>
        </div>
      </template>
    </template>
  </dom-module>
  
  <dom-module id="shared-styles">
    <template>
      <style>
        h1 {
          margin: 16px 0;
          font-size: 22px;
          color: black;
        }

        .card {
          margin: 24px;
          padding: 16px;
          color: #757575;
          border-radius: 5px;
          background-color: #fff;
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
        }
        
        .circle {
          display: inline-block;
          width: 64px;
          height: 64px;
          text-align: center;
          color: #555;
          border-radius: 50%;
          background: #ddd;
          font-size: 30px;
          line-height: 64px;
        }
      </style>
    </template>
  </dom-module>
</body>

codepen