Utilizing CSS grid layout to organize our web apps
In the creation of my first Rails project, I found myself having trouble understanding how to actually structure the content within the project. After completing the core functionality of the app I was quite lost with how to actually display the content to the user in a not so ugly black and white, list fashion.
I talked to a friend who already had some experience in CSS and he told me about the grid. He explained to me the importance of understanding how to utilize the CSS grid layout.
I want to explore the grid layout in CSS from a beginners perspective and hopefully help other beginners better understand how they can use this tool to make their first webpages have some organization.
Basics
Let’s start with the basics. I think we all know what a grid is… A set of horizontal and vertical lines that create columns and rows.
The CSS grid has the following features:
- Allows for content blocks to be placed in specific positions
- It can have fixed or dynamic sizes
- Allows for alignment of content
- Allows for overlapping content (advanced)
To create a grid we first need to define its container. We define a grid container by declaring:
display: grid or display: inline-grid
This is the HTML for the grid. It currently has 4 rows.
Here is a visualization of the grid container with its <div>’s
Right now our grid is just a bunch of rows… but we know a grid also has columns. To add columns to a grid we can add this to the css class:
This gives us a grid with three 200 px wide columns.
The pixel might not be the greatest method to divvy up our columns. There is an easier way to create equal columns.
The fr unit is a length unit that is basically a fraction of the total container area. So if we wanted to do the same thing as above using the fr unit, we could do:
grid-template-columns: 1fr 1fr 1fr;
If we have a large grid we can use repeat() notation to declare how many times we want to create a column.
Right now our rows are being implicitly set. We can explicitly set them by adding to our css:
grid-template-rows: “Your row specs here”;
In Practice
Let’s say we want to create boxes or grid areas in a grid container with 4 columns and 4 rows.
Our grid has 5 column lines and 5 row lines. We can use these lines to define exactly how large we want our boxes to be.
We define our grid to be 4 rows and columns. We then define the size of our boxes by using column/row start/end attributes. We want our first box’s width to start at the column line number 1 and end on column line 3. We want the height to start at row line number 1 and end on row line 3. We do the same for the other boxes till we get the layout we desire.
Note that box sizes do not need to be equal to one another. You can have a large area that takes the whole top row and then have smaller boxes below. You just have to change the line start and ends.
When creating grids for your projects cssgrid is an extremely good resource that allows you to customize a grid and then generate the code for it. Codepen is also a very powerful resource for viewing small snippets of CSS and HTML in a browser preview.
I believe this is enough info to get any beginner ready to better organize the content on their web apps. There are many more features and functionalities of the grid layout, but this should be enough to get you started!
References and Resources:
