DEV Community

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

Posted on

11

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

import "./styles.css";
import "./main-styles.css";
export default function App() {
return (
<div className="main-container">
<div className="replacement-container">
<div className="device-image">
<Image />
</div>
<div className="device-description">
<DeviceDescription />
</div>
<div className="device-deductible-container">
<DeviceDeductible />
</div>
</div>
</div>
);
}
view raw App.js hosted with ❤ by GitHub

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.

.replacement-container {
display: 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.

.replacement-container {
display: grid;
grid-template-columns: auto 1fr;
}

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:

.replacement-container {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 20px;
}
view raw column-gap.css hosted with ❤ by GitHub

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

.replacement-container {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 20px;
}
.device-image {
grid-row: 1/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.

.replacement-container {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 20px;
}
.device-image {
grid-row: 1/3;
}
.device-deductible {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 5px;
}

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.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

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!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more