Get in to the Grid: Style Elements Made Easy

It has always been the case that as the skill of a trade is developed, it becomes more technical. The carpenter begins with the humblest of tools: chisels, saws, picks. In time, the ambition of the carpenter grows. The simple tools he is accustomed to no longer suffice, and the use of more technical power tools is required. On and on the carpenter's ambition is driven, and on and on it is supported by the adoption of more and more technical tools to accomplish the task. In no time at all, the carpenter finds his hand tools on the shelf, himself sat at a computer, calloused fingers now tapping away in blender, sculpting the next grand vision to be exported to candl. slicer software to chart how a milling machine will precisely carve the components of the next masterpiece.

When it comes to digital expression, the laymen have many options that simplify the process of creating a website. Numerous website builders exist that can make designing a website as simple as dragging and dropping elements to pages. However, as with all things, there are sacrifices that come with this ease of use, such as a lack of uniqueness, poor code optimization, and a lack of interactivity.

Inevitably the ease of using such services is replaced with a feeling of limitation tied to the templates and buttons on offer. But what is there to do? Creating a style-less website is hard enough on its own, but making a website look and feel exciting using nothing but absolute coordinates and pixel counts is a recipe for disaster.

But there is a happy medium. Where goes our carpenter, so go the musician, the painter, and the cohort of creatives into a world that is increasingly using software to express itself. And there too, with the Grace of Grid, go I.

Think of Grid as a tool within a tool. From within the vast and daunting possibilities for creation present in the html and css script, I have found that Grid is a great way to easily simplify and organize the process of developing the style and look of a website.

Let's look at my most recent efforts at learning to code: Dungeons and Dragons, naturally! The idea of the site is to pull data from a public API and use it to help users create their own characters with unique origins and stats. To my mind, such a process of creation, in perhaps one of the most colorful settings in all of fantasy, required a vibrant and thematic presentation.

For inspiration, we turned to the official Dungeons and Dragons website to see what elements we thought we could use:

The official website manages to fill itself with interesting and eye-catching visual designs without the user getting lost or the site itself feeling cluttered. Subjects are organized neatly, represented with bombastic colors that draw the eye, separated by clean, sharp lines that contrast the vibrant interactable elements against the washed out, muted colors of the background.

                 Composing Your Grid

Using Grid made creating a simulacrum of this design extremely easy, even for a beginner like me. It all starts with creating your grid in your html. The process can be done in several ways, but the easiest way to create my own grid was to imagine my webpage split into four rows and three columns.

Creating the code for this is as simple as defining how many rows and columns there will be in your css:

grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 1fr 1fr 100px;
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;

Here, each "fr" represents an equal division of the page into three columns. You can see in our design that the top and bottom rows are not as robust as the middle two; we could change the dimensions of our grid divisions here by simply writing out how many pixels high they should be. Since our top and bottom rows will be our header and footer banners to the website, we decided they can be smaller than the central grid divisions, where the interactive elements and user information will be:

Woah! What happened to our symmetrical divisions? With Grid, it's easy to designate an element of your webpage to take up multiple divisions of the grid as you see fit. All I did was designate a starting position and ending position for my elements. Take my header for example:

.header {
grid-row-start: 1;
grid-row-end: span 1;
grid-column-start: 1;
grid-column-end: 4;
}

You will see that I have set the header to begin at the topmost row, 1, and the left most column, also denoted with a 1 because it is the first column moving from left to right. I have set the header to end at 4. How does that make sense? Aren't there only three columns? You are as correct as you are perceptive! In fact, when we denote our start and endpoints for our grid elements, we actually designate them by the margins of our grid. In a row of three columns, there would be two outer margins and two inner margins, meaning that to have our header stretch the full width of our grid, we would have it end at the fourth and right-most margin:

Great, that makes sense, but what about grid-row-end? What is "span 1"? Span is used to denote how many row or column margins the element will stretch across, or span, before it ends. So, for header, we see that the grid-row-start is the very first row margin, the top of the grid/page, and spans to the next margin, which encompasses the first row. As we can see, there are multiple ways to designate the dimensions of grid elements, finding what works best for you is all a part of getting grids.

                     Imagining Images

Notice that, even when muted, the backgrounds of all the elements of the official website have images of this dungeon or that dragon. It allows for negative space to exist on the page, without giving up a good deal of the website to completely blank, boring white page. With grid, we can do that too! Though there is more than one way to accomplish this, the way I was able to get my main grids to have similar muted images was by simply setting the background of each grid to be the image:

.wizard-list-background {
background-image: url("https://lh3.googleusercontent.com/pw/ADCreHeN4cO4Hc5c98h6VVxUPMs2FrUEDOKF2WYw5U1a9DYhsWgSOIQfEggUKtxVHlphFcHlC8hOkwDIzxROJuFJOhUf8vXdGSCei0f9YPO8CGguydMxkOc=w2400");
grid-row-start: 2;
grid-row-end:span 1;
grid-column-start: 1;
grid-column-end: span 1;
border: 10px solid tan;
border-style: outset;
padding: 10px;
}

