123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              - @tiles0 = ['r1c1','r1c57','r2c2','r2c3','r2c4','r2c5','r2c6','r2c7','r2c8','r2c9','r2c10','r2c11','r2c12','r2c13','r2c14','r2c15','r2c16','r2c17','r2c18','r2c19','r2c20','r2c21','r2c22','r2c23','r2c24','r2c25','r2c26','r2c27','r2c28','r2c29','r2c30','r2c31','r2c32','r2c33','r2c34','r2c35','r2c36','r2c37','r2c38','r2c39','r2c40','r2c41','r2c42','r2c43','r2c44','r2c45','r2c46','r2c47','r2c48','r2c49','r2c50','r2c51','r2c52','r2c53','r2c54','r2c55','r2c56','r3c2','r3c4','r3c6','r3c8','r3c10','r3c12','r3c14','r3c16','r3c18','r3c20','r3c22','r3c24','r3c26','r3c28','r3c30','r3c32','r3c34','r3c36','r3c38','r3c40','r3c42','r3c44','r3c46','r3c48','r3c50','r3c52','r3c54','r3c56','r4c2','r4c3','r4c4','r4c5','r4c6','r4c7','r4c8','r4c9','r4c10','r4c11','r4c12','r4c13','r4c14','r4c15','r4c16','r4c17','r4c18','r4c19','r4c20','r4c21','r4c22','r4c23','r4c24','r4c25','r4c26','r4c27','r4c28','r4c29','r4c30','r4c31','r4c32','r4c33','r4c34','r4c35','r4c36','r4c37','r4c38','r4c39','r4c40','r4c41','r4c42','r4c43','r4c44','r4c45','r4c46','r4c47','r4c48','r4c49','r4c50','r4c51','r4c52','r4c53','r4c54','r4c55','r4c56','r5c2','r5c4','r5c54','r5c56','r6c2','r6c3','r6c4','r6c6','r6c7','r6c8','r6c9','r6c10','r6c11','r6c12','r6c13','r6c14','r6c15','r6c16','r6c17','r6c18','r6c19','r6c20','r6c21','r6c22','r6c23','r6c24','r6c25','r6c26','r6c27','r6c28','r6c29','r6c30','r6c31','r6c32','r6c33','r6c34','r6c35','r6c36','r6c37','r6c38','r6c39','r6c40','r6c41','r6c42','r6c43','r6c44','r6c45','r6c46','r6c47','r6c48','r6c49','r6c50','r6c51','r6c52','r6c54','r6c55','r6c56','r7c2','r7c4','r7c6','r7c7','r7c8','r7c9','r7c10','r7c11','r7c12','r7c14','r7c15','r7c16','r7c17','r7c18','r7c19','r7c20','r7c22','r7c23','r7c24','r7c25','r7c26','r7c27','r7c28','r7c30','r7c31','r7c32','r7c33','r7c34','r7c35','r7c36','r7c38','r7c39','r7c40','r7c41','r7c42','r7c43','r7c44','r7c46','r7c47','r7c48','r7c49','r7c50','r7c51','r7c52','r7c54','r7c56','r8c2','r8c3','r8c4','r8c6','r8c7','r8c11','r8c13','r8c15','r8c19','r8c21','r8c23','r8c27','r8c29','r8c31','r8c35','r8c37','r8c39','r8c43','r8c45','r8c47','r8c51','r8c52','r8c54','r8c55','r8c56','r9c2','r9c4','r9c6','r9c7','r9c10','r9c11','r9c12','r9c14','r9c15','r9c16','r9c17','r9c18','r9c19','r9c20','r9c22','r9c23','r9c24','r9c25','r9c26','r9c27','r9c28','r9c30','r9c31','r9c32','r9c33','r9c34','r9c35','r9c36','r9c38','r9c39','r9c40','r9c41','r9c42','r9c43','r9c44','r9c46','r9c47','r9c48','r9c51','r9c52','r9c54','r9c56','r10c2','r10c3','r10c4','r10c6','r10c7','r10c9','r10c10','r10c11','r10c12','r10c13','r10c14','r10c15','r10c16','r10c17','r10c18','r10c19','r10c20','r10c21','r10c22','r10c23','r10c24','r10c25','r10c26','r10c27','r10c28','r10c29','r10c30','r10c31','r10c32','r10c33','r10c34','r10c35','r10c36','r10c37','r10c38','r10c39','r10c40','r10c41','r10c42','r10c43','r10c44','r10c45','r10c46','r10c47','r10c48','r10c49','r10c51','r10c52','r10c54','r10c55','r10c56','r11c2','r11c4','r11c6','r11c7','r11c8','r11c9','r11c10','r11c48','r11c49','r11c50','r11c51','r11c52','r11c54','r11c56','r12c2','r12c3','r12c4','r12c6','r12c7','r12c9','r12c10','r12c12','r12c13','r12c14','r12c15','r12c16','r12c17','r12c18','r12c19','r12c20','r12c21','r12c22','r12c23','r12c24','r12c25','r12c26','r12c27','r12c28','r12c30','r12c31','r12c32','r12c33','r12c34','r12c35','r12c36','r12c37','r12c38','r12c39','r12c40','r12c41','r12c42','r12c43','r12c44','r12c45','r12c46','r12c48','r12c49','r12c51','r12c52','r12c54','r12c55','r12c56','r13c2','r13c4','r13c6','r13c8','r13c10','r13c12','r13c13','r13c14','r13c15','r13c16','r13c17','r13c18','r13c19','r13c20','r13c21','r13c22','r13c23','r13c24','r13c25','r13c26','r13c27','r13c28','r13c30','r13c31','r13c32','r13c33','r13c34','r13c35','r13c36','r13c37','r13c38','r13c39','r13c40','r13c41','r13c42','r13c43','r13c44','r13c45','r13c46','r13c48','r13c50','r13c52','r13c54','r13c56','r14c2','r14c3','r14c4','r14c6','r14c7','r14c9','r14c10','r14c12','r14c13','r14c14','r14c15','r14c16','r14c17','r14c18','r14c19','r14c20','r14c21','r14c22','r14c23','r14c24','r14c25','r14c26','r14c27','r14c28','r14c30','r14c31','r14c32','r14c33','r14c34','r14c35','r14c36','r14c37','r14c38','r14c39','r14c40','r14c41','r14c42','r14c43','r14c44','r14c45','r14c46','r14c48','r14c49','r14c51','r14c52','r14c54','r14c55','r14c56']
- @tiles1 = ['r15c2','r15c4','r15c6','r15c7','r15c8','r15c9','r15c10','r15c12','r15c13','r15c14','r15c15','r15c16','r15c17','r15c18','r15c19','r15c20','r15c21','r15c22','r15c23','r15c24','r15c25','r15c26','r15c27','r15c28','r15c30','r15c31','r15c32','r15c33','r15c34','r15c35','r15c36','r15c37','r15c38','r15c39','r15c40','r15c41','r15c42','r15c43','r15c44','r15c45','r15c46','r15c48','r15c49','r15c50','r15c51','r15c52','r15c54','r15c56','r16c2','r16c3','r16c4','r16c6','r16c7','r16c9','r16c10','r16c12','r16c13','r16c14','r16c15','r16c16','r16c17','r16c18','r16c19','r16c20','r16c21','r16c22','r16c23','r16c24','r16c25','r16c26','r16c27','r16c28','r16c30','r16c31','r16c32','r16c33','r16c34','r16c35','r16c36','r16c37','r16c38','r16c39','r16c40','r16c41','r16c42','r16c43','r16c44','r16c45','r16c46','r16c48','r16c49','r16c51','r16c52','r16c54','r16c55','r16c56','r17c2','r17c4','r17c6','r17c7','r17c9','r17c10','r17c12','r17c13','r17c14','r17c15','r17c16','r17c17','r17c18','r17c19','r17c20','r17c21','r17c22','r17c23','r17c24','r17c25','r17c26','r17c27','r17c28','r17c30','r17c31','r17c32','r17c33','r17c34','r17c35','r17c36','r17c37','r17c38','r17c39','r17c40','r17c41','r17c42','r17c43','r17c44','r17c45','r17c46','r17c48','r17c49','r17c51','r17c52','r17c54','r17c56','r18c2','r18c3','r18c4','r18c6','r18c7','r18c9','r18c10','r18c12','r18c13','r18c14','r18c15','r18c16','r18c17','r18c18','r18c19','r18c20','r18c21','r18c22','r18c23','r18c24','r18c25','r18c26','r18c27','r18c28','r18c30','r18c31','r18c32','r18c33','r18c34','r18c35','r18c36','r18c37','r18c38','r18c39','r18c40','r18c41','r18c42','r18c43','r18c44','r18c45','r18c46','r18c48','r18c49','r18c51','r18c52','r18c54','r18c55','r18c56','r19c2','r19c4','r19c6','r19c7','r19c8','r19c9','r19c10','r19c12','r19c13','r19c14','r19c15','r19c16','r19c17','r19c18','r19c19','r19c20','r19c21','r19c22','r19c23','r19c24','r19c25','r19c26','r19c27','r19c28','r19c30','r19c31','r19c32','r19c33','r19c34','r19c35','r19c36','r19c37','r19c38','r19c39','r19c40','r19c41','r19c42','r19c43','r19c44','r19c45','r19c46','r19c48','r19c49','r19c50','r19c51','r19c52','r19c54','r19c56','r20c2','r20c3','r20c4','r20c6','r20c7','r20c9','r20c10','r20c12','r20c13','r20c14','r20c15','r20c16','r20c17','r20c18','r20c19','r20c20','r20c21','r20c22','r20c23','r20c24','r20c25','r20c26','r20c27','r20c29','r20c31','r20c32','r20c33','r20c34','r20c35','r20c36','r20c37','r20c38','r20c39','r20c40','r20c41','r20c42','r20c43','r20c44','r20c45','r20c46','r20c48','r20c49','r20c51','r20c52','r20c54','r20c55','r20c56','r21c2','r21c4','r21c6','r21c8','r21c10','r21c12','r21c13','r21c14','r21c15','r21c16','r21c17','r21c18','r21c19','r21c20','r21c21','r21c22','r21c23','r21c24','r21c25','r21c26','r21c28','r21c29','r21c30','r21c32','r21c33','r21c34','r21c35','r21c36','r21c37','r21c38','r21c39','r21c40','r21c41','r21c42','r21c43','r21c44','r21c45','r21c46','r21c48','r21c50','r21c52','r21c54','r21c56','r22c2','r22c3','r22c4','r22c6','r22c7','r22c9','r22c10','r22c12','r22c13','r22c14','r22c15','r22c16','r22c17','r22c18','r22c19','r22c20','r22c21','r22c22','r22c23','r22c24','r22c25','r22c27','r22c28','r22c29','r22c30','r22c31','r22c33','r22c34','r22c35','r22c36','r22c37','r22c38','r22c39','r22c40','r22c41','r22c42','r22c43','r22c44','r22c45','r22c46','r22c48','r22c49','r22c51','r22c52','r22c54','r22c55','r22c56','r23c2','r23c4','r23c6','r23c7','r23c8','r23c9','r23c10','r23c12','r23c13','r23c14','r23c15','r23c16','r23c17','r23c18','r23c19','r23c20','r23c21','r23c22','r23c23','r23c24','r23c26','r23c27','r23c28','r23c29','r23c30','r23c31','r23c32','r23c34','r23c35','r23c36','r23c37','r23c38','r23c39','r23c40','r23c41','r23c42','r23c43','r23c44','r23c45','r23c46','r23c48','r23c49','r23c50','r23c51','r23c52','r23c54','r23c56','r24c2','r24c3','r24c4','r24c6','r24c7','r24c9','r24c10','r24c12','r24c13','r24c14','r24c15','r24c16','r24c17','r24c18','r24c19','r24c20','r24c21','r24c22','r24c23','r24c25','r24c26','r24c27','r24c28','r24c30','r24c31','r24c32','r24c33','r24c35','r24c36','r24c37','r24c38','r24c39','r24c40','r24c41','r24c42','r24c43','r24c44','r24c45','r24c46','r24c48','r24c49','r24c51','r24c52','r24c54','r24c55','r24c56','r25c2','r25c4','r25c6','r25c7','r25c9','r25c10','r25c12','r25c13','r25c14','r25c15','r25c16','r25c17','r25c18','r25c19','r25c20','r25c21','r25c22','r25c24','r25c25','r25c26','r25c27','r25c31','r25c32','r25c33','r25c34','r25c36','r25c37','r25c38','r25c39','r25c40','r25c41','r25c42','r25c43','r25c44','r25c45','r25c46','r25c48','r25c49','r25c51','r25c52','r25c54','r25c56','r26c2','r26c3','r26c4','r26c6','r26c7','r26c9','r26c10','r26c12','r26c13','r26c14','r26c15','r26c16','r26c17','r26c18','r26c19','r26c20','r26c21','r26c23','r26c24','r26c25','r26c26','r26c32','r26c33','r26c34','r26c35','r26c37','r26c38','r26c39','r26c40','r26c41','r26c42','r26c43','r26c44','r26c45','r26c46','r26c48','r26c49','r26c51','r26c52','r26c54','r26c55','r26c56','r27c2','r27c4','r27c6','r27c7','r27c8','r27c9','r27c10','r27c12','r27c13','r27c14','r27c15','r27c16','r27c17','r27c18','r27c19','r27c20','r27c22','r27c23','r27c24','r27c25','r27c29','r27c33','r27c34','r27c35','r27c36','r27c38','r27c39','r27c40','r27c41','r27c42','r27c43','r27c44','r27c45','r27c46','r27c48','r27c49','r27c50','r27c51','r27c52','r27c54','r27c56','r28c2','r28c3','r28c4','r28c6','r28c7','r28c9','r28c10','r28c12','r28c13','r28c14','r28c15','r28c16','r28c17','r28c18','r28c19','r28c21','r28c22','r28c23','r28c24','r28c28','r28c29','r28c30','r28c34','r28c35','r28c36','r28c37','r28c39','r28c40','r28c41','r28c42','r28c43','r28c44','r28c45','r28c46','r28c48','r28c49','r28c51','r28c52','r28c54','r28c55','r28c56']
- @tiles2 = ['r29c2','r29c4','r29c6','r29c8','r29c10','r29c20','r29c21','r29c22','r29c23','r29c27','r29c28','r29c30','r29c31','r29c35','r29c36','r29c37','r29c38','r29c48','r29c50','r29c52','r29c54','r29c56','r30c2','r30c3','r30c4','r30c6','r30c7','r30c9','r30c10','r30c12','r30c13','r30c14','r30c15','r30c16','r30c17','r30c18','r30c19','r30c21','r30c22','r30c23','r30c24','r30c28','r30c29','r30c30','r30c34','r30c35','r30c36','r30c37','r30c39','r30c40','r30c41','r30c42','r30c43','r30c44','r30c45','r30c46','r30c48','r30c49','r30c51','r30c52','r30c54','r30c55','r30c56','r31c2','r31c4','r31c6','r31c7','r31c8','r31c9','r31c10','r31c12','r31c13','r31c14','r31c15','r31c16','r31c17','r31c18','r31c19','r31c20','r31c22','r31c23','r31c24','r31c25','r31c29','r31c33','r31c34','r31c35','r31c36','r31c38','r31c39','r31c40','r31c41','r31c42','r31c43','r31c44','r31c45','r31c46','r31c48','r31c49','r31c50','r31c51','r31c52','r31c54','r31c56','r32c2','r32c3','r32c4','r32c6','r32c7','r32c9','r32c10','r32c12','r32c13','r32c14','r32c15','r32c16','r32c17','r32c18','r32c19','r32c20','r32c21','r32c23','r32c24','r32c25','r32c26','r32c32','r32c33','r32c34','r32c35','r32c37','r32c38','r32c39','r32c40','r32c41','r32c42','r32c43','r32c44','r32c45','r32c46','r32c48','r32c49','r32c51','r32c52','r32c54','r32c55','r32c56','r33c2','r33c4','r33c6','r33c7','r33c9','r33c10','r33c12','r33c13','r33c14','r33c15','r33c16','r33c17','r33c18','r33c19','r33c20','r33c21','r33c22','r33c24','r33c25','r33c26','r33c27','r33c31','r33c32','r33c33','r33c34','r33c36','r33c37','r33c38','r33c39','r33c40','r33c41','r33c42','r33c43','r33c44','r33c45','r33c46','r33c48','r33c49','r33c51','r33c52','r33c54','r33c56','r34c2','r34c3','r34c4','r34c6','r34c7','r34c9','r34c10','r34c12','r34c13','r34c14','r34c15','r34c16','r34c17','r34c18','r34c19','r34c20','r34c21','r34c22','r34c23','r34c25','r34c26','r34c27','r34c28','r34c30','r34c31','r34c32','r34c33','r34c35','r34c36','r34c37','r34c38','r34c39','r34c40','r34c41','r34c42','r34c43','r34c44','r34c45','r34c46','r34c48','r34c49','r34c51','r34c52','r34c54','r34c55','r34c56','r35c2','r35c4','r35c6','r35c7','r35c8','r35c9','r35c10','r35c12','r35c13','r35c14','r35c15','r35c16','r35c17','r35c18','r35c19','r35c20','r35c21','r35c22','r35c23','r35c24','r35c26','r35c27','r35c28','r35c29','r35c30','r35c31','r35c32','r35c34','r35c35','r35c36','r35c37','r35c38','r35c39','r35c40','r35c41','r35c42','r35c43','r35c44','r35c45','r35c46','r35c48','r35c49','r35c50','r35c51','r35c52','r35c54','r35c56','r36c2','r36c3','r36c4','r36c6','r36c7','r36c9','r36c10','r36c12','r36c13','r36c14','r36c15','r36c16','r36c17','r36c18','r36c19','r36c20','r36c21','r36c22','r36c23','r36c24','r36c25','r36c27','r36c28','r36c29','r36c30','r36c31','r36c33','r36c34','r36c35','r36c36','r36c37','r36c38','r36c39','r36c40','r36c41','r36c42','r36c43','r36c44','r36c45','r36c46','r36c48','r36c49','r36c51','r36c52','r36c54','r36c55','r36c56','r37c2','r37c4','r37c6','r37c8','r37c10','r37c12','r37c13','r37c14','r37c15','r37c16','r37c17','r37c18','r37c19','r37c20','r37c21','r37c22','r37c23','r37c24','r37c25','r37c26','r37c28','r37c29','r37c30','r37c32','r37c33','r37c34','r37c35','r37c36','r37c37','r37c38','r37c39','r37c40','r37c41','r37c42','r37c43','r37c44','r37c45','r37c46','r37c48','r37c50','r37c52','r37c54','r37c56','r38c2','r38c3','r38c4','r38c6','r38c7','r38c9','r38c10','r38c12','r38c13','r38c14','r38c15','r38c16','r38c17','r38c18','r38c19','r38c20','r38c21','r38c22','r38c23','r38c24','r38c25','r38c26','r38c27','r38c29','r38c31','r38c32','r38c33','r38c34','r38c35','r38c36','r38c37','r38c38','r38c39','r38c40','r38c41','r38c42','r38c43','r38c44','r38c45','r38c46','r38c48','r38c49','r38c51','r38c52','r38c54','r38c55','r38c56','r39c2','r39c4','r39c6','r39c7','r39c8','r39c9','r39c10','r39c12','r39c13','r39c14','r39c15','r39c16','r39c17','r39c18','r39c19','r39c20','r39c21','r39c22','r39c23','r39c24','r39c25','r39c26','r39c27','r39c28','r39c30','r39c31','r39c32','r39c33','r39c34','r39c35','r39c36','r39c37','r39c38','r39c39','r39c40','r39c41','r39c42','r39c43','r39c44','r39c45','r39c46','r39c48','r39c49','r39c50','r39c51','r39c52','r39c54','r39c56','r40c2','r40c3','r40c4','r40c6','r40c7','r40c9','r40c10','r40c12','r40c13','r40c14','r40c15','r40c16','r40c17','r40c18','r40c19','r40c20','r40c21','r40c22','r40c23','r40c24','r40c25','r40c26','r40c27','r40c28','r40c30','r40c31','r40c32','r40c33','r40c34','r40c35','r40c36','r40c37','r40c38','r40c39','r40c40','r40c41','r40c42','r40c43','r40c44','r40c45','r40c46','r40c48','r40c49','r40c51','r40c52','r40c54','r40c55','r40c56','r41c2','r41c4','r41c6','r41c7','r41c9','r41c10','r41c12','r41c13','r41c14','r41c15','r41c16','r41c17','r41c18','r41c19','r41c20','r41c21','r41c22','r41c23','r41c24','r41c25','r41c26','r41c27','r41c28','r41c30','r41c31','r41c32','r41c33','r41c34','r41c35','r41c36','r41c37','r41c38','r41c39','r41c40','r41c41','r41c42','r41c43','r41c44','r41c45','r41c46','r41c48','r41c49','r41c51','r41c52','r41c54','r41c56','r42c2','r42c3','r42c4','r42c6','r42c7','r42c9','r42c10','r42c12','r42c13','r42c14','r42c15','r42c16','r42c17','r42c18','r42c19','r42c20','r42c21','r42c22','r42c23','r42c24','r42c25','r42c26','r42c27','r42c28','r42c30','r42c31','r42c32','r42c33','r42c34','r42c35','r42c36','r42c37','r42c38','r42c39','r42c40','r42c41','r42c42','r42c43','r42c44','r42c45','r42c46','r42c48','r42c49','r42c51','r42c52','r42c54','r42c55','r42c56']
- @tiles3 = ['r43c2','r43c4','r43c6','r43c7','r43c8','r43c9','r43c10','r43c12','r43c13','r43c14','r43c15','r43c16','r43c17','r43c18','r43c19','r43c20','r43c21','r43c22','r43c23','r43c24','r43c25','r43c26','r43c27','r43c28','r43c30','r43c31','r43c32','r43c33','r43c34','r43c35','r43c36','r43c37','r43c38','r43c39','r43c40','r43c41','r43c42','r43c43','r43c44','r43c45','r43c46','r43c48','r43c49','r43c50','r43c51','r43c52','r43c54','r43c56','r44c2','r44c3','r44c4','r44c6','r44c7','r44c9','r44c10','r44c12','r44c13','r44c14','r44c15','r44c16','r44c17','r44c18','r44c19','r44c20','r44c21','r44c22','r44c23','r44c24','r44c25','r44c26','r44c27','r44c28','r44c30','r44c31','r44c32','r44c33','r44c34','r44c35','r44c36','r44c37','r44c38','r44c39','r44c40','r44c41','r44c42','r44c43','r44c44','r44c45','r44c46','r44c48','r44c49','r44c51','r44c52','r44c54','r44c55','r44c56','r45c2','r45c4','r45c6','r45c8','r45c10','r45c12','r45c13','r45c14','r45c15','r45c16','r45c17','r45c18','r45c19','r45c20','r45c21','r45c22','r45c23','r45c24','r45c25','r45c26','r45c27','r45c28','r45c30','r45c31','r45c32','r45c33','r45c34','r45c35','r45c36','r45c37','r45c38','r45c39','r45c40','r45c41','r45c42','r45c43','r45c44','r45c45','r45c46','r45c48','r45c50','r45c52','r45c54','r45c56','r46c2','r46c3','r46c4','r46c6','r46c7','r46c9','r46c10','r46c12','r46c13','r46c14','r46c15','r46c16','r46c17','r46c18','r46c19','r46c20','r46c21','r46c22','r46c23','r46c24','r46c25','r46c26','r46c27','r46c28','r46c30','r46c31','r46c32','r46c33','r46c34','r46c35','r46c36','r46c37','r46c38','r46c39','r46c40','r46c41','r46c42','r46c43','r46c44','r46c45','r46c46','r46c48','r46c49','r46c51','r46c52','r46c54','r46c55','r46c56','r47c2','r47c4','r47c6','r47c7','r47c8','r47c9','r47c10','r47c48','r47c49','r47c50','r47c51','r47c52','r47c54','r47c56','r48c2','r48c3','r48c4','r48c6','r48c7','r48c9','r48c10','r48c11','r48c12','r48c13','r48c14','r48c15','r48c16','r48c17','r48c18','r48c19','r48c20','r48c21','r48c22','r48c23','r48c24','r48c25','r48c26','r48c27','r48c28','r48c29','r48c30','r48c31','r48c32','r48c33','r48c34','r48c35','r48c36','r48c37','r48c38','r48c39','r48c40','r48c41','r48c42','r48c43','r48c44','r48c45','r48c46','r48c47','r48c48','r48c49','r48c51','r48c52','r48c54','r48c55','r48c56','r49c2','r49c4','r49c6','r49c7','r49c10','r49c11','r49c12','r49c14','r49c15','r49c16','r49c17','r49c18','r49c19','r49c20','r49c22','r49c23','r49c24','r49c25','r49c26','r49c27','r49c28','r49c30','r49c31','r49c32','r49c33','r49c34','r49c35','r49c36','r49c38','r49c39','r49c40','r49c41','r49c42','r49c43','r49c44','r49c46','r49c47','r49c48','r49c51','r49c52','r49c54','r49c56','r50c2','r50c3','r50c4','r50c6','r50c7','r50c11','r50c13','r50c15','r50c19','r50c21','r50c23','r50c27','r50c29','r50c31','r50c35','r50c37','r50c39','r50c43','r50c45','r50c47','r50c51','r50c52','r50c54','r50c55','r50c56','r51c2','r51c4','r51c6','r51c7','r51c8','r51c9','r51c10','r51c11','r51c12','r51c14','r51c15','r51c16','r51c17','r51c18','r51c19','r51c20','r51c22','r51c23','r51c24','r51c25','r51c26','r51c27','r51c28','r51c30','r51c31','r51c32','r51c33','r51c34','r51c35','r51c36','r51c38','r51c39','r51c40','r51c41','r51c42','r51c43','r51c44','r51c46','r51c47','r51c48','r51c49','r51c50','r51c51','r51c52','r51c54','r51c56','r52c2','r52c3','r52c4','r52c6','r52c7','r52c8','r52c9','r52c10','r52c11','r52c12','r52c13','r52c14','r52c15','r52c16','r52c17','r52c18','r52c19','r52c20','r52c21','r52c22','r52c23','r52c24','r52c25','r52c26','r52c27','r52c28','r52c29','r52c30','r52c31','r52c32','r52c33','r52c34','r52c35','r52c36','r52c37','r52c38','r52c39','r52c40','r52c41','r52c42','r52c43','r52c44','r52c45','r52c46','r52c47','r52c48','r52c49','r52c50','r52c51','r52c52','r52c54','r52c55','r52c56','r53c2','r53c4','r53c54','r53c56','r54c2','r54c3','r54c4','r54c5','r54c6','r54c7','r54c8','r54c9','r54c10','r54c11','r54c12','r54c13','r54c14','r54c15','r54c16','r54c17','r54c18','r54c19','r54c20','r54c21','r54c22','r54c23','r54c24','r54c25','r54c26','r54c27','r54c28','r54c29','r54c30','r54c31','r54c32','r54c33','r54c34','r54c35','r54c36','r54c37','r54c38','r54c39','r54c40','r54c41','r54c42','r54c43','r54c44','r54c45','r54c46','r54c47','r54c48','r54c49','r54c50','r54c51','r54c52','r54c53','r54c54','r54c55','r54c56','r55c2','r55c4','r55c6','r55c8','r55c10','r55c12','r55c14','r55c16','r55c18','r55c20','r55c22','r55c24','r55c26','r55c28','r55c30','r55c32','r55c34','r55c36','r55c38','r55c40','r55c42','r55c44','r55c46','r55c48','r55c50','r55c52','r55c54','r55c56','r56c2','r56c3','r56c4','r56c5','r56c6','r56c7','r56c8','r56c9','r56c10','r56c11','r56c12','r56c13','r56c14','r56c15','r56c16','r56c17','r56c18','r56c19','r56c20','r56c21','r56c22','r56c23','r56c24','r56c25','r56c26','r56c27','r56c28','r56c29','r56c30','r56c31','r56c32','r56c33','r56c34','r56c35','r56c36','r56c37','r56c38','r56c39','r56c40','r56c41','r56c42','r56c43','r56c44','r56c45','r56c46','r56c47','r56c48','r56c49','r56c50','r56c51','r56c52','r56c53','r56c54','r56c55','r56c56']
- @tiles4 = ['r57c1','r57c57']
.area
  .tiles.tiles-0
    - @tiles0.each do |tile|
      .tile{:style=>"grid-area: #{tile}"}
  .tiles.tiles-1
    - @tiles1.each do |tile|
      .tile{:style=>"grid-area: #{tile}"}
  .tiles.tiles-2
    - @tiles2.each do |tile|
      .tile{:style=>"grid-area: #{tile}"}
  .tiles.tiles-3
    - @tiles3.each do |tile|
      .tile{:style=>"grid-area: #{tile}"}
  .tiles.tiles-4
    - @tiles4.each do |tile|
      .tile{:style=>"grid-area: #{tile}"}
            
          
