Introduction to CSS Grid you may have missed — Part 2
Introduction
The first part of the article covered the basic terminology of CSS Grid.
The whole idea of splitting this topic into a series of smaller articles was to help you better understand the concept behind the grid before moving on to more complex things. I hope that now you feel more confident and you are ready to dive into more examples.
What will you learn?
In this part, I would like to cover most of the functions that can be used. These functions will ease the pain of writing clean and reusable layouts for cross devices and different types of media queries. Without any further ado, let’s check them.
Functions, functions. Functions everywhere!
Repeat function
This is pretty straightforward. Instead of repeating columns/rows values or specific patterns, you can simply use this function. Let’s have a look at the examples below:
Minmax function
The minmax function accepts two parameters that represent the minimum and maximum values. These values set a range of a grid row (height) or column (width).
Note that this function works best with strict minimum values (e.g. in pixels) and some flexible maximum values, as the grid stretches itself to 100% of the available width.
And the result of the above code:
Fit-content function
It accepts only one parameter and that is the maximum value. Any grid column or row that has this property set will take as little space as possible (depending on the content) but no more than the maximum value set.
You may see some similarities with the minmax function when 0 is set as the property value. One important difference is that the minmax will try to occupy the maximum space allowed. The fit-content makes sure that no more space than necessary is being taken.
And the result of the above code:
Min-content and Max-content functions
These functions are not purely CSS Grid ones. You may have already used them as they are commonly used in the CSS.
But how do they work? If the min-content is set to the column, the content will take as little space as possible. For example, if you have a text (span or p) in the column, it will be wrapped and put in one line. The max-content on the opposite will make sure that the content takes as much space as it can (in terms of text it will be putting everything in one line).
And the result of the above code:
Grid-auto-flow property
If you do not change this property the standard way of putting items in the grid container is from left to right. This means that when the first line of the grid container is full (no space on the screen), the next item will be placed into the next row.
The default value of grid-auto-flow is ROW!
And the visualization of both grids:
Positioning
With every new grid container creation, we also get grid lines automatically. By using them we can position the item as we want.
What is most crucial to understand is that while positioning an item, we must define four grid lines (grid-row-start, grid-row-end, grid-column-start, and grid-column-end).
And the result of the above code:
Note that you can start positioning an item at grid line number 1 and end it on line number -1. This will always be the last line, regardless of how many there are in your grid.
There is also a possibility to define how many grid lines in a column or a row should be covered by an element by adding the ‘span’ word:
grid-column: 1 / span 2
Dynamic number of rows and/or columns
Quite often you will need to have a dynamic number of items, according to the width of the container and the space available on the screen. You can achieve it by combining the repeat function with auto-fit & auto-fill.
When you are using the repeat function with auto-fit or auto-fill, the grid container creates as many grid tracks (columns/rows) as possible without overflowing the container.
With auto-fit, when there are not enough grid items to fill the number of tracks created, those empty tracks are collapsed.
And the result of the above code:
With auto-fill, everything is the same as auto-fit, except empty tracks are not collapsed. They are preserved.
And the result of the above code:
Summary
That’s all for this part. I hope that after reading this article you will try to use the full potential of the CSS Grid. Remember that only practice makes the master. So thanks for reading and keep coding!