title: css - grid div 2x2 centered but turns to 1x4 on smaller screens
body: <p>hello this is driving me mad can anyone help. i want a grid of divs 2x2 centered on a large screen but when viewed on smaller screen moves to 1x4 but still centered. so far i have this it works but aligns left on small 1x4 view. i have tried to us inline-block instead of float:left  but then you cant add any further content with the #frame-block. the width must be fixed widths at 500px</p>
  
  <pre><code>#frame-block {
  width: 500px;
  border: 2px #0066FF solid;
  margin:5px;
  height:400px;
  float:left;
  }
  
  
  #frame-container {
    text-align: center;
  }
  
  #frame-main {
    display: inline-block;
    vertical-align: middle;
  }​
  
  &lt;div id="frame-container"&gt;
  
    &lt;div id="frame-main"&gt;
  
       &lt;div id="frame-block"&gt;&lt;/div&gt;
        &lt;div id="frame-block"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>