Thinking in CSS Grid
Two dimensional and outside-in. What does it mean ?
The idea is to divide the enter page in to number of rows and columns (depending on the design) and then arrange content inside this.
When we have divided the page in columns and rows means we can place content either horizontally or vertically i.e in two dimensions. Also we are creating outer skeleton first and then arranging content inside i.e. the outside-in approach.
First let me briefly explain the terms involved in grid layout.
Terminology
Please follow the definition of each item along with the picture below.
Grid container: Grid container can be any portion of a webpage. Inside which we will set the content. The container can be as big as a page layout or as small as contact card layout. I will explain this in more details with examples under Thinking in CSS Grid section below.
Layout is an arrangement or plan, especially the schematic arrangement of parts or areas
Grid lines: Grid lines are the vertical and horizontal lines which divide the grid into rows and columns. A column/row is surrounded by grid lines. For example in the below picture column 2 is surrounded by grid line 2 and grid line 3.
Grid Tracks: Inside a grid container, rows and columns are technically called grid tracks.
Grid cell: It is the intersection of one horizontal track and one vertical track.
Grid Area: It is the logical area where we place the grid items. It can span one or more grid cells.
Grid item: Any content that we want to place in grid and will occupy the grid area.
Grid Gap: It is the horizontal and vertical space between grid tracks.
Thinking in CSS Grid
Grid brings change of thinking while creating layout. Because it works in two dimensional and outside-in approach.
Let us say we want to create a twitter user home page using CSS Grid. In the below image I have drawn a rectangle with red border. This will be the grid container.
Inside the grid container, we need to create row and column tracks that will hold our content.
One easy approach is to place grid lines along the gutters in mockup, eg the gap between header and the content. Draw a line, you will get two row tracks. Similarly do it for rest of the container. Awesome! we have 6 row tracks and 3 column tracks.
If above method is not sufficient to give all the grid lines, then we have to do a detailed analysis of the content inside the container. Assuming above method is not sufficient for our example.
- Thinking for column tracks, if you see ‘Profile card’ and ‘Trends for you’ are of same width, let’s draw a vertical line to separate them from the main content. ‘Who to follow’ and ‘Footer card’ are also of same width draw a vertical line separating these also from main content. Awesome! we have 3 column tracks.
- Thinking for row tracks, ‘Header’ looks like one separate row (grid area spanning 3 columns) of some small fixed height. ‘Profile card’, ‘Trends for you’, ‘Who to follow’ and ‘Footer card’ has some fixed height, so let’s draw lines below all of them. ‘Who to follow’ will be grid area spanning 2 rows. The centre part of the page i.e. main content, height of this is flexible. So let’s draw a line at the end. Awesome! we have 6 row tracks.
With the tracks in place let’s implement the grid items.
Grids can be nested!
Which means each grid item can be implemented using grid layout. I have marked some possible items in the image below.
Let’s discuss one such item.
In the above picture, red box is grid container. Using the thought process described above, the gutters are sufficient to draw the grid lines. Awesome, again we have divided this into 3 row and 2 column tracks.
Headline can be placed inside the cell which is made up of first row track and second column track. Other cells can be similarly populated.
Congratulations! Our web page structure is ready to be implemented.
For initial few grids, subconsciously we will fallback to older ways of creating layouts. I have found drawing on pen and paper brings clarity to our thoughts. This will be equally helpful for people new to CSS layout.
Sum up!
In this post I have covered what is CSS Grid, it’s terminology and the thinking process behind creating a grid layout for a web page. I will cover implementation details in my next post.
I’d be happy to interact with you in the comments below!
