A Guide to Grids

Helpful guides and useful links for roleplayers both old and new!
Post Reply
User avatar
illirica
Sandbox Mod
Posts: 4017
Joined: Sat Mar 24, 2018 4:02 pm
Contact:

A Guide to Grids

Post by illirica » Wed Sep 11, 2019 6:55 pm

Welcome to my grid guide! I've been having way too much fun with grids lately, and I've gone ahead and gotten a guide together for anyone else who's interested. I welcome any comments or questions or suggestions - I'm still learning, too! Let's figure this out together. Here we go!

You're going to be using a div for this. If you're not yet familiar with BBcode and divs, I strongly recommend that you work with those a little before you dive in to grids, because it gets pretty complicated.

These resources will help you with that:
BBCode Masterpost
Div Guide

Okay, ready?


Grid Basics
Start by using the code "display:grid" in your div code. You can also use "display:inline-grid" if you want to create a grid inline with your other stuff!

After that, you can set the columns and/or rows. This will be in your same setup grid. Use "grid-template-columns" and "grid-template-rows" for the respective data. After each of these, you're going to insert a number of values, which will correspond to the boxes on your grid. You can set how wide you want each column to be, and how tall you want each row to be, using pixels, percentages, fractions, or "auto" to make use of available space.

After you've set that up, you can define your areas as what part of the grid are covered. We'll go into more on that in a bit, but for now let's look at a basic 2x2 grid. The escape quote /" is goign to be necessary for defining the area. Put everything in the same row within the same set of escape quotes. Here we'll just define as TopLeft, TopRight, BottomLeft, BottomRight - but you can set these to anything that you like. We put everything on the top row within one set of escape quotes, and everything in the bottom row between a second set.

[div="display:grid; grid-template-columns: 50px 50px; grid-template-rows: 50px 50px; grid-template-areas: \"TopLeft TopRight\" \"BottomLeft BottomRight\";"]

Notice that I do not yet close my div. Once we've got that set up, within the grid we use more divs to set each area. For this, I'll just use the most basic stuff, but you can do just about anything you can do with a div inside your grid.

We use "grid-area:AREANAME;" to define the div for that area. For our example, our area names were TopLeft, TopRight, etc. Once you've set that, you can do whatever you want with that div.

[div="grid-area:TopLeft;background-color:skyblue;"]A[/div]
[div="grid-area:TopRight;background-color:silver;"]B[/div]
[div="grid-area:BottomLeft;background-color:slategray;"]C[/div]
[div="grid-area:BottomRight;background-color:steelblue;"]D[/div]


Note that here we do close our divs. When you're all done with the grid, that's when you close the final div. All together:

[div="display:grid; grid-template-columns: 50px 50px; grid-template-rows: 50px 50px; grid-template-areas: \"TopLeft TopRight\" \"BottomLeft BottomRight\";"]
[div="grid-area:TopLeft;background-color:skyblue;"]A[/div]
[div="grid-area:TopRight;background-color:silver;"]B[/div]
[div="grid-area:BottomLeft;background-color:slategray;"]C[/div]
[div="grid-area:BottomRight;background-color:steelblue;"]D[/div]
[/div]


Gives us:
A
B
C
D
Cute!

Now let's delve into some more details.


Width and Height Definitions
These can be defined with an absolute number of pixels, like in our basic example we used "50px" to set the width and height both to 50 pixels. Note that you don't have to make them all the same, you can have one space wider or taller than another.
A
B
C
D
[div="display:grid; grid-template-columns: 40px 60px; grid-template-rows: 80px 20px; grid-template-areas: \"TopLeft TopRight\" \"BottomLeft BottomRight\";"]
[div="grid-area:TopLeft;background-color:skyblue;"]A[/div]
[div="grid-area:TopRight;background-color:silver;"]B[/div]
[div="grid-area:BottomLeft;background-color:slategray;"]C[/div]
[div="grid-area:BottomRight;background-color:steelblue;"]D[/div]
[/div]


