### Responsive Web Design Principles

The `max-width` property of `100%` scales the image to fit the width of its container, but the image won't stretch wider than its original width.

The height property of auto keeps the original aspect ratio of the image.

### Grid
#### Container properties

__grid-template-columns__

```css
grid-template-columns: auto 50px 10% 2fr 1fr;
```

This snippet creates 5 columns. 

The 1 column is as wide as its content, the 2 column is 50px, the 3 column is 10% of its container, and for the last 2 columns; 

3fr - The remaining space is divided into three sections, two are allocated for the fourth column, and one for the fifth

__grid-column-gap__

__grid-row-gap__

```css
grid-column-gap: 20px;
grid-row-gap: 5px;
```

__grid-gap__ 

Grid-gap is a shorthand property for `grid-row-gap` and `grid-column-gap` from the previous two challenges that's more convenient to use. 

If grid-gap has one value, it will create a gap between all rows and columns. 

However, if there are two values, it will use the first one to set the gap between the rows and the second value for the columns.

__justify-items__

__align-items__

Align items horizontally and vertically respectively;
```css
justify-items: stretch; // (start, center, end)
align-items: stretch; // (start, center, end)
```

__grid-template-areas__

You can group cells of your grid together into an area and give the area a custom name. Do this by using grid-template-areas on the container like this:

```css
grid-template-areas:
  "header header header"
  "advert content content"
  "footer footer footer";
```

#### Items properties

__grid-column__

__grid-row__

```css
grid-column: 1/3;
```
This will make the item start at the first vertical line of the grid on the left and span to the 3rd line of the grid, consuming two columns.

```css
grid-row: 2/4;
```

You define the horizontal lines you want an item to start and stop at using the grid-row property on a grid item.

__justify-self__

__align-self__

In CSS Grid, the content of each item is located in a box which is referred to as a cell. You can align the content's position within its cell horizontally using the `justify-self` property on a grid item. By default, this property has a value of *stretch*, which will make the content fill the whole width of the cell. This CSS Grid property as align-self accepts other values as well: start, center, end.

__grid-area__

```css
grid-area: header;
```

U can place the custom item in area by referencing it name (grid-template-areas). 

If your grid doesn't have an areas template to reference, you can create an area on the fly for an item to be placed like this

```css
.item1 { 
	grid-area: 1/1/2/4; 
}
```

> __Note:__ grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;

### Functions

__repeat__

```css
grid-template-rows: repeat(100, 50px); // create the 100 row grid, each row at 50px tall
grid-template-columns: repeat(2, 1fr 50px) 20px; // translate to -> grid-template-columns: 1fr 50px 1fr 50px 20px;
```

__minmax__


It's used to limit the size of items when the grid container changes size.

```css
grid-template-rows: repeat(3, minmax(90px, 1fr));
grid-template-columns: repeat(3, minmax(90px, 1fr));
```

### Other

__auto-fill__

This allows you to automatically insert as many rows or columns of your desired size as possible depending on the size of the container.

```css
grid-template-columns:  repeat(auto-fill, minmax(60px, 1fr));
```

__auto-fit__

```css
grid-template-columns:  repeat(auto-fit, minmax(60px, 1fr));
```


> __Note:__ Difference between _auto-fill_ and _auto-fit_
auto-fit works almost identically to auto-fill. The only difference is that when the container's size exceeds the size of all the items combined, auto-fill keeps inserting empty rows or columns and pushes your items to the side, while auto-fit collapses those empty rows or columns and stretches your items to fit the size of the container.