Build A CSS Word Search Game In ... CSS!

I've heard it so many times: CSS is not a programming language — or — why do it in CSS, when you can do it in JavaScript?

Why, indeed? Because I love CSS, and love a fun challenge!

In this tutorial, we'll be building a CSS Word Search Game in CSS:

In an earlier article, I looked into creative ways you can utilize CSS grid.

The approach for the word game is similar: A 12x12 grid using grid-area for the words.

Let's dive in.

Markup

For each word, we create a <fieldset>:

<fieldset name="w7" class="horizontal"> <input type="checkbox" value="G"> <input type="checkbox" value="A"> <input type="checkbox" value="P"> </fieldset> 

name is a unique identifier for the word, and for class we can use either horizontal or vertical.

CSS

First, we need a wrapper with the 12x12 grid:

.word-search { aspect-ratio: 1 / 1; container-type: inline-size; display: grid; font-family: system-ui, sans-serif; font-size: 3.5cqi; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 1fr); padding: 1px; } 

Then, we style the <input type="checkbox">-tags:

input { all: unset; aspect-ratio: 1 / 1; background: #FFF; display: grid; place-content: center; user-select: none; width: calc((100cqi / 12) - 1px); &:checked { background: var(--bg, #FF0); color: var(--c, #000); } &::after { content: attr(value); } } 

First, we unset all the defaults, then set the width of each to a 12th of the total width minus the gap.

A pseudo-element with the value of the input is placed ::after.

Now, let's add the CSS for the word we created in the markup earlier – including the "logic" of the game:

[name=w7] { grid-area: 2/ 10 / 2 / 13; &:has(:checked + :checked + :checked) { --bg: #FF69B4; } } 

So, what's going on?

The grid-area-declaration places the word in the second row, the tenth column, ends at the same row and at the 13th column, as the word is 3 characters, so 10 + 3 = 13.

Next, we check if all the <input>s in the fieldset are :checked. Because it's a 3-letter word, we need to check for :checked 3 times.

Can you guess how many :checked are required for 4-letter words?! 😂

Let's click on those 3 letters — the final 3 in the second row. When you click on a single letter, the background color turns yellow, but when all 3 have been clicked/checked, we get:

And that's it — now find 25 words more (or just click all the letters!). When you've found all the words, you'll have 3 slots left, with the letters A, B and C.

Demo