Deep Dive into CSS Grid Layout – Part 1

What is CSS Grid?

CSS Grid is a modern way to create a two dimensional layout. This means two values (columns and rows) are required to determine the position of an element. CSS Grid works by applying a grid property to a parent element,  making all of the child elements grid items.Child elements are aligned into columns and rows to determine their position.

Grid-Template-Columns

CSS grid-template-columns property enable us to determine the number of columns a grid layout should have.

Let’s generate our boilerplate as shown below:

Now let’s add four <div> tags to our HTML file:

The <div> tag with a class of  gridContainer is the parent element. The grid property is applied to parent element.

Before we add the grid functionality let us  style the <div> with a class of  gridItem.

Now we will add grid functionality to the gridContainer class.

When we set the display property to grid, we then make the parent element a grid container.

After adding  display: “grid”  to the gridContainer, nothing may have changed. Now, let’s add ‘grid-template-column’ to the parent <div>

Grid-Template-Column 

We specified the number of columns we want to have with grid-template-column. Now, we can create three(3) column track for the children elements.

We give the grid Items a fix width of ‘100px’ each.

Let add more children element to the <div> with a class of .gridContainer class.

After doing this, we see that adding more children items in the gridContainer will always result in a 3 column grid. This is due to the grid-template-column property.

We can use an auto key word to have same grid width.

Therefore, we can use repeat to make it short. This will lead to the same result as the auto did.

I will end here and continue in the next article.

Related Posts