In a bad mental health place. Coding helps! Threw this together quick with plans to someday convert it to a splash page code when I feel like digging into that mess again. Just wanted to make a quick pretty thing, blah blah. (Code for a five column version is available here!)
Hey, this code is so, so cool! I was wondering if there's a way to get it repeat horizontally/add rows on the side? All I can figure out is how to repeat the board vertically.
Yes, there is! This is essentially a 3x6 grid table and the 'grid-template-areas' style tag tells it which divs to merge. So the first thing you'll want to do is change 'grid-template-columns:repeat(3,1fr)' to whatever number of columns you want. Then you need to add the new divs and tell it how to merge them in the 'grid-template-areas' tag via their names -- if you look at the code, there's six sets of names following the 'grid-template-areas' tag because you define on a row by row basis. (Each div is assigned a name via the 'grid-area' tag and I did not name mine very well for horizontal expansion purposes, whoops.) Finally, you'll also want to adjust the width set in the very first container div because that controls the width of the individual columns.
That was probably a confusing explanation, but!! There's some good resources out there on CSS Grid and I think this one might be the easiest to follow along.
Here's code for a 5 column version of the board where I've reordered and renamed the divs so expanding further horizontally is more intuitive. Hope this helps! :)
Ahh, perfect!! Turns out that I just kept trying to add more rows instead of more columns by making new grid template 'sections' instead of adding new numbers into the six existing ones, whoops. Thank you so much for taking the time out to explain this! I'm so happy about the way this makes my journal look.
![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
no subject
no subject
That was probably a confusing explanation, but!! There's some good resources out there on CSS Grid and I think this one might be the easiest to follow along.
Here's code for a 5 column version of the board where I've reordered and renamed the divs so expanding further horizontally is more intuitive. Hope this helps! :)
no subject
no subject
no subject
no subject