# CSS Grid

This repo houses a number of tutorials for using CSS Grid.


## Using the grid


Size can be any valid CSS unit `px`, `vw`, `auto` that enables a column or row to stretch across available space

For example `grid-template-column: 10px auto` will create a 10px column followed by a second column that fills all available space

`fr` is a fractional unit that causes any remaining space to be distributed to columns or rows based on the ratios of these units
```
grid-template-rows: 1fr 2fr
```
creates two dynamic rows with the second twice the size of the first,
```
grid-template-columns: 1fr 1fr 1fr 1fr
```
Defines four equal-sized columns

The `repeat()`function can be used to make the above less verbose `repeat(4, 1fr)`


## More complex layouts

Grids with unequal sized cells can be created by combining the different units mentioned. We can also use the `minmax()` function to define a minimum and a maximum size for dynamic columns and rows.

```
grid-template-rows: 40px 2fr repeat(2, minmax(75px, 1fr))
```

Creates four rows with the first 40px tall, the other three stretch over remaining space in a 2:1:1 ratio. The last two having a minimum height of 75px which sets the minimum height of the second row at 150px.

## Layout

### Accessing the grid

*INSERT IMAGE OF GRID LINES*

We can consider this now to be a 2 x 2 array indexed at 1 and accessible with a negative index if necessary. For example a 4 x 4 Grid will have the first column accessible at either index 1 or -5. They can be used as the boundary lines for elements placed in them.

*NOTE* We can also assign a name to index by adding a string in square brackets in the property declarations

```
gird-template-rows: [first-row] 1fr [second-row] 1fr [last]
```

### Positioning elements inside the grid

*THIS IS GONNA HAVE TO BE REWRITTEN*

Similar to flexbox, the horizontal and vertical position of items placed in the grid can be controlled by setting `justify-items` and `align-items` respectively to `start`, `center`, or `stretch`.

The same control of grid column and row positions with in a larger container (grid inside a grid) can be applied used the `justify-content` and `align-content` properties and the `start`, `center`, or `stretch` values. The additional value `space-between` or `space-around` is used to divide extra space between columns/rows. `space-evenly` can used to divide extra space evenly between columns/rows with the same or half the amount of space on the ends.

We can also define `align-content` and `justify-content`(in that order) using `place-content`. Values of `align-items` and `justify-items` can be defined with `place-items` *WTF THIS GUY CAN'T WRITE*


### Positioning items in the Grid using line numbers

To place an item in the grid we can set it's `grid-column-start` and `grid-column-end` properties between which the item should be stretched. For rows the properties are `grid-row-start` and `grid-row-end`

```
#item1 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: -1;
}

#item2 {
  grid-column: 3;
  grid-row: 1;
}


```