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

HTML & CSS
1

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

2

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;
3

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
4

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

5

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

6

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

7

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-
8

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

2 Likes
9

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

10

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

11

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

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.