Embed an interactive box diagram thingy in markdown (tested with Jekyll, does not work in github readmes or gists)

css-grid-project-explorer.txt

---
layout: post
title: Blaaah!
---

Bla bla:

<style type="text/css">
.frame {
    display: inline-block;
    background-color: #b6bae6;
    padding: 5px;
    border-radius: 5px;
}
.grid { display: inline-grid; }
.grid.w1 { grid-template-columns: auto; }
.grid.w3 { grid-template-columns: auto auto auto; }
.item {
    border: 1px solid black;
    padding: 5px;
    margin: 2px;
    text-align: center;
    color: black;
    font: 14px arial;
}
.item:hover { color: white; }
.item.w3 { grid-column: span 3; }
.item.system {  background-color: CornflowerBlue; }
.item.main { background-color: Orange; }
.item.chip { background-color: RoyalBlue; }
.item.sokol { background-color: HotPink; }
.item.common { background-color: YellowGreen; }
</style>
<div class="frame">
    <div class="grid w3">
        <a class="item main w3" href="https://github.com/floooh/chips-test/blob/master/examples/sokol/cpc.c">cpc.c</a>
        <a class="item system w3" href="https://github.com/floooh/chips/blob/master/systems/cpc.h">cpc.h</a>
        <a class="item chip" href="https://github.com/floooh/chips/blob/master/chips/z80.h">z80.h</a>
        <a class="item chip" href="https://github.com/floooh/chips/blob/master/chips/am40010.h">am40010.h</a>
        <a class="item chip" href="https://github.com/floooh/chips/blob/master/chips/clk.h">clk.h</a>
        <a class="item chip" href="https://github.com/floooh/chips/blob/master/chips/i8255.h">i8255.h</a>
        <a class="item chip" href="https://github.com/floooh/chips/blob/master/chips/upd765.h">upd765.h</a>
        <a class="item chip" href="https://github.com/floooh/chips/blob/master/chips/fdd.h">fdd.h</a>
        <a class="item chip" href="https://github.com/floooh/chips/blob/master/chips/mc6845.h">mc6845.h</a>
        <a class="item chip" href="https://github.com/floooh/chips/blob/master/chips/kbd.h">kbd.h</a>
        <a class="item chip" href="https://github.com/floooh/chips/blob/master/chips/fdd.h">fdd_cpc.h</a>
        <a class="item chip" href="https://github.com/floooh/chips/blob/master/chips/ay38910.h">ay38910.h</a>
        <a class="item chip" href="https://github.com/floooh/chips/blob/master/chips/mem.h">mem.h</a>
    </div>
    <div class="grid w1">
        <a class="item common" href="https://github.com/floooh/chips-test/blob/master/examples/common/common.c">common.c</a>
        <a class="item common" href="https://github.com/floooh/chips-test/blob/master/examples/common/common.h">common.h</a>
        <a class="item common" href="https://github.com/floooh/chips-test/blob/master/examples/common/gfx.h">gfx.h</a>
        <a class="item common" href="https://github.com/floooh/chips-test/blob/master/examples/common/clock.h">clock.h</a>
        <a class="item common" href="https://github.com/floooh/chips-test/blob/master/examples/common/fs.h">fs.h</a>
        <a class="item common" href="https://github.com/floooh/chips-test/blob/master/examples/common/keybuf.h">keybuf.h</a>
    </div>
    <div class="grid w1">
        <a class="item sokol" href="https://github.com/floooh/chips-test/blob/master/examples/common/sokol.c">sokol.c</a>
        <a class="item sokol" href="https://github.com/floooh/sokol/blob/master/sokol_app.h">sokol_app.h</a>
        <a class="item sokol" href="https://github.com/floooh/sokol/blob/master/sokol_gfx.h">sokol_gfx.h</a>
        <a class="item sokol" href="https://github.com/floooh/sokol/blob/master/sokol_audio.h">sokol_audio.h</a>
        <a class="item sokol" href="https://github.com/floooh/sokol/blob/master/sokol_time.h">sokol_time.h</a>
        <a class="item sokol" href="https://github.com/floooh/sokol/blob/master/sokol_args.h">sokol_args.h</a>
    </div>
</div>

Bla bla bla...

Looks like this: