CSS如何实现这样的布局？

可以用flex-box

#container { 
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: column wrap;
  height: 4em;
  width: 3.6em;
}

.same_width {
  background-color:#E91E63; 
  width: 1em; 
  margin: 0.1em; 
}

#a {height:1em}
#b {height:2em}
#c {height:3em}
#d {height:4em}
#e {height:2em}
#f {height:1em}
#g {height:2em}
<div id="container">
  <div id="a" class="same_width">
  </div>
  <div id="b" class="same_width">
  </div>
  <div id="c" class="same_width">
  </div>
  <div id="d" class="same_width">
  </div>
  <div id="e" class="same_width">
  </div>
  <div id="f" class="same_width">
  </div>
  <div id="g" class="same_width">
  </div>
</div>

效果：