You can also use a percentage for column width, which will define a percentage of the total div grid area - for example: "25% 50% 25%" or something like that. Here I'm using "width:100px;" to set the total grid width to 100 pixels. If your percentages add up to less than 100% you'll get a blank space (you can use right or left align or margin:auto to define where the space is). If they add up to more than 100%, you get ugliness. Percentages and row heights do not play nicely together.
A
B
C
D
[div="display:grid; width:100px; grid-template-columns: 50% 50%; grid-template-rows: 50px 50px; grid-template-areas: \"TopLeft TopRight\" \"BottomLeft BottomRight\";"]
[div="grid-area:TopLeft;background-color:skyblue;"]A[/div]
[div="grid-area:TopRight;background-color:silver;"]B[/div]
[div="grid-area:BottomLeft;background-color:slategray;"]C[/div]
[div="grid-area:BottomRight;background-color:steelblue;"]D[/div]
[/div]


Here I'll show an example where the percentages don't add to 100. I've added a basic red border so you can see.
A
B
C
D
[div="display:grid; width:100px; border:1px red solid grid-template-columns: 50% 30%; grid-template-rows: 50px 50px; grid-template-areas: \"TopLeft TopRight\" \"BottomLeft BottomRight\";"]
[div="grid-area:TopLeft;background-color:skyblue;"]A[/div]
[div="grid-area:TopRight;background-color:silver;"]B[/div]
[div="grid-area:BottomLeft;background-color:slategray;"]C[/div]
[div="grid-area:BottomRight;background-color:steelblue;"]D[/div]
[/div]


Percentages adding to 130%:
A
B
C
D
[div="display:grid; width:100px; border:1px red solid grid-template-columns: 50% 80%; grid-template-rows: 50px 50px; grid-template-areas: \"TopLeft TopRight\" \"BottomLeft BottomRight\";"]
[div="grid-area:TopLeft;background-color:skyblue;"]A[/div]
[div="grid-area:TopRight;background-color:silver;"]B[/div]
[div="grid-area:BottomLeft;background-color:slategray;"]C[/div]
[div="grid-area:BottomRight;background-color:steelblue;"]D[/div]
[/div]


If not limiting the grid to a smaller area, you can use this to force a horizontal scroll bar! That's for your whole post, though, so use with caution.


That covers percentages, let's do fractions! Fractions are great because you don't have to worry about whether or not they add up to 100%. The code automatically parses them as a percent of a whole. Use a number, then "fr" after the number to delineate a fraction - something like "1fr 1fr" will give you that nice even box like in the first example. Notice how adding another line of text in the top left box automatically adjusts the height of the rows.
A
A
B
C
D
[div="display:grid; width:100px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: \"TopLeft TopRight\" \"BottomLeft BottomRight\";"]
[div="grid-area:TopLeft;background-color:skyblue;"]A
A[/div]
[div="grid-area:TopRight;background-color:silver;"]B[/div]
[div="grid-area:BottomLeft;background-color:slategray;"]C[/div]
[div="grid-area:BottomRight;background-color:steelblue;"]D[/div]
[/div]


The last option is "Auto," which basically means for the code to fill in the available space with whatever is left. This is particularly useful when you're not pre-setting the width to a certain number of pixels, because it allows the code to scale with window size. For this one I'll set the total width to 20%, constrain the first column to 50 pixels, and set the rest to auto.
A
B
C
D
[div="display:grid; width:20%; grid-template-columns: 1fr 1fr; grid-template-rows: 50px 50px; grid-template-areas: \"TopLeft TopRight\" \"BottomLeft BottomRight\";"]
[div="grid-area:TopLeft;background-color:skyblue;"]A[/div]
[div="grid-area:TopRight;background-color:silver;"]B[/div]
[div="grid-area:BottomLeft;background-color:slategray;"]C[/div]
[div="grid-area:BottomRight;background-color:steelblue;"]D[/div]
[/div]


Yes, you can mix them all up and have something like "10px 20% 3fr auto" if you want to do that.

Another good thing to keep in mind for posts is that if you don't want the row height to be defined, you can leave out the "grid-template-rows: blahblahblah" section entirely, and it will just flex the height of the row to the content. This is very convenient for bios.


Area Definitions
Okay - so what if you want to have a grid that isn't just single boxes? What if you want to create a header or a footer or a sidebar? You can do that by defining a grid area. Instead of defining each box of your grid separately, you just use the same title repeated, and the code will automatically combine them.

So, if I wanted to have my little 2x2 beginner box be one large header and two underneath, I would use "grid-template-areas: \"header header\" \"bottomleft bottomright\";"
A
B
C
[div="display:grid; grid-template-columns: 50px 50px; grid-template-rows: 50px 50px; grid-template-areas: \"header header\" \"bottomleft bottomright\";"]
[div="grid-area:header;background-color:skyblue;"]A[/div]
[div="grid-area:BottomLeft;background-color:slategray;"]C[/div]
[div="grid-area:BottomRight;background-color:steelblue;"]D[/div]
[/div]


