CSS Grid – The Ultimate Guide | Part 1

The CSS grid is an important concept and can be confusing for most beginners. So, in this article, we will be diving deep into the core concepts with examples. We will also be covering some of the most basic website layouts, using pure CSS, that will help you in your web design journey.

Getting Started with CSS Grid

<style>
    .grid {
       display: grid;
    }
</style>

<div class="grid">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
</div>

In order to create a grid, we will need to start with a <div> that wraps or encloses the items we need in the grid. We have chosen grid as its class name but you can use any class name.

Next, we need to set the display property to grid or inline-grid.

CSS Grid vs Inline-Grid

The difference between grid and inline-grid is that in case of grid, the items are spanned across the full width of the container as demonstrated below (you may have to scroll down a bit to see both):

See the Pen grid vs inline-grid by Adrita Roy (@adroy21) on CodePen.

Related: Bootstrap Button Customization Explained!

CSS Grid Rows and Columns

When we set the display property for a container as grid, the items are placed on top of each other by default. But we definitely don’t want a single column.

In order to create multiple columns and define the height and width of both columns and rows, we use two rules: grid-template-columns and grid-template-rows.

grid-template-columns

It is used to specify the number of columns and the width of each column in a grid layout. The values (lengths) are specified in a space-separated manner. If three length values are specified, the configuration will be applied to every three items inside the grid wrapper div.

For example, grid-template-columns: 50% 50%;

This will create two columns, each taking up 50% of the parent’s width. But using percentages is not recommended. Instead use the fr unit, like so:

For example, grid-template-columns: 1fr 1fr;

fr is a fractional unit. The above example will create the same two columns each taking up equal width.

See the Pen grid-template-columns Example by Adrita Roy (@adroy21) on CodePen.

grid-template-rows

This property is used to define the number of and height of each row in a grid layout.

Example: grid-template-rows: 1fr 2fr 1fr;

You can use different units like px, em, % or set it to auto. Learn more about it here.

The above example will apply the configuration to every three rows. As you can see in the example below, the height of middle row is larger compared to the first and third.

See the Pen grid-template-rows example by Adrita Roy (@adroy21) on CodePen.

Bonus:

We can rewrite the above CSS property using the repeat() function that allows you to define a recurring pattern. Hence, grid-template-columns: 1fr 1fr 1fr; can be written as grid-template-columns: repeat(3, 1fr); Learn more about it here.

Additionally, you can add gaps (or gutters) in between the rows and columns with the help of grid-column-gap and grid-row-gap properties.

Related: Free Tools for Color Schema, Typography, Images, Videos and more!

Auto-fit and Auto-fill

The auto-fit and auto-fill properties are useful in many scenarios. What the auto-fill property does is that it tries to fit as many columns and in the process, the newly added columns, empty or not, take up an equal amount of space.

Basically, it may leave some unwanted space after the required content has been filled. On the other hand, with the auto-fit property, the content stretches out to fill the available width of the row.

You can go ahead and read this article by CSS-Tricks to learn more.

The minmax() function

The minmax() function takes in two parameters – the minimum size and the maximum size to set the limit for which the elements can be resized.

Example: grid-template-rows: minmax(auto, 50%);

It can also be combined with auto-fit property like so:

grid-template-columns: repeat(auto-fit, minmax(auto, 1fr));

Some Basic Layouts

Let us look at two examples where we can apply we learnt so far. You can use these layouts in your project to make something amazing just by adjusting the sizes and adding contents to the div.

Layout 1: Three Columns

CSS Grid Three Column Grid layout - GeekyMinds

See the Pen Three Content Grid Layout by Adrita Roy (@adroy21) on CodePen.

Layout 2: Two-by-Two Grid

CSS Grid Two by Two Grid layout - GeekyMinds

See the Pen Two by Two Grid by Adrita Roy (@adroy21) on CodePen.

We have more properties to cover which we cannot compile in one article. Stay tuned for more upcoming articles about CSS Grids. 😎