Responsive 4 box grid from two to one columns

css, grid-layout, html, responsive-design

Solution

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>

Problem

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 `div`s 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:

Original source