pure.css grid question

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/pure-min.css">
  <link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/grids-responsive-min.css" />
  <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/base-min.css">
  <style>
    sector { min-height: 100px; min-width: 199px; }
    sector:nth-of-type(1) {  background: IndianRed; }
    sector:nth-of-type(2) {  background: Moccasin; }
    sector:nth-of-type(3n) {  background: thistle; }
    sector:nth-of-type(4) {  background: seagreen; }
    sector:nth-of-type(5) {  background: DarkSlateBlue; }
    sector:nth-of-type(7) {  background: darkviolet; }
  </style>
</head>
<body>

<div class="pure-g">
  <sector class="pure-u-1 pure-u-md-1-3">Foo</sector>
  <sector class="pure-u-1 pure-u-md-1-3">Bar</sector>
  <sector class="pure-u-1 pure-u-md-1-3">Bar</sector>
  <sector class="pure-u-1 pure-u-md-1-2">Baz</sector>
  <sector class="pure-u-1 pure-u-md-1-2">Bing</sector>
  <sector class="pure-u-1 pure-u-md-1-2">Hah</sector>
  <sector class="pure-u-1 pure-u-md-1-2">Hum</sector>
</div>
</body>
</html>