Responsive 4 box grid from two to one columns

Question

I'm a beginner in css and I have a little problem. I tested different methods to handle a responsive 4 div grid with css, and I failed.

I want to responsively arrange the 4 divs as an grid with 2 columns and, if the display is to narrow it should be floating to a one column layout.

Here is a sketch of the responsive grid:

Answer 1

Here is a simple responsive grid with 4 div boxes in plain CSS and HTML it aranges from two to one columns when the browser width becomes smaller :

DEMO (resize the result window to see the effect)

Note that the max-width value on the #container is set to 450px so that 2 blocks + their margin can fit by width in two colmuns.

When the widow is smaller than 450px the width of the #container adapts to the window width and as the block can't fit anymore, they rearage to one column.

#container {
  text-align: center;
  max-width: 450px;
  margin: 0 auto;
}
.block {
  width: 200px;
  height: 200px;
  margin: 10px;
  display: inline-block;
  background: #00CC99;
}

<div id="container">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
</div>