!
            
              $height: ((100 / 57) * 1vmin); // get perfect height for each row

.area {
  max-width: 100vmin;
  margin: 0 auto;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(57, [col] 1fr);
  grid-template-rows: repeat(14, [row] $height);
}

.tile {
  background: #555;
  outline: 1px solid rgba(255, 255, 255, 0.15); // i am grout!
}

// here we go, gulp!
.tiles-0 {
  grid-template-areas:
    "r1c1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . r1c57"
    ". r2c2 r2c3 r2c4 r2c5 r2c6 r2c7 r2c8 r2c9 r2c10 r2c11 r2c12 r2c13 r2c14 r2c15 r2c16 r2c17 r2c18 r2c19 r2c20 r2c21 r2c22 r2c23 r2c24 r2c25 r2c26 r2c27 r2c28 r2c29 r2c30 r2c31 r2c32 r2c33 r2c34 r2c35 r2c36 r2c37 r2c38 r2c39 r2c40 r2c41 r2c42 r2c43 r2c44 r2c45 r2c46 r2c47 r2c48 r2c49 r2c50 r2c51 r2c52 r2c53 r2c54 r2c55 r2c56 ."
    ". r3c2 . r3c4 . r3c6 . r3c8 . r3c10 . r3c12 . r3c14 . r3c16 . r3c18 . r3c20 . r3c22 . r3c24 . r3c26 . r3c28 . r3c30 . r3c32 . r3c34 . r3c36 . r3c38 . r3c40 . r3c42 . r3c44 . r3c46 . r3c48 . r3c50 . r3c52 . r3c54 . r3c56 ."
    ". r4c2 r4c3 r4c4 r4c5 r4c6 r4c7 r4c8 r4c9 r4c10 r4c11 r4c12 r4c13 r4c14 r4c15 r4c16 r4c17 r4c18 r4c19 r4c20 r4c21 r4c22 r4c23 r4c24 r4c25 r4c26 r4c27 r4c28 r4c29 r4c30 r4c31 r4c32 r4c33 r4c34 r4c35 r4c36 r4c37 r4c38 r4c39 r4c40 r4c41 r4c42 r4c43 r4c44 r4c45 r4c46 r4c47 r4c48 r4c49 r4c50 r4c51 r4c52 r4c53 r4c54 r4c55 r4c56 ."
    ". r5c2 . r5c4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . r5c54 . r5c56 ."
    ". r6c2 r6c3 r6c4 . r6c6 r6c7 r6c8 r6c9 r6c10 r6c11 r6c12 r6c13 r6c14 r6c15 r6c16 r6c17 r6c18 r6c19 r6c20 r6c21 r6c22 r6c23 r6c24 r6c25 r6c26 r6c27 r6c28 r6c29 r6c30 r6c31 r6c32 r6c33 r6c34 r6c35 r6c36 r6c37 r6c38 r6c39 r6c40 r6c41 r6c42 r6c43 r6c44 r6c45 r6c46 r6c47 r6c48 r6c49 r6c50 r6c51 r6c52 . r6c54 r6c55 r6c56 ."
    ". r7c2 . r7c4 . r7c6 r7c7 r7c8 r7c9 r7c10 r7c11 r7c12 . r7c14 r7c15 r7c16 r7c17 r7c18 r7c19 r7c20 . r7c22 r7c23 r7c24 r7c25 r7c26 r7c27 r7c28 . r7c30 r7c31 r7c32 r7c33 r7c34 r7c35 r7c36 . r7c38 r7c39 r7c40 r7c41 r7c42 r7c43 r7c44 . r7c46 r7c47 r7c48 r7c49 r7c50 r7c51 r7c52 . r7c54 . r7c56 ."
    ". r8c2 r8c3 r8c4 . r8c6 r8c7 . . . r8c11 . r8c13 . r8c15 . . . r8c19 . r8c21 . r8c23 . . . r8c27 . r8c29 . r8c31 . . . r8c35 . r8c37 . r8c39 . . . r8c43 . r8c45 . r8c47 . . . r8c51 r8c52 . r8c54 r8c55 r8c56 ."
    ". r9c2 . r9c4 . r9c6 r9c7 . . r9c10 r9c11 r9c12 . r9c14 r9c15 r9c16 r9c17 r9c18 r9c19 r9c20 . r9c22 r9c23 r9c24 r9c25 r9c26 r9c27 r9c28 . r9c30 r9c31 r9c32 r9c33 r9c34 r9c35 r9c36 . r9c38 r9c39 r9c40 r9c41 r9c42 r9c43 r9c44 . r9c46 r9c47 r9c48 . . r9c51 r9c52 . r9c54 . r9c56 ."
    ". r10c2 r10c3 r10c4 . r10c6 r10c7 . r10c9 r10c10 r10c11 r10c12 r10c13 r10c14 r10c15 r10c16 r10c17 r10c18 r10c19 r10c20 r10c21 r10c22 r10c23 r10c24 r10c25 r10c26 r10c27 r10c28 r10c29 r10c30 r10c31 r10c32 r10c33 r10c34 r10c35 r10c36 r10c37 r10c38 r10c39 r10c40 r10c41 r10c42 r10c43 r10c44 r10c45 r10c46 r10c47 r10c48 r10c49 . r10c51 r10c52 . r10c54 r10c55 r10c56 ."
    ". r11c2 . r11c4 . r11c6 r11c7 r11c8 r11c9 r11c10 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . r11c48 r11c49 r11c50 r11c51 r11c52 . r11c54 . r11c56 ."
    ". r12c2 r12c3 r12c4 . r12c6 r12c7 . r12c9 r12c10 . r12c12 r12c13 r12c14 r12c15 r12c16 r12c17 r12c18 r12c19 r12c20 r12c21 r12c22 r12c23 r12c24 r12c25 r12c26 r12c27 r12c28 . r12c30 r12c31 r12c32 r12c33 r12c34 r12c35 r12c36 r12c37 r12c38 r12c39 r12c40 r12c41 r12c42 r12c43 r12c44 r12c45 r12c46 . r12c48 r12c49 . r12c51 r12c52 . r12c54 r12c55 r12c56 ."
    ". r13c2 . r13c4 . r13c6 . r13c8 . r13c10 . r13c12 r13c13 r13c14 r13c15 r13c16 r13c17 r13c18 r13c19 r13c20 r13c21 r13c22 r13c23 r13c24 r13c25 r13c26 r13c27 r13c28 . r13c30 r13c31 r13c32 r13c33 r13c34 r13c35 r13c36 r13c37 r13c38 r13c39 r13c40 r13c41 r13c42 r13c43 r13c44 r13c45 r13c46 . r13c48 . r13c50 . r13c52 . r13c54 . r13c56 ."
    ". r14c2 r14c3 r14c4 . r14c6 r14c7 . r14c9 r14c10 . r14c12 r14c13 r14c14 r14c15 r14c16 r14c17 r14c18 r14c19 r14c20 r14c21 r14c22 r14c23 r14c24 r14c25 r14c26 r14c27 r14c28 . r14c30 r14c31 r14c32 r14c33 r14c34 r14c35 r14c36 r14c37 r14c38 r14c39 r14c40 r14c41 r14c42 r14c43 r14c44 r14c45 r14c46 . r14c48 r14c49 . r14c51 r14c52 . r14c54 r14c55 r14c56 .";
}

