CSS Grid: The ultimate layout tool
Tags: css, scrimba, beginners, webdev
Published: 2022-02-02 06:26:11

### Ultimate layout tool

- Grid enables us to created grids.
- We can work on 2-dimension, vertical & horizontal axis at the same time.
- Opens up new layout possibilities which we didn’t had.

---

### Setting up a grid

```css
display: grid;
```

- Margins no longer collapse

---

Template rows and columns

```css
grid-template-columns: 200px 200px 350px; // set the width
grid-template-rows: 50px 200px; // set the height

// shorthand
grid-template: 50px 200px / 200px 200px 350px;
```

---

### Placing items on the grid

```css
// Used on grid container
grid-template-columns: 200px 200px 350px; // set the width
grid-template-rows: 50px 200px; // set the height

// Used on grid item
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;

// shorthand
grid-row: 1 / 3;
grid-column: 2 / 3;

// end line is -1
grid-column: 1 / -1; // start to the end
```

- Overlaying items are easy.

---

### Spanning

```css
grid-column: span 2; // from line 1 to 3
grid-column: 2 / span 2; //from line 2 to 4
```

---

### Similarities to flexbox

1. auto
    
    When defining our rows, we mostly don’t want to set an exact height, we want it to match the content.
    
    ```css
    grid-template-row: 50px auto;
    ```
    
    Height is fixed to the largest item’s height. Every items are stetched as default.
    
    If we don’t declare `grid-template-row` , it becomes auto.
    
2. align-items & justify-items
    - justify-items: align each items horizontally
    - align-items: align items vertically
    
    ```css
    justify-items: end;
    align-items: start;
    ```
    
3. align-self & justify-self
    
    Similar to 2, but it applies to individual grid item.
    

---

### Making gap between columns & rows

For margin, we can make empty column & row. Also we can use  `gap` . 

- column-gap: Explicitly declare gap between columns
- row-gap: Explicitly declare gap between rows

```css
column-gap: 2em;
row-gap: 1em;

// shorthand
gap: 1em /2em;
```

- Gaps at the outer top, bottom, left, right is not added, so we have to use the empty column & row approach.
- Also used for flexbox.

---

## grid-areas

Give names to different parts of grid.

```css
.grid {
	grid-template-areas:
		"sidebar header header"
		"sidebar content content"
		"sidebar footer footer";
}

.header {
	grid-area: header;
}

.content {
	grid-area: content;
}
```

- blank grid
    
    ```css
    // for blank grid
    grid-template-areas: 
    	"header header header"
    	". content ."
    	". sidebar ."
    	"footer footer footer";
    ```
    
- grid-area + media query
    
    ```css
    .grid {
    	grid-template-columns: 5em auto 5em;
    	grid-template-areas: 
    	"header header header"
    	". content ."
    	". sidebar ."
    	"footer footer footer"; 
    }
    
    @media (min-width: 600px) {
    	.grid {
    		grid-template-columns: 1em auto 150px 1em;
    		grid-template-areas: 
    			". header header ."
    			". content sidebar ."
    			". footer footer ."
    	}
    }
    ```
    

---

### minmax()

Setting a min-width and max-width to our template columns and rows.

```css
grid-template-columns: 1em minmax(100px, 200px) auto 1em;
```

---

### fr unit

fr unit is used to distribute a fraction of available space. It makes the item behave like a flex item with `flex: 1 1 auto` .

Easiest way to create equal columns.

- We cannot use fr for minimum value
    
    Instead we can use `auto` or `0px` .
    
    ```css
    grid-template-columns: 1fr minmax(250px, 1fr) 1fr;
    
    grid-template-columns: 1fr 1fr minmax(auto, 500px);
    ```