#contents

These are some notes taken from watching [this youtube video](https://www.youtube.com/watch?v=qm0IfG1GyZU) -- *all originality is hers, not mine*. The purpose here is to simply stick the notes somewhere I can easily find it. See also [1 line layouts](https://1linelayouts.glitch.me/).

Most things are to do with grid or flexbox layout.
```css
display: grid;
display: flex;
```

Useful to know
```css
fr -- fractional units of space
auto -- auto spacing
minmax() -- minimum and maximum size
min(), max(), clamp()
auto-fit, auto-fill -- placing childs in a parent
```

## Super Centred
Html:
```css
<div class="parent">
<div class="child">
content
</div>
</div>
```
Css:
```css
.ex1 .parent {
  display: grid;
  place-items: center;
}
```
The child can even be `contenteditable` and will auto resize and centre as the content is changed.

## The Deconstructed Pancake
Html
```css
<div class="parent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
```
Css:
```css
.ex2 .parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.ex2 .box {
  /* flex: grow shrink baseWidth */
  /* flex: 0 1 <baseWidth> */
  flex: 1 1 150px; /* stretching */
  /* flex: 1 1 <baseWidth> */
  flex: 0 1 150px; /* no stretching */
  margin: 5px;
}
```

## Sidebar Says
Css:
```css
.parent {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
```
The `1fr` means take up all the remaining space.

## Pancake Stack
Css:
```css
.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
```
The `auto` means fitting to content, the `1fr` means take up as much space as possible.

## Classic Holy Grail Layout
```css
.ex5 .parent {
  display: grid;
  /* rows / columns */
  grid-template: auto 1fr auto / auto 1fr auto;
}
/* three by three boxes means 4 x 4 gridlines */
.ex5 header {
  padding: 2rem;
  grid-column: 1 / 4; /* 1st gridline to 4th gridline (entire width) */
}
.ex5 .left-side {
  grid-column: 1 / 2; /* 1st gridline to 2nd gridline (left side) */
}
.ex4 main {
  grid-column: 2 / 3; /* 2nd gridline to 3rd gridline (middle) */
}
.ex5 .right-side {
  grid-column: 3 / 4; /* etc. */
}
.ex5 .footer {
  grid-column: 1 / 4;
}
```

## 12-Span Grid
```css
.ex6 .parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.ex6 .span-12 {
  grid-column: 1 / 13;
}
.ex6 .span-6 {
  grid-column: 1 / 7;
}
/* Be careful of off-by-one issues when giving gridlines */
.ex6 .span-4 {
  grid-column: 3 / 7;
}
.ex6 .span-2 {
  grid-column: 2 / 4;
}
```

## R A M (Repeat, Auto, Minmax)
```css
.ex7 .parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
```

## Line Up
```css
/* justify-content: space-between; */
.parent {
  height: auto;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}
.visual {
  height: 100px;
  width: 100px;
}
.card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  justify-content: space-between;
}
h3 {
  margin: 0;
}
```

## Clamping Style
```css
.card {
  /* clamp(<min>, <actual>, <max>); */
  width: clamp(23ch, 50%, 46ch);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
```

## Respect for Aspect
```css
.parent {
  display: grid;
  place-items: center;
}
.visual {
  aspect-ratio: 16 / 9; /* constrain aspect ratio */
}
```