.tiles-1 {
  grid-template-areas:
    ". r15c2 . r15c4 . r15c6 r15c7 r15c8 r15c9 r15c10 . r15c12 r15c13 r15c14 r15c15 r15c16 r15c17 r15c18 r15c19 r15c20 r15c21 r15c22 r15c23 r15c24 r15c25 r15c26 r15c27 r15c28 . r15c30 r15c31 r15c32 r15c33 r15c34 r15c35 r15c36 r15c37 r15c38 r15c39 r15c40 r15c41 r15c42 r15c43 r15c44 r15c45 r15c46 . r15c48 r15c49 r15c50 r15c51 r15c52 . r15c54 . r15c56 ."
    ". r16c2 r16c3 r16c4 . r16c6 r16c7 . r16c9 r16c10 . r16c12 r16c13 r16c14 r16c15 r16c16 r16c17 r16c18 r16c19 r16c20 r16c21 r16c22 r16c23 r16c24 r16c25 r16c26 r16c27 r16c28 . r16c30 r16c31 r16c32 r16c33 r16c34 r16c35 r16c36 r16c37 r16c38 r16c39 r16c40 r16c41 r16c42 r16c43 r16c44 r16c45 r16c46 . r16c48 r16c49 . r16c51 r16c52 . r16c54 r16c55 r16c56 ."
    ". r17c2 . r17c4 . r17c6 r17c7 . r17c9 r17c10 . r17c12 r17c13 r17c14 r17c15 r17c16 r17c17 r17c18 r17c19 r17c20 r17c21 r17c22 r17c23 r17c24 r17c25 r17c26 r17c27 r17c28 . r17c30 r17c31 r17c32 r17c33 r17c34 r17c35 r17c36 r17c37 r17c38 r17c39 r17c40 r17c41 r17c42 r17c43 r17c44 r17c45 r17c46 . r17c48 r17c49 . r17c51 r17c52 . r17c54 . r17c56 ."
    ". r18c2 r18c3 r18c4 . r18c6 r18c7 . r18c9 r18c10 . r18c12 r18c13 r18c14 r18c15 r18c16 r18c17 r18c18 r18c19 r18c20 r18c21 r18c22 r18c23 r18c24 r18c25 r18c26 r18c27 r18c28 . r18c30 r18c31 r18c32 r18c33 r18c34 r18c35 r18c36 r18c37 r18c38 r18c39 r18c40 r18c41 r18c42 r18c43 r18c44 r18c45 r18c46 . r18c48 r18c49 . r18c51 r18c52 . r18c54 r18c55 r18c56 ."
    ". r19c2 . r19c4 . r19c6 r19c7 r19c8 r19c9 r19c10 . r19c12 r19c13 r19c14 r19c15 r19c16 r19c17 r19c18 r19c19 r19c20 r19c21 r19c22 r19c23 r19c24 r19c25 r19c26 r19c27 r19c28 . r19c30 r19c31 r19c32 r19c33 r19c34 r19c35 r19c36 r19c37 r19c38 r19c39 r19c40 r19c41 r19c42 r19c43 r19c44 r19c45 r19c46 . r19c48 r19c49 r19c50 r19c51 r19c52 . r19c54 . r19c56 ."
    ". r20c2 r20c3 r20c4 . r20c6 r20c7 . r20c9 r20c10 . r20c12 r20c13 r20c14 r20c15 r20c16 r20c17 r20c18 r20c19 r20c20 r20c21 r20c22 r20c23 r20c24 r20c25 r20c26 r20c27 . r20c29 . r20c31 r20c32 r20c33 r20c34 r20c35 r20c36 r20c37 r20c38 r20c39 r20c40 r20c41 r20c42 r20c43 r20c44 r20c45 r20c46 . r20c48 r20c49 . r20c51 r20c52 . r20c54 r20c55 r20c56 ."
    ". r21c2 . r21c4 . r21c6 . r21c8 . r21c10 . r21c12 r21c13 r21c14 r21c15 r21c16 r21c17 r21c18 r21c19 r21c20 r21c21 r21c22 r21c23 r21c24 r21c25 r21c26 . r21c28 r21c29 r21c30 . r21c32 r21c33 r21c34 r21c35 r21c36 r21c37 r21c38 r21c39 r21c40 r21c41 r21c42 r21c43 r21c44 r21c45 r21c46 . r21c48 . r21c50 . r21c52 . r21c54 . r21c56 ."
    ". r22c2 r22c3 r22c4 . r22c6 r22c7 . r22c9 r22c10 . r22c12 r22c13 r22c14 r22c15 r22c16 r22c17 r22c18 r22c19 r22c20 r22c21 r22c22 r22c23 r22c24 r22c25 . r22c27 r22c28 r22c29 r22c30 r22c31 . r22c33 r22c34 r22c35 r22c36 r22c37 r22c38 r22c39 r22c40 r22c41 r22c42 r22c43 r22c44 r22c45 r22c46 . r22c48 r22c49 . r22c51 r22c52 . r22c54 r22c55 r22c56 ."
    ". r23c2 . r23c4 . r23c6 r23c7 r23c8 r23c9 r23c10 . r23c12 r23c13 r23c14 r23c15 r23c16 r23c17 r23c18 r23c19 r23c20 r23c21 r23c22 r23c23 r23c24 . r23c26 r23c27 r23c28 r23c29 r23c30 r23c31 r23c32 . r23c34 r23c35 r23c36 r23c37 r23c38 r23c39 r23c40 r23c41 r23c42 r23c43 r23c44 r23c45 r23c46 . r23c48 r23c49 r23c50 r23c51 r23c52 . r23c54 . r23c56 ."
    ". r24c2 r24c3 r24c4 . r24c6 r24c7 . r24c9 r24c10 . r24c12 r24c13 r24c14 r24c15 r24c16 r24c17 r24c18 r24c19 r24c20 r24c21 r24c22 r24c23 . r24c25 r24c26 r24c27 r24c28 . r24c30 r24c31 r24c32 r24c33 . r24c35 r24c36 r24c37 r24c38 r24c39 r24c40 r24c41 r24c42 r24c43 r24c44 r24c45 r24c46 . r24c48 r24c49 . r24c51 r24c52 . r24c54 r24c55 r24c56 ."
    ". r25c2 . r25c4 . r25c6 r25c7 . r25c9 r25c10 . r25c12 r25c13 r25c14 r25c15 r25c16 r25c17 r25c18 r25c19 r25c20 r25c21 r25c22 . r25c24 r25c25 r25c26 r25c27 . . . r25c31 r25c32 r25c33 r25c34 . r25c36 r25c37 r25c38 r25c39 r25c40 r25c41 r25c42 r25c43 r25c44 r25c45 r25c46 . r25c48 r25c49 . r25c51 r25c52 . r25c54 . r25c56 ."
    ". r26c2 r26c3 r26c4 . r26c6 r26c7 . r26c9 r26c10 . r26c12 r26c13 r26c14 r26c15 r26c16 r26c17 r26c18 r26c19 r26c20 r26c21 . r26c23 r26c24 r26c25 r26c26 . . . . . r26c32 r26c33 r26c34 r26c35 . r26c37 r26c38 r26c39 r26c40 r26c41 r26c42 r26c43 r26c44 r26c45 r26c46 . r26c48 r26c49 . r26c51 r26c52 . r26c54 r26c55 r26c56 ."
    ". r27c2 . r27c4 . r27c6 r27c7 r27c8 r27c9 r27c10 . r27c12 r27c13 r27c14 r27c15 r27c16 r27c17 r27c18 r27c19 r27c20 . r27c22 r27c23 r27c24 r27c25 . . . r27c29 . . . r27c33 r27c34 r27c35 r27c36 . r27c38 r27c39 r27c40 r27c41 r27c42 r27c43 r27c44 r27c45 r27c46 . r27c48 r27c49 r27c50 r27c51 r27c52 . r27c54 . r27c56 ."
    ". r28c2 r28c3 r28c4 . r28c6 r28c7 . r28c9 r28c10 . r28c12 r28c13 r28c14 r28c15 r28c16 r28c17 r28c18 r28c19 . r28c21 r28c22 r28c23 r28c24 . . . r28c28 r28c29 r28c30 . . . r28c34 r28c35 r28c36 r28c37 . r28c39 r28c40 r28c41 r28c42 r28c43 r28c44 r28c45 r28c46 . r28c48 r28c49 . r28c51 r28c52 . r28c54 r28c55 r28c56 .";
}

