# CSS Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

#### Grid Elements

A grid layout consists of a parent element, with one or more child elements.

```xml
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679842322410/c114c592-e3d3-4f3b-90a7-37f86b306b5a.png align="center")

#### Display Property

An HTML element becomes a grid container when its `display` property is set to `grid` or `inline-grid`.

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679842393183/22d0ad79-24b2-4b52-923f-1ec7b0647df3.png align="center")

#### Example

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679842473225/94017669-85fc-40e4-8415-30feb6b53e03.png align="center")

### Grid Gaps

The spaces between each column/row are called *gaps*.

![](https://www.w3schools.com/css/grid_gaps.png align="left")

You can adjust the gap size by using one of the following properties:

* `column-gap`
    
* `row-gap`
    
* `gap`
    

#### Example

The `column-gap` property sets the gap between the columns:

```css
.grid-container {
  display: grid;
  column-gap: 50px;
}
```

#### Example

The `row-gap` property sets the gap between the rows:

```css
.grid-container {
  display: grid;
  row-gap: 50px;
}
```

#### Example

The `gap` property is a shorthand property for the `row-gap` and the `column-gap` properties:

```css
.grid-container {
  display: grid;
  gap: 50px 100px;
}
```

#### Example

The `gap` property can also be used to set both the row gap and the column gap in one value:

```css
.grid-container {
  display: grid;
  gap: 50px;
}
```

### Grid Lines

The lines between columns are called *column lines*.

The lines between rows are called *row lines*.

![](https://www.w3schools.com/css/grid_lines.png align="left")

Refer to line numbers when placing a grid item in a grid container:

#### Example

Place a grid item at column line 1, and let it end on column line 3:

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

#### Example

Place a grid item at row line 1, and let it end on row line 3:

```css
.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}
```

> Thank you for giving valuable time. Happy Learning!!