Open Source Adventures: Episode 50: Possible scenarios for Putin's successor meme with CSS grid
Tags: css
Published: 2022-05-03 00:07:49

One of my favorite meme formats are various [alignment charts](https://knowyourmeme.com/memes/alignment-charts), but it's actually a bit of a hassle to make one.

I asked some people how they make them, and apparently by hand in Inkscape or such is the answer. I definitely don't have patience for that. So I created one with web technologies.

[Here's the finished meme](https://www.reddit.com/r/NonCredibleDefense/comments/ugsyz9/possible_scenarios_for_putins_successor/).


![Putin's successor chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0uom9jbc6rm4kgnexwzv.png)

And this post is how to create something like that in just HTML and CSS.

### Meme Code

Here's the complete HTML as a single file:

```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 120%;
}
.supergrid {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: 100px 1fr 100px;
}
.left, .right, .top, .bottom {
  font-size: 200%;
  font-family: sans-serif;
  text-align: center;
}
.left {
  grid-column: 1;
  grid-row: 2;
  writing-mode: vertical-lr;
}
.right {
  grid-column: 3;
  grid-row: 2;
  writing-mode: vertical-lr;
}
.top {
  grid-column: 2;
  grid-row: 1;
}
.bottom {
  grid-column: 2;
  grid-row: 3;
}
.grid {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  background: #ccc;
}
.scenario {
  width: 500px;
  height: 300px;
  display: flex;
  gap: 10px;
}
.image {
  display: flex;
  align-items: center;
  justify-content: center;
}
img {
  max-width: 150px;
  display: inline-block;
}
h1 {
  margin: 0;
}
h2 {
  margin: 0;
}
p {
  margin: 0;
  margin-bottom: 0.5em;
}
</style>
</head>
<body>

<div class="supergrid">
  <h3 class="top">Retarded</h3>
  <h3 class="bottom">Enlightened</h3>
  <h3 class="right">Negative Credibility</h3>
  <h3 class="left">Imaginary Credibility</h3>

  <div class="grid">

    <div class="scenario">
      <div class="image">
        <img src="schroeder.png">
      </div>
      <div>
        <h1>Führer Gerhard Schröder</h2>
        <h2>Fourth Reich</h2>
        <p>Germans were playing the long game.</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="lukashenko.jpeg">
      </div>
      <div>
        <h1>Colonel Lukashenko</h2>
        <h2>Reverse Union State</h2>
        <p>All generals got switchbladed, leaving Colonel Lukashenko as the highest ranked officer of the Russian Forces.</p>
        <p>Surprisingly little changes for Russia.</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="pooh.png">
      </div>
      <div>
        <h1>Xi Jinping</h2>
        <h2>Chinese Vassal State</h2>
        <p>Everything in Russia got sold to China to fund the war. War still lost.</p>
        <p>Uralvagonzavod now assembles Huawei phones.</p>
        <p>Most Russians better off this way.</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="assad.jpeg">
      </div>
      <div>
        <h1>Caliph Bashar al-Assad</h2>
        <h2>al-Khilafat al-Ruwsia</h2>
        <p>Recruitment of Syrians goes better than expected.</p>
        <p>Syrians have a different idea once they get to Russia.</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="kirill.jpeg">
      </div>
      <div>
        <h1>Patriarch Kirill</h2>
        <h2>Holy Russian Empire</h2>
        <p>Because only God can save Russia from this mess.</p>
        <p>Spoiler alert: Turns out God did not save Russia from this mess.</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="zelensky.jpeg">
      </div>
      <div>
        <h1>President Zelensky</h2>
        <h2>Greater Ukraine</h2>
        <p>The way things are going, would it really be that surprising?</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="e2.jpeg">
      </div>
      <div>
        <h1>Queen Elizabeth II</h2>
        <h2>Crimean War 2: Electric Boogaloo</h2>
        <p>Charge of the Light Brigade takes Kremlin.</p>
        <p>Sun never sets on the British Empire.</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="kadyrov.jpeg">
      </div>
      <div>
        <h1>Supreme Influencer Kadyrov</h2>
        <h2>Greater Chechnya</h2>
        <p>While Russian soldiers were dying, Tik Tok Army was looting.</p>
        <p>The only armed force left standing, with all the best stolen weapons.</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="shoigu.jpeg">
      </div>
      <div>
        <h1>Khan Sergei Shoigu</h2>
        <h2>Khanate of Tuva</h2>
        <p>3000 black horses of Shoigu won the war.</p>
        <p>Horses can run through mud, Javelin can't lock onto horses, Kyiv taken in 48h.</p>
        <p>Nomad hordes roam free on the steppes once more.</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>
```

### CSS used

Most of it is straightforward stuff, or meme content, but there are two less known CSS tricks:

* `writing-mode: vertical-lr` for sideways text, without any need for rotate transforms
* nested `display: grid` - instead of doing a very complicated 5x5 grid, I created outer grid for just axes, and then inner grid for the scenarios. This really simplifies the code.

The outer grid code is a bit messy, and there are definitely better ways to do it, but it will do.

### Story so far

It wouldn't be too hard to turn this into an online template, but alignment chart style memes are usually quite complex, and they don't follow one template.

[All the code is on GitHub](https://github.com/taw/open-source-adventures).