Wie Links in einer Grid-Liste alle auf gleiche Höhe und vertikal zentriert bekommen?

[Felix Riesterer]

Liebe Mitlesende,

eine Optionenliste enthält Links:

<ul id="options">
  <li><a href="#A">A</a></li>
  <li><a href="#B">B</a></li>
  <li><a href="#C">C - mit viel langem und störendem Text dazu gekleistert, damit's auch wirklich umbricht</a></li>
  <li><a href="#D">D</a></li>
</ul>

Die Liste ist per Grid-Layout einzeilig auf vier Spalten (bei schmaleren Viewports 2x2) gesetzt. Wie erreiche ich, dass die Links jeweils die volle Höhe der li-Elemente erhalten und dabei auch noch vertikal zentriert sind? Muss ich dazu die a-Elemente auf display:flex setzen, oder geht das auch mit dem ursprünglichen Grid?

[jsFiddle]

Liebe Grüße

Felix Riesterer