Luis SantiagoWhen 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
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:
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:
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:
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.
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.
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:
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).
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.
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.