.tiles-2 {
  grid-template-areas:
    ". r29c2 . r29c4 . r29c6 . r29c8 . r29c10 . . . . . . . . . r29c20 r29c21 r29c22 r29c23 . . . r29c27 r29c28 . r29c30 r29c31 . . . r29c35 r29c36 r29c37 r29c38 . . . . . . . . . r29c48 . r29c50 . r29c52 . r29c54 . r29c56 ."
    ". r30c2 r30c3 r30c4 . r30c6 r30c7 . r30c9 r30c10 . r30c12 r30c13 r30c14 r30c15 r30c16 r30c17 r30c18 r30c19 . r30c21 r30c22 r30c23 r30c24 . . . r30c28 r30c29 r30c30 . . . r30c34 r30c35 r30c36 r30c37 . r30c39 r30c40 r30c41 r30c42 r30c43 r30c44 r30c45 r30c46 . r30c48 r30c49 . r30c51 r30c52 . r30c54 r30c55 r30c56 ."
    ". r31c2 . r31c4 . r31c6 r31c7 r31c8 r31c9 r31c10 . r31c12 r31c13 r31c14 r31c15 r31c16 r31c17 r31c18 r31c19 r31c20 . r31c22 r31c23 r31c24 r31c25 . . . r31c29 . . . r31c33 r31c34 r31c35 r31c36 . r31c38 r31c39 r31c40 r31c41 r31c42 r31c43 r31c44 r31c45 r31c46 . r31c48 r31c49 r31c50 r31c51 r31c52 . r31c54 . r31c56 ."
    ". r32c2 r32c3 r32c4 . r32c6 r32c7 . r32c9 r32c10 . r32c12 r32c13 r32c14 r32c15 r32c16 r32c17 r32c18 r32c19 r32c20 r32c21 . r32c23 r32c24 r32c25 r32c26 . . . . . r32c32 r32c33 r32c34 r32c35 . r32c37 r32c38 r32c39 r32c40 r32c41 r32c42 r32c43 r32c44 r32c45 r32c46 . r32c48 r32c49 . r32c51 r32c52 . r32c54 r32c55 r32c56 ."
    ". r33c2 . r33c4 . r33c6 r33c7 . r33c9 r33c10 . r33c12 r33c13 r33c14 r33c15 r33c16 r33c17 r33c18 r33c19 r33c20 r33c21 r33c22 . r33c24 r33c25 r33c26 r33c27 . . . r33c31 r33c32 r33c33 r33c34 . r33c36 r33c37 r33c38 r33c39 r33c40 r33c41 r33c42 r33c43 r33c44 r33c45 r33c46 . r33c48 r33c49 . r33c51 r33c52 . r33c54 . r33c56 ."
    ". r34c2 r34c3 r34c4 . r34c6 r34c7 . r34c9 r34c10 . r34c12 r34c13 r34c14 r34c15 r34c16 r34c17 r34c18 r34c19 r34c20 r34c21 r34c22 r34c23 . r34c25 r34c26 r34c27 r34c28 . r34c30 r34c31 r34c32 r34c33 . r34c35 r34c36 r34c37 r34c38 r34c39 r34c40 r34c41 r34c42 r34c43 r34c44 r34c45 r34c46 . r34c48 r34c49 . r34c51 r34c52 . r34c54 r34c55 r34c56 ."
    ". r35c2 . r35c4 . r35c6 r35c7 r35c8 r35c9 r35c10 . r35c12 r35c13 r35c14 r35c15 r35c16 r35c17 r35c18 r35c19 r35c20 r35c21 r35c22 r35c23 r35c24 . r35c26 r35c27 r35c28 r35c29 r35c30 r35c31 r35c32 . r35c34 r35c35 r35c36 r35c37 r35c38 r35c39 r35c40 r35c41 r35c42 r35c43 r35c44 r35c45 r35c46 . r35c48 r35c49 r35c50 r35c51 r35c52 . r35c54 . r35c56 ."
    ". r36c2 r36c3 r36c4 . r36c6 r36c7 . r36c9 r36c10 . r36c12 r36c13 r36c14 r36c15 r36c16 r36c17 r36c18 r36c19 r36c20 r36c21 r36c22 r36c23 r36c24 r36c25 . r36c27 r36c28 r36c29 r36c30 r36c31 . r36c33 r36c34 r36c35 r36c36 r36c37 r36c38 r36c39 r36c40 r36c41 r36c42 r36c43 r36c44 r36c45 r36c46 . r36c48 r36c49 . r36c51 r36c52 . r36c54 r36c55 r36c56 ."
    ". r37c2 . r37c4 . r37c6 . r37c8 . r37c10 . r37c12 r37c13 r37c14 r37c15 r37c16 r37c17 r37c18 r37c19 r37c20 r37c21 r37c22 r37c23 r37c24 r37c25 r37c26 . r37c28 r37c29 r37c30 . r37c32 r37c33 r37c34 r37c35 r37c36 r37c37 r37c38 r37c39 r37c40 r37c41 r37c42 r37c43 r37c44 r37c45 r37c46 . r37c48 . r37c50 . r37c52 . r37c54 . r37c56 ."
    ". r38c2 r38c3 r38c4 . r38c6 r38c7 . r38c9 r38c10 . r38c12 r38c13 r38c14 r38c15 r38c16 r38c17 r38c18 r38c19 r38c20 r38c21 r38c22 r38c23 r38c24 r38c25 r38c26 r38c27 . r38c29 . r38c31 r38c32 r38c33 r38c34 r38c35 r38c36 r38c37 r38c38 r38c39 r38c40 r38c41 r38c42 r38c43 r38c44 r38c45 r38c46 . r38c48 r38c49 . r38c51 r38c52 . r38c54 r38c55 r38c56 ."
    ". r39c2 . r39c4 . r39c6 r39c7 r39c8 r39c9 r39c10 . r39c12 r39c13 r39c14 r39c15 r39c16 r39c17 r39c18 r39c19 r39c20 r39c21 r39c22 r39c23 r39c24 r39c25 r39c26 r39c27 r39c28 . r39c30 r39c31 r39c32 r39c33 r39c34 r39c35 r39c36 r39c37 r39c38 r39c39 r39c40 r39c41 r39c42 r39c43 r39c44 r39c45 r39c46 . r39c48 r39c49 r39c50 r39c51 r39c52 . r39c54 . r39c56 ."
    ". r40c2 r40c3 r40c4 . r40c6 r40c7 . r40c9 r40c10 . r40c12 r40c13 r40c14 r40c15 r40c16 r40c17 r40c18 r40c19 r40c20 r40c21 r40c22 r40c23 r40c24 r40c25 r40c26 r40c27 r40c28 . r40c30 r40c31 r40c32 r40c33 r40c34 r40c35 r40c36 r40c37 r40c38 r40c39 r40c40 r40c41 r40c42 r40c43 r40c44 r40c45 r40c46 . r40c48 r40c49 . r40c51 r40c52 . r40c54 r40c55 r40c56 ."
    ". r41c2 . r41c4 . r41c6 r41c7 . r41c9 r41c10 . r41c12 r41c13 r41c14 r41c15 r41c16 r41c17 r41c18 r41c19 r41c20 r41c21 r41c22 r41c23 r41c24 r41c25 r41c26 r41c27 r41c28 . r41c30 r41c31 r41c32 r41c33 r41c34 r41c35 r41c36 r41c37 r41c38 r41c39 r41c40 r41c41 r41c42 r41c43 r41c44 r41c45 r41c46 . r41c48 r41c49 . r41c51 r41c52 . r41c54 . r41c56 ."
    ". r42c2 r42c3 r42c4 . r42c6 r42c7 . r42c9 r42c10 . r42c12 r42c13 r42c14 r42c15 r42c16 r42c17 r42c18 r42c19 r42c20 r42c21 r42c22 r42c23 r42c24 r42c25 r42c26 r42c27 r42c28 . r42c30 r42c31 r42c32 r42c33 r42c34 r42c35 r42c36 r42c37 r42c38 r42c39 r42c40 r42c41 r42c42 r42c43 r42c44 r42c45 r42c46 . r42c48 r42c49 . r42c51 r42c52 . r42c54 r42c55 r42c56 .";
}

