# CSS Grid Layout

## What is CSS Grid?

> CSS Grid is a two-dimensional layout that you can use for creating responsive items on the web. The Grid items are arranged in columns, and you can easily position rows without having to mess around with the HTML code.

## Features of CSS Grid:

* Flexible Track Sizes You can use the fr unit (Fraction Unit) to assign any specified pixel value to the grid. This will make your grid organized and responsive.
    
* Item Placement CSS grid has made it much easier to position items in the container in any area you want them to be without having to mess with the HTML markup.
    
* The alignment of an element/item in a container is easier than ever before with CSS Grid. In the container, you can now arrange elements/items horizontally and vertically as you wish.
    

## Benefits of CSS Grid:

* CSS Grid is very flexible and responsive.
    
* It makes it easy to create two-dimensional layouts.
    
* CSS Grid is also easy to use and is supported by most web browsers.
    
* The CSS grid makes your markup cleaner (in your HTML code) and gives you a lot more flexibility.
    

## When should you use CSS Grid?

> Although you can use CSS Grid in practically any aspect of web development, there are certain situations when it's ideal.
> 
> For example, when we have a complex design layout to implement, CSS Grid is better than the CSS float property. This is because Grid is a two-dimensional layout (with columns and rows), whereas the CSS float property is a one-dimensional layout (with columns or rows).
> 
> Grid is also a good choice when we need space or a gap between elements. By using the CSS grid-gap property, the spacing of two elements is much easier than using the CSS margin and padding properties which might end up complicating things.

## CSS Grid Properties:

##### The CSS grid layout consists of many grid properties. Let's see all the grid properties.

## **Properties for the Parent(Grid container)**

1. ### display:
    
    Defines the element as a grid container and establishes a new grid formatting context for its contents.
    
    values
    
    * `grid` – generates a block-level grid
        
    * `inline-grid` – generates an inline-level grid
        
    

```css
.container {
  display: grid | inline-grid;
}
```

> ![HOW TO USE CSS GRID LAYOUT VS INLINE-GRID | USING HTML & CSS - YouTube](https://i.ytimg.com/vi/KRfhbNk1sNY/maxresdefault.jpg align="left")

1. ### **grid-template-columns and grid-template-rows:**
    

These properties are used to declare the number of grids we want by providing the grid layout width and height by using both column and row templates.

grid-template-columns: The `grid-template-columns` property specifies the number (and the widths) of columns in a grid layout.

grid-template-rows :The `grid-template-rows` property specifies the number (and the heights) of the rows in a grid layout.

```xml
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

> ```css
> .container {
>   display: grid;
>   grid-template-columns: minmax(100px, auto);}
> ```

> ![ ](https://cdn.hashnode.com/res/hashnode/image/upload/v1675607897519/939ac37e-fead-404b-8eea-3bf718c83855.png?auto=compress,format&format=webp align="left")

```css
.container {
  display : grid;
  grid-template-rows : 100px 100px 100px ;
```

> ![ ](https://cdn.hashnode.com/res/hashnode/image/upload/v1675453341778/9383a18e-db47-40d2-bf9f-4c3444ba404d.png?auto=compress,format&format=webp align="left")

1. ### grid-template-areas
    

The `grid-template-areas` property specifies areas within the grid layout.

You can name grid items by using the [grid-area](https://www.w3schools.com/cssref/pr_grid-area.php) property and then reference to the name in the `grid-template-areas` property.

```css
.container{
display: grid;
justify-content:center;
grid-template-columns:100px 100px;
grid-template-rows:100px 100px;
grid-template-areas: 
    ".left .right"
    ".center .center";
}
.left{
grid-area :left;
}
.right{
grid-area :right;
}
.center{
grid-area :center;
}
```

> ![html - Flexbox responsive row column layout - Stack Overflow](https://i.stack.imgur.com/ALvx3.png align="left")

1. ### gap-properties:
    
    ##### The `gap` property defines the size of the gap between the rows and between the columns in a flexbox, grid or multi-column layout. It is a shorthand for the following properties:
    
    * row-gap: Sets the size of the gap between the rows in a grid or flexbox layout.
        
    * column-gap: Sets the size of the gap between the columns in a grid or flexbox layout.
        
    
    ```css
    .container{
    display:grid;
    gap:10px 50px;
    }
    ```
    

> ![Grid Gap CSS](https://linuxhint.com/wp-content/uploads/2022/07/Grid-Gap-CSS-6.png align="left")

1. ### **justify-content(x-axis) and align-content(y-axis):**
    
    * ##### *justify-content* is used to align the grids in a horizontal direction based on the property values. grids will be arranged in the horizont
        
    * align-content is used to align the grids in a vertical direction based on the property values. grids will be arranged in the vertical direction.
        
    

```css
 .container{
display:grid;
justify-content:flex-start;
align-content:flex-start;
}
```

> ![CSS Grid Tutorial – Vegibit](https://vegibit.com/wp-content/uploads/2018/08/align-grid-tracks-justify-content-start.png align="left")

1. ### justify-items(x-axis) and align-items(y-axis):
    

* justify-items: It is used to align the content inside the grid in the horizontal direction.
    
* align-items: It is used to align the content inside the grid in the vertical direction.
    

```css
.container{
display: grid;
justify-items: flex-start;
align-items: flex-start;
}
```

> ![CSS Grid Tutorial – Vegibit](https://vegibit.com/wp-content/uploads/2018/08/align-items-start.png align="left")

## **Properties for the Children Elements**

1. ### grid-column-start and grid-column-end:
    
    * grid-column-start: It is to specify the start index or column number of the grid from where the grid area distribution should start.
        
    * grid-column-end: It is to specify the end index or column number of the grid to where the grid area distribution should end.
        
    
2. ### grid-row-start and grid-row-end:
    
    * grid-row-start: It is to specify the start index or row number of the grid from where the grid area distribution should start.
        
    * grid-row-end: It is to specify the end index or row number of the grid to where the grid area distribution should end.
        
    
3. ### grid-area:
    
    The `grid-area` property specifies a grid item's size and location in a grid layout. This property can also be used to assign a name to a grid item.
    
4. ### justify-self and align-self:
    
    * justify-self: It is used to align the selected item in the horizontal direction in the grid.
        
    
    > ```css
    > .item1{
    >     justify-self: center;
    >     justify-self: stretch;
    >     justify-self: end;
    >     justify-self: start;
    > }
    > ```
    
    * align-self: It is used to align the selected item in the vertical direction in the grid.
        
    
    > ```css
    > .item2{
    >     align-self: flex-end;
    >     align-self: flex-start;
    >     align-self: center;
    >     align-self: stretch;
    > }
    > ```
    
    Hope you liked this article!!
    
    Thank you for reading!!
    
    Happy Learning!!
    

Resources:

* w3schools
    
* FreeCodeCamp