# CSS grid

### 1\. What is a CSS grid?

Grid is a two-dimensional layout system that completely changes the way we design user interfaces. we used many methods but they missed out on many functions like (vertical centering, for instance). flexbox is also a very great layout tool, but it's a one-directional flow.

Grid is the very first CSS module created specifically to solve layout problems.

## 2.Properties-

### (i)Display-

Display property will defines the element as a grid container and establishes a new grid formatting context for its contents.

**Syntax-**

```css
 .container{
            display: grid;
        }
```

### (ii)grid-template-columns/rows-

This property will define column and rows in the grid and If your definition contains repeating parts, you can use the repect().A fraction of the free space in the grid using the fr unit.

Syntax-

```css
.container{
            display: grid;
            grid-template-columns:repeat(3, 1fr);
          }
```

**example-**

<iframe height="300" style="width:100%" src="https://codepen.io/Sandeepvaishnav411/embed/WNKXrxQ?default-tab=html%2Cresult">
  See the Pen <a href="https://codepen.io/Sandeepvaishnav411/pen/WNKXrxQ">
  Untitled</a> by Sandeepvaishnav411 (<a href="https://codepen.io/Sandeepvaishnav411">@Sandeepvaishnav411</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### (iii)row-gap and column-gap-

This property will provides gap between grid row and grid column as input value.

**Syntax-**

```css
.container{
            display: grid;
            column-gap: 100px;
            row-gap: 65px;
        }
```

**example-**

<iframe height="300" style="width:100%" src="https://codepen.io/Sandeepvaishnav411/embed/YzjEwQB?default-tab=html%2Cresult">
  See the Pen <a href="https://codepen.io/Sandeepvaishnav411/pen/YzjEwQB">
  row and column gap</a> by Sandeepvaishnav411 (<a href="https://codepen.io/Sandeepvaishnav411">@Sandeepvaishnav411</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### (iv)grid-column-start/end-

This property is used for where to a column and row starts or from where a column and row end.

**syntax-**

```css
     #item1{
            grid-column-start: 1;
            grid-column-end: 3;
            }
```

**example-**

<iframe height="300" style="width:100%" src="https://codepen.io/Sandeepvaishnav411/embed/BaPmKYd?default-tab=html%2Cresult">
  See the Pen <a href="https://codepen.io/Sandeepvaishnav411/pen/BaPmKYd">
  grid-column/row-start/end</a> by Sandeepvaishnav411 (<a href="https://codepen.io/Sandeepvaishnav411">@Sandeepvaishnav411</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

###   

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674064863933/6ba11921-ea64-497e-8fec-94eda72cfec4.jpeg align="center")