.tiles-3 {
  grid-template-areas:
    ". r43c2 . r43c4 . r43c6 r43c7 r43c8 r43c9 r43c10 . r43c12 r43c13 r43c14 r43c15 r43c16 r43c17 r43c18 r43c19 r43c20 r43c21 r43c22 r43c23 r43c24 r43c25 r43c26 r43c27 r43c28 . r43c30 r43c31 r43c32 r43c33 r43c34 r43c35 r43c36 r43c37 r43c38 r43c39 r43c40 r43c41 r43c42 r43c43 r43c44 r43c45 r43c46 . r43c48 r43c49 r43c50 r43c51 r43c52 . r43c54 . r43c56 ."
    ". r44c2 r44c3 r44c4 . r44c6 r44c7 . r44c9 r44c10 . r44c12 r44c13 r44c14 r44c15 r44c16 r44c17 r44c18 r44c19 r44c20 r44c21 r44c22 r44c23 r44c24 r44c25 r44c26 r44c27 r44c28 . r44c30 r44c31 r44c32 r44c33 r44c34 r44c35 r44c36 r44c37 r44c38 r44c39 r44c40 r44c41 r44c42 r44c43 r44c44 r44c45 r44c46 . r44c48 r44c49 . r44c51 r44c52 . r44c54 r44c55 r44c56 ."
    ". r45c2 . r45c4 . r45c6 . r45c8 . r45c10 . r45c12 r45c13 r45c14 r45c15 r45c16 r45c17 r45c18 r45c19 r45c20 r45c21 r45c22 r45c23 r45c24 r45c25 r45c26 r45c27 r45c28 . r45c30 r45c31 r45c32 r45c33 r45c34 r45c35 r45c36 r45c37 r45c38 r45c39 r45c40 r45c41 r45c42 r45c43 r45c44 r45c45 r45c46 . r45c48 . r45c50 . r45c52 . r45c54 . r45c56 ."
    ". r46c2 r46c3 r46c4 . r46c6 r46c7 . r46c9 r46c10 . r46c12 r46c13 r46c14 r46c15 r46c16 r46c17 r46c18 r46c19 r46c20 r46c21 r46c22 r46c23 r46c24 r46c25 r46c26 r46c27 r46c28 . r46c30 r46c31 r46c32 r46c33 r46c34 r46c35 r46c36 r46c37 r46c38 r46c39 r46c40 r46c41 r46c42 r46c43 r46c44 r46c45 r46c46 . r46c48 r46c49 . r46c51 r46c52 . r46c54 r46c55 r46c56 ."
    ". r47c2 . r47c4 . r47c6 r47c7 r47c8 r47c9 r47c10 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . r47c48 r47c49 r47c50 r47c51 r47c52 . r47c54 . r47c56 ."
    ". r48c2 r48c3 r48c4 . r48c6 r48c7 . r48c9 r48c10 r48c11 r48c12 r48c13 r48c14 r48c15 r48c16 r48c17 r48c18 r48c19 r48c20 r48c21 r48c22 r48c23 r48c24 r48c25 r48c26 r48c27 r48c28 r48c29 r48c30 r48c31 r48c32 r48c33 r48c34 r48c35 r48c36 r48c37 r48c38 r48c39 r48c40 r48c41 r48c42 r48c43 r48c44 r48c45 r48c46 r48c47 r48c48 r48c49 . r48c51 r48c52 . r48c54 r48c55 r48c56 ."
    ". r49c2 . r49c4 . r49c6 r49c7 . . r49c10 r49c11 r49c12 . r49c14 r49c15 r49c16 r49c17 r49c18 r49c19 r49c20 . r49c22 r49c23 r49c24 r49c25 r49c26 r49c27 r49c28 . r49c30 r49c31 r49c32 r49c33 r49c34 r49c35 r49c36 . r49c38 r49c39 r49c40 r49c41 r49c42 r49c43 r49c44 . r49c46 r49c47 r49c48 . . r49c51 r49c52 . r49c54 . r49c56 ."
    ". r50c2 r50c3 r50c4 . r50c6 r50c7 . . . r50c11 . r50c13 . r50c15 . . . r50c19 . r50c21 . r50c23 . . . r50c27 . r50c29 . r50c31 . . . r50c35 . r50c37 . r50c39 . . . r50c43 . r50c45 . r50c47 . . . r50c51 r50c52 . r50c54 r50c55 r50c56 ."
    ". r51c2 . r51c4 . r51c6 r51c7 r51c8 r51c9 r51c10 r51c11 r51c12 . r51c14 r51c15 r51c16 r51c17 r51c18 r51c19 r51c20 . r51c22 r51c23 r51c24 r51c25 r51c26 r51c27 r51c28 . r51c30 r51c31 r51c32 r51c33 r51c34 r51c35 r51c36 . r51c38 r51c39 r51c40 r51c41 r51c42 r51c43 r51c44 . r51c46 r51c47 r51c48 r51c49 r51c50 r51c51 r51c52 . r51c54 . r51c56 ."
    ". r52c2 r52c3 r52c4 . r52c6 r52c7 r52c8 r52c9 r52c10 r52c11 r52c12 r52c13 r52c14 r52c15 r52c16 r52c17 r52c18 r52c19 r52c20 r52c21 r52c22 r52c23 r52c24 r52c25 r52c26 r52c27 r52c28 r52c29 r52c30 r52c31 r52c32 r52c33 r52c34 r52c35 r52c36 r52c37 r52c38 r52c39 r52c40 r52c41 r52c42 r52c43 r52c44 r52c45 r52c46 r52c47 r52c48 r52c49 r52c50 r52c51 r52c52 . r52c54 r52c55 r52c56 ."
    ". r53c2 . r53c4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . r53c54 . r53c56 ."
    ". r54c2 r54c3 r54c4 r54c5 r54c6 r54c7 r54c8 r54c9 r54c10 r54c11 r54c12 r54c13 r54c14 r54c15 r54c16 r54c17 r54c18 r54c19 r54c20 r54c21 r54c22 r54c23 r54c24 r54c25 r54c26 r54c27 r54c28 r54c29 r54c30 r54c31 r54c32 r54c33 r54c34 r54c35 r54c36 r54c37 r54c38 r54c39 r54c40 r54c41 r54c42 r54c43 r54c44 r54c45 r54c46 r54c47 r54c48 r54c49 r54c50 r54c51 r54c52 r54c53 r54c54 r54c55 r54c56 ."
    ". r55c2 . r55c4 . r55c6 . r55c8 . r55c10 . r55c12 . r55c14 . r55c16 . r55c18 . r55c20 . r55c22 . r55c24 . r55c26 . r55c28 . r55c30 . r55c32 . r55c34 . r55c36 . r55c38 . r55c40 . r55c42 . r55c44 . r55c46 . r55c48 . r55c50 . r55c52 . r55c54 . r55c56 ."
    ". r56c2 r56c3 r56c4 r56c5 r56c6 r56c7 r56c8 r56c9 r56c10 r56c11 r56c12 r56c13 r56c14 r56c15 r56c16 r56c17 r56c18 r56c19 r56c20 r56c21 r56c22 r56c23 r56c24 r56c25 r56c26 r56c27 r56c28 r56c29 r56c30 r56c31 r56c32 r56c33 r56c34 r56c35 r56c36 r56c37 r56c38 r56c39 r56c40 r56c41 r56c42 r56c43 r56c44 r56c45 r56c46 r56c47 r56c48 r56c49 r56c50 r56c51 r56c52 r56c53 r56c54 r56c55 r56c56 .";
}

