CSS Grid Blog Post

Samuel Anderson — Fri, 23 Oct 2020 22:11:10 +0000

What is CSS Grid?

A way to organize elements in HTML.
A more in-depth alternative to flex-box.
A more stripped-down version of Bootstrap columns.

How do I use CSS Grid?

Make a container div that will contain all grid elements.
Add to the CSS of the container, display: grid or display: inline-grid (if you want an inline grid) as well as grid-template-columns: auto auto auto, with the autos being the number of columns (change it to a number to specify a column width)
Create the elements (ideally divs) that will go within the container div.
You're now done!

While this grid technically works, there are a few things you may want to add to make the grid more specified to your needs.

Adding specified sizes for all of the grid items using a grid-item class as well as setting width: px and height: px.
Adding grid padding between grid items using grid-column-gap: px, grid-row-gap: px, and grid-gap: px.
Changing grid column width by changing the auto's at the end of grid-template-columns.
Using justify-content to horizontally space the elements as you may please, such as justify-content: space-evenly.
Using align-content to vertically space the elements as you may please, such as align-content: center.

Making grid non-uniform

Many times, you won't want the automatically space and sized grids that css-grid can produce, instead you may want a grid that doesn't follow the rules of display: grid.

Make each element that is non-uniform have a unique class/id, such as item1, item2, item3, etc.
From this point you can define:

Num. of columns for elements to span using grid-column: 1 / 3 (goes from col. 1 to col. 3) or grid-column: 1 / span 3 (spans from col. 1 for 3 col.'s).
Num. of rows for elements to span using grid-row: 1 / 3 (goes from row 1 to row 3) or grid-row: 1 / span 3 (spans from row 1 for 3 rows).
For the most precision, define the entire area using grid-area: 1 / 3 / 3 / 4, where the element goes from row 1, col. 3 to row 3, col. 4 (you can use span as well).

Template area

To define the space an element takes up you can use grid-template-areas: area1 area2 area3 in the container, and grid-area: area2 in the grid item.

You can use periods instead of area names if they are not relevant to the area names you are using (grid-template-areas: area1 area1 . .)
You can use this for rows as well such as:

grid-template-areas: 
    'header header subtitle'
    'content content content'
    'footer name company'

CSS Grid Example

Made in Figma

Example after being made in HTML, CSS, and Javascript:
(with clickable advent days)

Use of CSS Grid in Project

Me and my groupmate used CSS Grid everywhere. Almost all formatting is based on CSS Grid. Even things that wouldn't normally be thought of to be CSS Grid are, in fact, CSS Grid.

Use in Whole Calendar

To format the entire calendar, we used CSS Grid. This is possibly the most obvious use in the website, since all the elements are literally in the shape of a grid.

The hierarchy of the elements is as follows:

<div id="flex-master">
  <div id="grid-container">
    <div class="grid-sub">
      <div class="grid-content">
        <div class="grid-body">1</div>
      </div>
      <div class="grid-image"></div>
    </div>
  </div>
</div>

As you can see, we are using flex box to center the entire thing, a grid container to contains all grid elements, sub grid-containers to contain each tile and hidden image, and grid-content to contain both the background and body text.

Grid Tile

We use CSS Grid even in elements with only one child, but why is that? Well, using Grid's align-items property, we can easily vertically align text which is normally a pain in normal HTML. The reason the image and content are separate is so they can have different levels of opacity.

Oh, and all these tiles (31, 1 for each day) are generated purely by JS in one for-loop. This means they all share the same properties and don't clog up the main HTML page.

Javacsript

The main use of Javascript is to generate the tiles and make it so when clicked on, they reveal an image behind them. The first is pretty standard, with createElement and appendChild used to create and append the main containers.

The code for revealing the image works by having an event listener and changing the opacity values for the content and image to be toggled when clicked on.

gridSub.addEventListener('click', function() {
  hideOnClick(gridSub);
});

Finally, to make sure each tile has an image in a easily modifiable way, we have a list of strings that are image links so that each tile at each index has an image at the same index.

var imgList= [
  "santa.png",
  "elf.png",
  ...
];

for (let i = 0; i < imgList.length; i++) {
  gridImg.src = imgList[i];
}

Conclusion

CSS grid is one more tool in a web developer's toolbelt. Knowing the info is only half of the practice, the other half comes from actual usage in a website.
However, unlike other tools in the toolbelt, CSS grid uses a very logical and easy to visualize way of formatting elements, which alleviates the headaches of things like float: left and position: absolute. It is incredibly useful for formatting the basic structure of any website and I can't wait to use it in one.

DEV Community: Samuel Anderson