contents

These are some notes taken from watching this youtube video – 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.

Most things are to do with grid or flexbox layout.

display: grid;
display: flex;

Useful to know

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:

<div class="parent">
<div class="child">
content
</div>
</div>

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

<div class="parent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>

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:

.parent {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;

The 1fr means take up all the remaining space.

Pancake Stack

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

.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

.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)

.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

/* 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

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

Respect for Aspect

.parent {
  display: grid;
  place-items: center;
}
.visual {
  aspect-ratio: 16 / 9; /* constrain aspect ratio */
}