---
18:09:18 UTC

# Images and Fonts that are supplied as defaults are common causes of core layout shifts


---


---
22:34:37 UTC

# NextJS 
<Link> allows for client-side navigation with JS
App Router uses a hybrid approach to routing and nav 
coe-splitting happens automatically 
Next.js prefetches and catches route segments
Browser doesn't reload the entire page. 
Server components allow code to be automatically code-split
in-memory client-side cache called Router Cache. 
This means Routes are prefetched as much as possible. 
---

### CSS Grid 
[An interactive guide to CSS Grid](https://www.joshwcomeau.com/css/interactive-guide-to-grid/)

CSS grid is layout algorithm that takes a single DOM node and provides a layout of columns and rows in pure CSS. 

**grid template-columns** specifies the width of each column and is the default mode of grid.  

**fractional units** are relative to the width of the container and distribute extra space evenly 

```css


.child {
  grid-row: 1 / 5;
  grid-column: 2;
}
```
**grid-row-start** and **grid-column-start** are used to specify the starting point of the grid and are based on the number of lines. 



```css
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem;
}

```

```js
          <div className="grid h-screen grid-rows-[auto,1fr] ">
```