Google Plus type cards layout in HTML

Question 1

Here's an example Google plus template that uses Bootstrap. It's basically a cards layout with dual navbars at the top.

Code: http://www.bootply.com/90113
Preview: http://www.bootply.com/render/90113

<nav></nav>
<nav></nav>
<div class="container">
   <div class="row">
     <div class="col-md-4 col-sm-6">
        <!-- 1 or more panel/cards inside col -->
     </div>
     <div class="col-md-4 col-sm-6">
        <!-- 1 or more panel/cards inside col -->
     </div>
     <div class="col-md-4 col-sm-6">
        <!-- 1 or more panel/cards inside col -->
     </div>
   </div>
</div>

Question 2

If you want google's cards (used in google keep, drive and a lot more) you might want to go with material design.

Material CSS is a very good way to go. It implements Material Design in CSS and javascript:

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">


<body>
  <div class="container">
    <div class="card">
      <div class="card-image waves-effect waves-block waves-light">
        <img class="activator" src="http://placeimg.com/320/240/any">
      </div>
      <div class="card-content">
        <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">Some information</i></span>
        <p><a href="#">This is a link</a>
        </p>
      </div>
      <div class="card-reveal">
        <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
        <p>Here is some more information about this product that is only revealed once clicked on.</p>
      </div>
    </div>
  </div>
</body>

It is a very popular library on GitHub and has ports for a lot of frameworks/libraries including Sass. I use this library as a ruby gem.