You can also define areas vertically! This uses "grid-template-areas: \"left topright\" \"left bottomright\";"
A
B
C
[div="display:grid; grid-template-columns: 50px 50px; grid-template-rows: 50px 50px; grid-template-areas: \"left topright\" \"left bottomright\";"]
[div="grid-area:left;background-color:skyblue;"]A[/div]
[div="grid-area:TopRight;background-color:silver;"]B[/div]
[div="grid-area:BottomRight;background-color:steelblue;"]C[/div]
[/div]


You can only define an area using boxes that are directly next to each other horizontally, OR directly next to each other vertically. You cannot set an L-shape as an area, you have to split it in two.

Another thing to keep in mind is that capitalization matters (bottomright versus BottomRight), and it can get kind of touchy about area definitions that start with numbers, so I don't recommend things like "1L" as your area names.

One more super cool thing with areas is you can use a period if you don't want to have anything in that area. It'll just act as if there's nothing there at all!
A
B
C
[div="display:grid; grid-template-columns: 50px 50px; grid-template-rows: 50px 50px; grid-template-areas: \"TopLeft .\" \"BottomLeft BottomRight\";"]
[div="grid-area:TopLeft;background-color:skyblue;"]A[/div]
[div="grid-area:BottomLeft;background-color:slategray;"]B[/div]
[div="grid-area:BottomRight;background-color:steelblue;"]C[/div]
[/div]


One thing to keep in mind with grid areas, though, is that you can only stack additional divs inside a grid area if it only covers one space of the grid. That means:
Extra divs here!
And here!
But Not Here.
[div="display:grid; grid-template-columns: 1fr 1fr; grid-template-rows:1fr 1fr; grid-template-areas: \"TopLeft TopRight\" \"Bottom Bottom\";"]
[div="grid-area:TopLeft;background-color:skyblue;"][div="margin:5px;background-color:white;text-align:center;"]Extra divs here![/div][/div]
[div="grid-area:TopRight;background-color:silver;"][div="margin:5px;background-color:white;border-radius:10px;text-align:center;"]And here![/div][/div]
[div="grid-area:Bottom;background-color:slategray;text-align:Center;"]But Not Here.[/div]
[/div]


Trying to put an extra div in a multi-area will result in your code failing to parse.


Spacers
Great, so now you've got your grid and your areas defined. You can put spaces into your grid to separate the boxes if you want. The operative code is "grid-column-gap: ??;" for spaces between columns or "grid-row-gap: ??;" for spaces between rows. You can use either X% or XXpx for formatting. If you're using pixels, you have to format it as "10px" and not "10 px" - putting the space in breaks the code. Fractions don't work here, sorry.
A
B
C
D
[div="display:grid; grid-template-columns: 50px 50px; grid-template-rows: 50px 50px; grid-template-areas: \"TopLeft TopRight\" \"BottomLeft BottomRight\";grid-column-gap:1%; grid-row-gap: 20px;"]
[div="grid-area:TopLeft;background-color:skyblue;"]A[/div]
[div="grid-area:TopRight;background-color:silver;"]B[/div]
[div="grid-area:BottomLeft;background-color:slategray;"]C[/div]
[div="grid-area:BottomRight;background-color:steelblue;"]D[/div]
[/div]


And honestly, that's the majority of it! From there it's just a matter of combining grids with whatever you can imagine. You can actually do pixel art if you've got too much time on your hands! Play around with it and see what you can come up with!


