# Using The CSS Grid

Creating highly customizable page layouts.


## What Is The CSS Grid

It allows you to define a grid of rows and columns, and to specify which element should be positioned where.

The basic HTML setup we'll use throughout this module:

```html
<div class="container">
    <div class="el1">Element 1</div>
    <div class="el2">Element 2</div>
    <div class="el3">Element 3</div>
    <div class="el4">Element 4</div>
</div>
```


## Turning A Container Into A CSS Grid

We can turn a container element into a **grid** by setting `display: grid;`.


## Defining Columns And Rows

We can use the property `grid-template-columns` on the grid container to define the width of the columns (not the number of columns). e.g. `grid-template-columns: 200px 150px 20%;` would mean, first column is `200px` wide, second is `150px` wide, and the third is `20%` of the container's width.

Another unit we can use in the `grid-template-columns` is `fr` (fraction), it splits the remaining space between the columns using the fraction number. e.g. `grid-template-columns: 200px 2fr 20% 1fr;` would split the remaining space between second and fourth columns `2:1` repectively.

Likewise, we can use the `grid-template-rows` property to set the height or number of rows. e.g. `grid-template-rows: 5rem 2.5rem;` would set the number of rows to 2, and their height `5rem` and `2.5rem` respectively.

_Note: We can still add more rows to the grid but we explicitly defined sizes for first 2 rows only._


## Positioning Child Elements In A Grid

Using the `grid-column-start` and `grid-column-end` properties, we can span a single cell over multiple columns, or define the place inside the grid for this child element. e.g. `grid-column-start: 3; grid-column-end: 5;` make the child element to start at line 3, and span horizontally till line 5.

Likewise, we also have `grid-row-start` and `grid-row-end` properties for placement and spanning of a child element using rows. 

Keep in mind that the numeric value you use for these properties is the **line number**. e.g. the following table has 4 lines for columns, starting from 1 to 4, and 4 for rows.

| a | b | c |
| --- | --- | ---|
| d | e | f |
| g | h | i |


## Using `element-sizing`, `repeat` And `minmax`