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.