I decided to use a photo editing program to wash out the colors of the images before uploading, however with the power of grid we could create the same effect without the need of any external software. One way we could accomplish this is by taking advantage of the z-index. Think of the z-index as the third dimension of your grid. Increasing the value of the z-index pushes that grid forward, allowing it to stack on top of other grids and occupy the same space:

.wizard-list-background {
background-image: url("https://lh3.googleusercontent.com/pw/ADCreHeN4cO4Hc5c98h6VVxUPMs2FrUEDOKF2WYw5U1a9DYhsWgSOIQfEggUKtxVHlphFcHlC8hOkwDIzxROJuFJOhUf8vXdGSCei0f9YPO8CGguydMxkOc=w2400");
grid-row-start: 2;
grid-row-end:span 1;
grid-column-start: 1;
grid-column-end: span 1;
border: 10px solid tan;
border-style: outset;
padding: 10px;
}

#wizard-list {
grid-row-start: 2;
grid-row-end:span 1;
grid-column-start: 1;
grid-column-end: span 1;
z-index: 2;
border: 10px solid tan;
border-style: outset;
padding: 10px;
font-family: eternalFont;
color: rgb(159, 4, 4);
}

Notice that these two elements cover the exact same grid rows and column dimensions, however because #wizard-list has a z-index value of 2, it appears stacked on top of .wizard-list-background. How does this help us with changing the color of our grid to a more muted tone? We need simply add a background color to our #wizard-list, designate it as white, and increase the opacity. Just like a pair of white tinted sunglasses, or #wizard-list is now tinting .wizard-list-index below it.

.wizard-list-background {
background-image: url("https://lh3.googleusercontent.com/pw/ADCreHeN4cO4Hc5c98h6VVxUPMs2FrUEDOKF2WYw5U1a9DYhsWgSOIQfEggUKtxVHlphFcHlC8hOkwDIzxROJuFJOhUf8vXdGSCei0f9YPO8CGguydMxkOc=w2400");
grid-row-start: 2;
grid-row-end:span 1;
grid-column-start: 1;
grid-column-end: span 1;
border: 10px solid tan;
border-style: outset;
padding: 10px;
}

#wizard-list {
background-color: rgba(255, 255, 255, 0.674);
grid-row-start: 2;
grid-row-end:span 1;
grid-column-start: 1;
grid-column-end: span 1;
z-index: 2;
border: 10px solid tan;
border-style: outset;
padding: 10px;
font-family: eternalFont;
color: rgb(159, 4, 4);
}

              It's What's Inside That Counts

Not only can we make the Grid itself into an eye-catching design, but we can also fill the grid elements up with plenty of eye-catching elements as well! By simply appending text, images, or even other grids into our grid elements, we can create interactive, layered pages. Take, for example, the .content-large grid element; this element is composed of 5 grids!

• At the very back, the .content-large grid uses it's background image to create the library. -Stacked on top of that is another grid, #the-Book-Of-Races, which has the open book image as its background image. -Next at a z-index of 4 are #left-page and #right-page, each set to the dimensions of one page, and each nesting another grid element to append information such as text and images to!

.content-large {
background-image: url("https://cdn.openart.ai/stable_diffusion/b012323c5ffa3fd5cad34cff7c9d929e106675c6_2000x2000.webp");
background-size:cover;
grid-row-start:2;
grid-row-end:span 1;
grid-column-start: 2;
grid-column-end: span 2;
border: 10px solid tan;
border-style: outset;
padding: 10px;
font-family: eternalFont;
color: rgb(159, 4, 4);
display: grid;
}

#the-Book-Of-Races{
background-image: url("https://lh3.googleusercontent.com/pw/ADCreHc9HyyVNt_GSvSgKf-FODysDzW0oPbN_EHVlV_IR6afnAvPowQVUApF-0LseGT0A-LzCAcYW66viSGcjiVJuqHssJApGVZfJS9EbtXXymVL20_O5J0=w2400");
background-size:cover;
display: block;
margin: auto;
width: 60rem;
height: 30rem;
grid-row-start:2;
grid-row-end: span 1;
grid-column-start: 2;
grid-column-end: span 2;
z-index: 2;
}

#right-page {
/* background-color: rgba(0, 0, 255, 0.432); */
grid-row-start:2;
grid-row-end: span 1;
grid-column-start: 3;
grid-column-end: span 1;
z-index: 4;
}
#right-page-info {
margin-top:100px;
}

#left-page {
/* background-color: rgba(0, 0, 0, 0.37); */
grid-row-start:2;
grid-row-end: span 1;
grid-column-start: 2;
grid-column-end: span 1;
z-index: 4;
}
#left-page-info {
  width: 17rem;
margin-top: 6rem;
margin-left: 15rem;
}

And, if we click on one of the fantasy race names in the navbar on the left, we see images and text populate our pages!

The craziest thing about all of this is that it is just the way that I decided to design my website using Grid. For each example given here, there is at least one other way to accomplish the same goal, and likely more efficiently. But I'll spare you anymore reading, go out and give Grid a try for yourself!