How to make a new crossword from the CSS-Only Crossword

How do you calculate the values for the grid-template-column and rows repeat property? I need a setup for 14 columns and 13 rows.
Thanks

This is in regard to the CSS-Only Crossword with code at https://codepen.io/adrianroworth/pen/OpeyZq.

I am a fan of the Keep It Simple Stupid design principle. The SCSS code has a fairly obvious place to first investigate.

$crossword-column-count: 13;
$crossword-row-count: 13;

The trouble is that the code fails to follow through with those named values.

Using the named values

So, we also want spacing for the rows and columns:

$crossword-column-count: 13;
$crossword-row-count: 13;
$crossword-column-spacing: percentage(1 / $crossword-column-count);
$crossword-row-spacing: percentage(1 / $crossword-row-count);

And lastly, to update the grid-template line:

	grid-template: 
		repeat($crossword-row-count, $crossword-row-spacing) / 
		repeat($crossword-column-count, $crossword-column-spacing);

And there you go - a 13 column by 13 row grid that uses those named values.

Achieving a 14x13 grid

Now that the named values are being used, you can easily get a 14x13 grid by making one simple change:

$crossword-column-count: 14;
$crossword-row-count: 13;
2 Likes

I typed this in my notepad and saved as a html and it did not make a grid.

Is this css code:
$crossword -column-count:14;

They are modifications to the existing css crossword at https://codepen.io/adrianroworth/pen/OpeyZq

I tried the codependen that you sent and it worked; there was a puzzle grid!!!
The option, view compiled css was not there at first now it is and I clicked on that option.

Do I add this to make grid:

$crossword -column-count:14;
$crossword-row-count: 13;
$crossword-column-spacing: percentage(1 / $crossword-column-count);
$crossword-row-spacing: percentage(1 / $crossword-row-count);

	grid-template: 
		repeat($crossword-row-count, $crossword-row-spacing) / 
		repeat($crossword-column-count, $crossword-column-

What you should do is to read and follow the instructions that I gave in my post.

2 Likes

How hard would it be to change this into an app for kindle fire hd 8

What experience have you got in writing apps for the Kindle Fire?

None, but I have been reading that you could convert the html to apk for ki
ndke. Is that right?