html代码如下

 <div class="container" >
    <div class="parent">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="parent">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

css部分如何实现呢？我们可以用 flex

.container{
        display: flex;
        flex-flow:column nowrap;
        width: 1000px;/*任意改变长宽*/
        height: 600px;
        background:#ccc;

    }
    .parent{
        display: flex;
         flex-flow:row nowrap;
        flex:1 1 0;/*元素弹性*/
        text-align: center;
    }
    .container .parent:first-child{margin-bottom: 10px;}
    .item{
        flex:1 1 0;/*元素弹性*/
        background: green;
    }
    .parent .item:first-child{margin-right: 10px;}

有兴趣的可以试一下，当容器宽高发生变化时，内容块仍然是全等的四宫格。

当然，以上有代码一个问题，flex在ie9以下是不兼容的。