[div="display:grid; grid-template-columns: 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px; grid-template-rows: 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px; grid-template-areas: \"w0101 w0101 w0101 w0101 w0101 w0101 w0101 w0101 w0101 w0101 w0101 w0101 w0101 w0101 w0101 \" \"w0201 w0201 w0201 w0201 r0201 r0201 r0201 r0201 r0201 r0201 w0202 w0202 w0202 w0202 w0202\" \"w0301 w0301 w0301 r0301 r0301 r0301 r0301 r0301 r0301 r0301 r0301 r0301 r0301 w0302 w0302\" \"w0401 w0401 w0401 br0401 br0401 br0401 p0401 p0401 p0401 bk0401 p0402 w0402 w0402 w0402 w0402\" \"w0501 w0501 br0501 p0501 br0502 p0502 p0502 p0502 p0502 bk0501 p0503 p0503 p0503 w0502 w0502\" \"w0601 w0601 br0601 p0601 br0602 br0602 p0602 p0602 p0602 p0602 bk0601 p0603 p0603 p0603 w0602\" \"w0701 w0701 br0701 br0701 p0701 p0701 p0701 p0701 p0701 bk0701 bk0701 bk0701 bk0701 w0702 w0702\" \"w0801 w0801 w0801 w0801 p0801 p0801 p0801 p0801 p0801 p0801 p0801 p0801 w0802 w0802 w0802\" \"w0901 w0901 w0901 r0901 r0901 bl0901 r0902 r0902 bl0902 r0903 w0902 w0902 w0902 w0902 w0902\" \"w1001 w1001 r1001 r1001 r1001 bl1001 r1002 r1002 bl1002 r1003 r1003 r1003 w1002 w1002 w1002\" \"w1101 r1101 r1101 r1101 r1101 bl1101 bl1101 bl1101 bl1101 r1102 r1102 r1102 r1102 w1102 w1102\" \"w1201 p1201 p1201 r1201 bl1201 y1201 bl1202 bl1202 y1202 bl1203 r1202 p1202 p1202 w1202 w1202\" \"w1301 p1301 p1301 p1301 bl1301 bl1301 bl1301 bl1301 bl1301 bl1301 p1302 p1302 p1302 w1302 w1302\" \"w1401 p1401 p1401 bl1401 bl1401 bl1401 bl1401 bl1401 bl1401 bl1401 bl1401 p1402 p1402 w1402 w1402\" \"w1501 w1501 w1501 bl1501 bl1501 bl1501 w1502 w1502 bl1502 bl1502 bl1502 w1503 w1503 w1503 w1503\" \"w1601 w1601 br1601 br1601 br1601 w1602 w1602 w1602 w1602 br1602 br1602 br1602 w1603 w1603 w1603\" \"w1701 br1701 br1701 br1701 br1701 w1702 w1702 w1702 w1702 br1702 br1702 br1702 br1702 w1703 w1703\" \"w1801 w1801 w1801 w1801 w1801 w1801 w1801 w1801 w1801 w1801 w1801 w1801 w1801 w1801 w1801\";"]
[div="grid-area:w0101;background-color:white;"][/div]
[div="grid-area:w0201;background-color:white;"][/div]
[div="grid-area:r0201;background-color:red;"][/div]
[div="grid-area:w0202;background-color:white;"][/div]
[div="grid-area:w0301;background-color:white;"][/div]
[div="grid-area:r0301;background-color:red;"][/div]
[div="grid-area:w0302;background-color:white;"][/div]
[div="grid-area:w0401;background-color:white;"][/div]
[div="grid-area:br0401;background-color:sienna;"][/div]
[div="grid-area:p0401;background-color:peachpuff;"][/div]
[div="grid-area:bk0401;background-color:black;"][/div]
[div="grid-area:p0402 ;background-color:peachpuff;"][/div]
[div="grid-area:w0402;background-color:white;"][/div]
[div="grid-area:w0501;background-color:white;"][/div]
[div="grid-area:br0501;background-color:sienna;"][/div]
[div="grid-area:p0501;background-color:peachpuff;"][/div]
[div="grid-area:br0502;background-color:sienna;"][/div]
[div="grid-area:p0502;background-color:peachpuff;"][/div]
[div="grid-area:bk0501;background-color:black;"][/div]
[div="grid-area:p0503;background-color:peachpuff;"][/div]
[div="grid-area:w0502;background-color:white;"][/div]
[div="grid-area:w0601;background-color:white;"][/div]
[div="grid-area:br0601;background-color:sienna;"][/div]
[div="grid-area:p0601;background-color:peachpuff;"][/div]
[div="grid-area:br0602;background-color:sienna;"][/div]
[div="grid-area:p0602;background-color:peachpuff;"][/div]
[div="grid-area:bk0601;background-color:black;"][/div]
[div="grid-area:p0603;background-color:peachpuff;"][/div]
[div="grid-area:w0602;background-color:white;"][/div]
[div="grid-area: w0701;background-color: white;"][/div]
[div="grid-area: br0701;background-color: sienna;"][/div]
[div="grid-area: p0701;background-color: peachpuff;"][/div]
[div="grid-area: bk0701;background-color: black;"][/div]
[div="grid-area: w0702;background-color: white;"][/div]
[div="grid-area: w0801;background-color: white;"][/div]
[div="grid-area: p0801;background-color: peachpuff;"][/div]
[div="grid-area: w0802;background-color: white;"][/div]
[div="grid-area: w0901;background-color: white;"][/div]
[div="grid-area: r0901;background-color: red;"][/div]
[div="grid-area: bl0901;background-color: blue;"][/div]
[div="grid-area: r0902;background-color: red;"][/div]
[div="grid-area: bl0902;background-color: blue;"][/div]
[div="grid-area: r0903;background-color: red;"][/div]
[div="grid-area: w0902;background-color: white;"][/div]
[div="grid-area: w1001;background-color: white;"][/div]
[div="grid-area: r1001;background-color: red;"][/div]
[div="grid-area: bl1001;background-color: blue;"][/div]
[div="grid-area: r1002;background-color: red;"][/div]
[div="grid-area: bl1002;background-color: blue;"][/div]
[div="grid-area: r1003;background-color: red;"][/div]
[div="grid-area: w1002;background-color: white;"][/div]
[div="grid-area: w1101;background-color: white;"][/div]
[div="grid-area: r1101;background-color: red;"][/div]
[div="grid-area: bl1101;background-color: blue;"][/div]
[div="grid-area: r1102;background-color: red;"][/div]
[div="grid-area: w1102;background-color: white;"][/div]
[div="grid-area: w1201;background-color: white;"][/div]
[div="grid-area: p1201;background-color: peachpuff;"][/div]
[div="grid-area: r1201;background-color: red;"][/div]
[div="grid-area: bl1201;background-color: blue;"][/div]
[div="grid-area: y1201;background-color: yellow;"][/div]
[div="grid-area: bl1202;background-color: blue;"][/div]
[div="grid-area: y1202;background-color: yellow;"][/div]
[div="grid-area: bl1203;background-color: blue;"][/div]
[div="grid-area: r1202;background-color: red;"][/div]
[div="grid-area: p1202;background-color: peachpuff;"][/div]
[div="grid-area: w1202;background-color: white;"][/div]
[div="grid-area: w1301;background-color: white;"][/div]
[div="grid-area: p1301;background-color: peachpuff;"][/div]
[div="grid-area: bl1301;background-color: blue;"][/div]
[div="grid-area: p1302;background-color: peachpuff;"][/div]
[div="grid-area: w1302;background-color: white;"][/div]
[div="grid-area: w1401;background-color: white;"][/div]
[div="grid-area: p1401;background-color: peachpuff;"][/div]
[div="grid-area: bl1401;background-color: blue;"][/div]
[div="grid-area: p1402;background-color: peachpuff;"][/div]
[div="grid-area: w1402;background-color: white;"][/div]
[div="grid-area: w1501;background-color: white;"][/div]
[div="grid-area: bl1501;background-color: blue;"][/div]
[div="grid-area: w1502;background-color: white;"][/div]
[div="grid-area: bl1502;background-color: blue;"][/div]
[div="grid-area: w1503;background-color: white;"][/div]
[div="grid-area: w1601;background-color: white;"][/div]
[div="grid-area: br1601;background-color: sienna;"][/div]
[div="grid-area: w1602;background-color: white;"][/div]
[div="grid-area: br1602;background-color: sienna;"][/div]
[div="grid-area: w1603;background-color: white;"][/div]
[div="grid-area: w1701;background-color: white;"][/div]
[div="grid-area: br1701;background-color: sienna;"][/div]
[div="grid-area: w1702;background-color: white;"][/div]
[div="grid-area: br1702;background-color: sienna;"][/div]
[div="grid-area: w1703;background-color: white;"][/div]
[div="grid-area: w1801;background-color: white;"][/div]
[/div]

User avatar
Sans_the_Medic
Bronze
Posts: 1692
Joined: Sat May 05, 2018 5:09 pm
Gender: Male
Location: G&K S-09 base
Contact:

Re: A Guide to Grids

Post by Sans_the_Medic » Wed Sep 11, 2019 7:19 pm

*Googles "how to upvote RPF posts"*
"Remember, no russian... Because I-I don't understand russian..." ~ Armour fairy
Image

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest