Capa Responsive CSS Grid

Posted on October 30, 2018

Capa is a responsive lightweight CSS grid based on a 10-column grid system where each column has a width of 10% that together add up to 100%.

How to Use Capa Grid

Download Capa Grid and include the stylesheet file in the < head > tag.

  <link rel="stylesheet" type="text/css" media="all" href="css/capa.min.css">

The syntax for Capa CSS Grid is based a very simple concept. Most CSS classes start with a letter to represent a device (c, d, t, m), followed by a number to indicate a percentage.

Available grid letters:

Available Numbers:

Multiples of 5, the numbers 33 and 66.

5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 75, 80, 85, 90, 95, and 100.

Example:

<div class="container">
  <div class="c70 t100">
      70% width div, 100% width on tablets, as well as mobile devices.
  </div>
  <div class="c30 t100">
      30% width div, 100% width on tablets, as well as mobile devices.
  </div>
</div>

< Go back