CSS - how to resize a grid and its cells so they are always square?

Question

I'm trying to build a Tic Tac Toe board, which is dynamically resized according to screen/browser size.
How do I keep the grid proportions (gaps vs cell size) and the cells square? I've tried dynamically resizing the cells themselves, but then they end up with huge gaps between them.
https://code.sololearn.com/W9yphqOgt6ze/?ref=app

Answer 1

use vmin (take minimum of viewport width and viewport height)
https://code.sololearn.com/Wg1FIJV6F30O/?ref=app

Answer 2

elise You are welcome.

As you have use the word "teach", I ought to provide you with the following supplementary tutorials:

https://code.sololearn.com/WrgbrFC038ma/?ref=app

https://code.sololearn.com/WTnC2BJ6tJKl/?ref=app

which are hidden in these main tutorials:

https://code.sololearn.com/W3gS00IGw160/?ref=app

https://code.sololearn.com/W4CYCf5Izf4Q/?ref=app

Answer 3

Gordon thank you! For solving it and teaching me about viewport units!