DEV Community

Thomas Barrett
Thomas Barrett

Posted on

Discovering CSS Grid Layout - part 1 - Character Sheet beginning

For a long time I put off learning CSS Grid Layout. I know flex-box and am able to achieve my layout goals with it, and therefore had no pressing need for grid. This attitude is one of the many mental traps I lay for myself, and so this morning I determined to recognize it and avoid slipping into it.

CSS-tricks served me well when learning flexbox so I turned to their guide for CSS-Grid.

I decided to try and recreate an RPG character sheet, as it relies on a structured layout, and I am likely to reuse the experience when I work on another planned future project.

character-sheet

A Grid layout consists of two layers, a parent and its children, just like with flexbox. You can have grids inside of grids, and even a flexbox inside of a grid. But at its simplest form the grid has two types of elements, the parent and its children. The parent container in css needs

display: grid;

This is going to allow all the other CSS Grid properties to be used on either the parent or children. For the character sheet I first wanted to establish a parent element that was centered on the page and filled the entire height.

In addition to the 'display' property there are two more necessary properties to place on the parent element 'grid-template-columns' and 'grid-template-rows'. These are going to establish your columns and rows. Syntax looks like this

grid-template-columns: [1st-grid-line-name] 1st-column-width [2nd-grid-line-name] 2nd-column-width [last-grid-line-name]

grid-template-rows follow the same syntax. If you don't put 'grid-line-names' in then grid will automatically give each line a positive and negative number (take a look at the CSS-Tricks Grid guide for a better explanation). I don't mind using the automated numbers myself so you won't see them in my code examples.

I created a character sheet div and used the following CSS to center it and take up the entire height.

body {
display: grid;
grid-template-columns: 1fr 18fr 1fr;
grid-template-rows: 1fr;
}

fr? What is fr? Oh right, I'm supposed to be the one explaining. fr is a unit that will allow you to set a size as a fraction of the remaining free space of a container. The key is the 'remaining'. If you set one of the columns to a non-flexible width (such as px) it will break up what is remaining into the fractional parts. In the above example I have not set any non-flexible widths, but I am breaking the entire width of the body into 20 parts (1 + 18 + 1) and assigning the first column to have 1/20 (5%), the middle column to have 18/20 (90%), and the third and final column to have the last 1/20 (5%).

For my rows I am establishing a single row which will take up 1/1 (100%) of the body's height.

Now all I need to do is tell the character sheet (body's child) div to occupy the middle column. but how? The 'grid-area' property. Now there are a few different properties you can use to set a child's area of the grid, but I like that grid-area clearly defines the four lines that will contain each child element. Here's the syntax

grid-area: row-start / column-start / row-end / column-end;

This is where you need the grid line names. Again I just use the auto generated ones (numbers starting at 1). Here is my code on the child of body (character-sheet) placing it inside the middle column, remember I only established one row.

.character-sheet {
grid-area: 1 / 2 / 2 / 3;
}

There we go, one character sheet centered with CSS grid. Well, sort of, really its just a div I named character sheet, I better get something inside. Now the process starts all over. A new grid needs to be established with character sheet as the parent, and each of the sections as children. Tune into part 2 to see how it's done.

-Thomas Barrett

Discussion (1)

Collapse
rahmanxyz profile image
Rahman

Hey, Thomas... I'm also want to become a full stack web developer. can you please tell me how i can do this in short amount of time??