What is CSS-GRID and why we use it ?

• CSS grid is a powerful tool that CSS gives us to easily align items and It can create two dimensional layout. Here, by two dimension I mean we can align items in rows and columns at the same time. In CSS flexbox we are allowed to align items just in one dimension i.e. we can align items either in rows or columns.
• The terms we should keep in mind while learning CSS-grid are 1). container 2). items. A grid container is something which contains grid items.

  <div class="container">
        <div class="items items-1">One</div>
        <div class="items items-2">Two</div>
        <div class="items items-3">Three</div>
        <div class="items items-4">Four</div>
        <div class="items items-5">Five</div>
        <div class="items items-6">six</div>
        <div class="items items-7">seven</div>
    </div>
  

• Note :- In order to make an element of HTML behaves like a grid container we have to set the displayproperty as display:grid or display:inline-grid. In the above example to make the container grid-layout. we have to write

  .container
  {
  display:grid;
  or
  display:inline-grid;
  }
  

  Let's dive into the properties of Grid container and Grid items

• First of all let's discuss about the property of Grid-container. There are in total 8 of them which we generally use.

   1). grid-template-columns
   2). grid-template-rows
   3). gap
   4). grid-auto-rows
   5). grid-auto-columns
   6). grid-template-areas
   7). justify-content
   8). align-content
  

  1). grid-template-columns

• This property defines the number of columns in the grid-container. It also defines the size of each items in each cell. Let's understand this property.
• Let say we want 3 columns each of size 100px than we can write grid-template-columns : 100px 100px 100px; and if we have more than 3 items in the container than the other items automatically goes to the next rows. we can also use write grid-template-columns : 1fr 1fr 1fr; to have columns each of size 1fr (fr = fractional unit).
• we can also give values to this property in different ways like grid-template-columns : repeat(3, 1fr). This will give you 3 columns each of the size of 1fr. And, obviously you can have columns of different sizes. You can also use percentage unit for this property but most commonly we will use fractions as units.

[Codepen]

2). grid-template-rows

• This property defines the height of rows in the grid-container. A slight difference in grid-template-rows property as compared to grid-template-columns is that in grid-template-rows if we have five items inside the grid-container and we used grid-template-rows : 1fr 1fr 1fr than the height of the first three items will be 1fr and the remaining two rows height will not get affected neither they will automatically adjust to another column. Let's understand more with an example.
• To have 3 rows each of size 1fr 2fr 1fr we can write grid-template-rows:1fr 2fr 1fr; . Let's directly jump into the example with a code snippet.

[Codepen]

3). Gap

• This property defines the column-gap and the row-gap. The value can be a percentage, pixel, em, rem etc. If we write gap : 10px 20px; than it means row-gap : 10px and column-gap : 20px. It is basically shorthand for row-gap and column-gap property. Let's dive into a code snippet to visualize this gap property.

[Codepen]

4). grid-auto-rows

• This property sets the size of each row in the grid-container regardless of the content inside it. If we write grid-auto-rows : 200px; than size of each row is going to be 200px. It's default value is set to grid-auto-rows : auto;. Let's understand this with a code snippet.

[Codepen]

5). grid-auto-columns

• This property sets the size(width) of each columns in the grid-container regardless of the content inside it. If we write grid-auto-columns : 200px; than size(width) of each column is going to be 200px. It's default value is set to grid-auto-columns : auto;. Let's understand this with a code snippet.

[Codepen]

6). grid-template-areas

• This property specifies the areas in the grid-layout by using names and than specified areas can be utilized by the grid-items by using grid-area property. Let's understand this property with a code snippet. Read the code for better understanding

[Codepen]

7). justify-content

• The justify-content property allows us align the items inside the grid-container in the horizontal direction. The values this property accepts are as follows.

  a). start : This will put all the grid-items to the starting of the grid-container.

[Codepen]

b). end : This will put all the grid-items to the end of the grid-container.

[Codepen]

c). center : This will put all the grid-items to the center of the grid-container.

[Codepen]

d). space-between : This will create spaces between the grid-items and the starting items will attached to the starting point of the grid-container and the grid-items which are at the end will attach to the ending point of the grid-container.

[Codepen]

e). space-around : This will create spaces which is distributed around the grid-items but the space between extreme items and the vertical edges of the container will be half of the space between the nearby two grid-items.

[Codepen]

f). space-evenly :This will create spaces which is distributed evenly around the grid-items and here the space between extreme items and the vertical edges of the container will be equal to the space between the nearby two grid-items.

[Codepen]

8). align-content

• This property aligns the grid-items inside the grid-container in vertical direction. The value that this property can take are as follows.

  a). start : This will put all the grid-items to the starting of the grid-container in vertical direction.

[Codepen]

b). end : This will put all the grid-items to the end of the grid-container in the vertical direction.

[Codepen]

c). center : This will put all the grid-items to the center of the grid-container in the vertical direction.

[Codepen]

d). space-between : This will create spaces between the grid-items in the vertical direction and the first-row items will attached to the top edge of the grid-container and the grid-items which are at the last row will attach to the bottom edge of the grid-container.

[Codepen]

e). space-around : This will create spaces which is distributed around the grid-items in the vertical direction but the space between extreme(vertical extreme) items and the horizontal edges of the container will be half of the space between the nearby two grid-items. Note :- This property will create spaces in vertical direction.

[Codepen]

f). space-evenly :This will create spaces which is distributed evenly around the grid-items in vertical direction and here the space between extreme(vertical extreme) items and the horizontal edges of the container will be equal to the space between the nearby two grid-items.

[Codepen]

So, the property of grid-container are finished 😎. Now what ?

Relax.....!!! Take a break.

via GIPHY

Hope you enjoyed the break 😎.

• Hey people I'm facing some issues with the current blog. I'm not able to put code snippets. Don't know why 😰?. So I will be writing about the grid-items properties in the next article. So there will be two parts on CSS-GRID. I wanted to complete this in one part only but without code-snippets I don't think this article will look nice

PART 1 Ended. Stay tuned for part two...!!!