.tiles-4 {
  grid-template-areas: "r57c1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . r57c57";
  grid-template-rows: repeat(1, [row] $height);
}

            
          
!
            
              // Google Sheets script to export this data from
// https://docs.google.com/spreadsheets/d/1NsGr-rOQhd-XCAauMp6gq_YofqHrwaizk9f8z6AO4k8/edit?usp=sharing

/*
var ROW_MAX = 14; // Number of rows allowable in `grid-template-areas`
var sheet = SpreadsheetApp.getActiveSheet(); // Use data from the active sheet
var startRow = 1; // First row of data to process
var numRows = sheet.getLastRow(); // Number of rows to process
var lastColumn = sheet.getLastColumn(); // Last column
var dataRange = sheet.getRange(startRow, 1, numRows, lastColumn); // Fetch the data range of the active sheet
var data = dataRange.getValues(); // Fetch values for each row in the range
var sections = split(data, ROW_MAX);

function gimmeCode() {
  showSidebar(gimmeCSS(), gimmeHaml());
}

// generate CSS
function gimmeCSS() {
  var data = "";
  sections.forEach(function(section, i) {
    data += ".tiles-" + i + " {<br>grid-template-areas:<br>";
    section.map(function(sec) {
      data += '"' + sec.join(" ") + '"';
      data += "<br>";
    });
    data += "<br>}<br><br>";
  });
  return data;
}

// generate Haml
function gimmeHaml() {
  var data = "";
  sections.forEach(function(section, i) {
    data += "- @tiles" + i + " = [";
    var all = [];
    section.forEach(function(sec) {
      sec.forEach(function(s) {
        if (s !== ".") all.push("'" + s + "'");
      });
    });
    data += all.join(",");
    data += "]<br>";
  });

  data += ".area<br>";

  sections.forEach(function(section, i) {
    data += "&nbsp;&nbsp;.tiles.tiles-" + i + "<br>";
    data += "&nbsp;&nbsp;&nbsp;&nbsp;- @tiles" + i + ".each do |tile|<br>";
    data +=
      '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.tile{:style=>"grid-area: #{tile}"}<br>';
  });

  return data;
}

// splits rows into chunks
function split(arr, n) {
  var res = [];
  while (arr.length) {
    res.push(arr.splice(0, n));
  }
  return res;
}

// creates sidebar
function showSidebar(css, haml) {
  var headingStyle =
    "font-family: Roboto; font-size: 15px; margin-bottom: 6px;";
  var codeStyle =
    "overflow: scroll; height: 150px;background: #eee;border-radius: 3px; padding: 5px; margin-bottom: 18px; margin-top: 0;";
  var html = HtmlService.createHtmlOutput(
    '<div style="padding: 0 6px;"><h2 style="' +
      headingStyle +
      '">Haml</h2><pre style="' +
      codeStyle +
      '"><code>' +
      haml +
      '</code></pre><h2 style="' +
      headingStyle +
      '">CSS</h2><pre style="' +
      codeStyle +
      '"><code>' +
      css +
      "</code></div>"
  ).setTitle("Code");
  SpreadsheetApp.getUi().showSidebar(html);
}
*/
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console