仅使用CSS创建响应式，可变高度，可变宽度的网格

Question

我看到砌体及其外观可以解决这个问题，但我正在寻找一种仅限CSS，不引人注目的解决方案。

我有一个我希望以下列方式表现的元素列表：

• 每个框占用33％或200px，以较小者为准
• 单击一个框时，它占用100％或400px，以较小者为准
• 没有排水沟，1px边框
• 调整大小时的快速动画
• 中心元素
• 下面的示例中没有排水沟=没有蓝色
• 不引人注目，仅限CSS的方法

有没有办法在不借助图书馆的情况下实现这一目标？我们只需要支持“现代”浏览器。

我尝试的片段 - 它没有居中，你看到很多蓝色（我更大的担心是，当点击时，有底部间隙）：

$(".event-block").click(function() {
  if ($(this).hasClass('active-block')) {
    $(this).removeClass('active-block')
  } else {
    $(this).addClass('active-block')
  }
})

.event-block {
  width: 33%;
  max-width: 200px;
  float: left;
  margin: 0 -1px -1px 0;
  border: 1px solid red;
  position: relative;
  background-color: black;
  overflow: hidden;
  -o-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -webkit-transition: all .25s ease;
  /* ...and now for the proper property */
  transition: all .25s ease;
}

.container {
  overflow: hidden;
  background-color: blue;
  width: auto;
  margin: auto;
  text-align: center;
}

.event-block:after {
  padding-top: 75%;
  /* 3:2 ratio */
  display: block;
  content: '';
}

.active-block {
  width: 100% !important;
  max-width: 400px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3>Requirements</h3>
<ul>
  <li>Each box takes up 33% or 200px, whichever is smaller</li>
  <li>When a box is clicked, it takes up 100% or 400px, whichever is smaller</li>
  <li>No gutters, 1px borders</li>
  <li>Quick animation on resize</li>
  <li>Centered elements</li>
  <li>No gaps = no blue</li>
</ul>
<hr/>
<div class="container">
  <div class="event-block">
    <p>hello</p>
  </div>
  <div class="event-block">
    <p>hello</p>
  </div>
  <div class="event-block">
    <p>hello</p>
  </div>
  <div class="event-block">
    <p>hello</p>
  </div>
  <div class="event-block">
    <p>hello</p>
  </div>
  <div class="event-block">
    <p>hello</p>
  </div>
  <div class="event-block">
    <p>hello</p>
  </div>
  <div class="event-block">
    <p>hello</p>
  </div>
</div>