DEV Community

Cover image for How to Start Working with CSS Grid
Luis Santiago for Developers @ Asurion

Posted on

How to Start Working with CSS Grid

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

Grid layout
Grid layout

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

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

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/>.

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

Initial layout

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.

display: grid

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

Initial grid

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.

grid-template-columns

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.

Template columns

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.

grid-column-gap

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

Column gap

grid-row

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).

Image span

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.

Device deductible

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.

Top comments (5)

Collapse
 
missjavascript profile image
Jenaba Sow

Love the Grid vs Flexbox section! This is definitely a concept I struggled with at the start of my webdev journey. Will be referencing your article anytime I need a refresher!

Collapse
 
luisg_santiago profile image
Luis Santiago

Thank you Jeneba! Also, feel free to reach out anytime

Collapse
 
johannes_k_rexx profile image
johnblommers

My personal view is that I generally don't want somebody else's JavaScript running in my web browser. Yes I realize that there are use cases where this is not an issue.

That said, I had thought that CSS could by itself make for a responsive web page. When I first started reading your article I had hopes it would be just about CSS. But ahhhh damn there was the JavaScript. Dast.

Perhaps you would consider an article revision that is pure CSS. No pressure.

Collapse
 
colinnnnnnn profile image
Colin Carter

I'm incredibly late to the game here but, unless there's been an edit to the article since publishing, there's nothing in here about javascript other than that it's built in React. All of the layout and responsive bits are pure CSS.

Not criticizing to be negative, just responding in the event someone else reads this and thinks about dismissing the article.

Collapse
 
luisg_santiago profile image
Luis Santiago • Edited

Great point, keeping the article pure CSS would have kept our attention focused on one language. I will keep this in mind next time. Thanks!