How to Start Working with CSS Grid
Tags: css, javascript, cssgrid, webdev
Published: 2022-07-27 17:29:56


When I started working on new features at the beginning of my software development career, I mainly focused on application logic. Whenever I needed to change the styling I would quickly update the CSS, ensured it looked the way it was required, and switch back to the development portion.

With this approach, I didn't feel like I was getting a good understanding of how my CSS code was behaving in the background.

I decided to dive deeper into CSS. In this article, I will show you how to build a simple layout using CSS grid properties. We will see how CSS grid is a great layout system for content arrangement and application responsiveness.

## Grid VS Flexbox
Before I jump into the code for a CSS grid example, let's take a look at a high-level comparison between flex and grid layouts.

**Flex layout**
![Flex layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ce6vcui8x58rnmetvnw7.png)


**Grid layout**
![Grid layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5wm0jeocv8rnswxpzqg.png)

As you see in the image above, Flexbox behaves in a one-dimensional flow when arranging content. Rows are independent of others.

On the other hand, Grid is two-dimensional, with rows and columns affecting each other to form the entire layout.

The previous industry recommendation was to use Flexbox for UI elements but to use Grid for major layouts. The current industry recommendation is to **use Flexbox and Grid where they make the most sense**.

## What we are Learning
Let's build a quick layout, explore grid properties, and understand how they help us improve our application.

To follow the lines of code below, you will only need some foundational experience with Javascript, React, and CSS.

Here is what the final layout is supposed to look like:

![Required Layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zfp979d2n4b1slpgvkse.png)

After looking at the required layout I start thinking about translating this into a two-dimensional grid layout. Here is a drawing of what the layout looks like in my head before I start writing the first line of code:

![Initial mock](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fyev81hz4ux2mvj0k7lx.jpeg)

To avoid distractions and help you focus on the CSS code, I have moved all content like images, styling, and text to their respective components

`<Image />`, `<DeviceDescription />`, and `<DeviceDeductible/>`.

{% gist https://gist.github.com/luisgsantiago/372e9d96ed4e8c3b731e82d0e2727efa %}

Here is what our layout without CSS grid looks like so far:

![Initial layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mka32u3h3iaplbeosxz2.png)

Notice how I placed each of these components inside a `div` element and assigned `device-image`, `device-description`, and `device-deductible-container` as their className properties, respectively.

<u>**display: grid**</u>

Let's apply `display: grid` to `replacement-container`. This will allow us to treat all `div` elements within this `div` as a grid.

{% gist https://gist.github.com/luisgsantiago/64be234da3e03b259ff2b101d1e3fba9 %}

![Initial grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmgf2chfylfrtsnwtzol.png)

Since no other properties are assigned to our grid, the CSS grid system does its best placing each `div` within a row by default. Leaving us with one column and three rows.

CSS Grid counts rows and columns by starting with the number 1. Notice how the first row goes from 1 to 2. The second row goes from 2 to 3. The third row goes from 3 to 4. This is important to understand when we want our content to span across the grid.

<u>**grid-template-columns**</u>

We want our final layout to have two columns. We can tell CSS grid how many columns we want in our layout by assigning a column size value per column separated by space using `grid-template-columns`.

{% gist https://gist.github.com/luisgsantiago/9c2517de9fe17a194d97604318f751ff %}

![Template columns](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hrjg3vccclkrjkdmo9y.png)

In this case, the keyword auto (line 3) specifies the size for the first column to be automatically assigned based on the content inside the grid cell.

We have assigned `1fr` to the second column. This means the column takes one entire fraction of the space available between the two columns.

<u>**grid-column-gap**</u>

Let's include `grid-column-gap` to add a space of `20px` between the two columns:

{% gist https://gist.github.com/luisgsantiago/9db006770b88018b6833b42dac617342 %}

![Column gap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lap6d5mslzyh861hsnwj.png)

<u>**grid-row**</u>

So far, our layout has two columns. But our image needs to span across the first and second row to move the deductible section to the second column.

For this, we need the `grid-row` property. The syntax to span our image grid cell is `1/3` . With this, CSS grid knows we are spanning our grid cell `device-image` across the first row (1 to 2) and our second row (2 to 3).

{% gist https://gist.github.com/luisgsantiago/4a497103a039a786e15c3814cc3b3da2 %}

![Image span](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ctygxxzebjr61f4tu3u.png)

Our layout is almost done. The only section left to arrange is the deductible description. And for this, we'll use a grid within a grid. 

A `div` inside the `DeviceDeductible` component with className of `device-deductible` contains the deductible description. We will make this element a grid and place its content in one row and three columns. 

{% gist https://gist.github.com/luisgsantiago/e51bd273a096fd110708d6878ce6f3a4 %}

![Device deductible](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szzik113c50yo7393sj3.png)

Notice how we applied the same Grid properties in `replacement-container` with a difference in the syntax for `grid-template-columns`. 

The  syntax `repeat(3, 1fr)` is equivalent to `1fr 1fr 1fr`. This distributes one fraction of the available space to each column evenly.

That is all I have for now. I hope this gives you a good understanding of the layout possibilities available when using CSS Grid and confidence for you to have another tool under your development belt. Have fun building with CSS grid.

Keep coding, keep learning, and never give up.