Not in Kansas anymore: a new frontier for web design

“Grid works from the container in,
other layout methods start with the item”
—Rachel Andrew

Layout technique: `inline-block`

Item A

Item B

Item C

Item D

Item E

Item F

One approach for creating such a layout is the inline-block technique. For a three column grid, we set the display of the items to inline-block and give them all a width of a third of the container.

Layout technique: `float`

Item A

Item B

Item C

Item D

Item E

Item F

It's almost the same if you use float, because you also need to set a width on each item.

Layout technique: `flex`

Item A

Item B

Item C

Item D

Item E

Item F

Established relationship between rows and columns

Diagram inspired by Brenda Storer's Using CSS in the real world talk.

Using `grid-column` and `grid-row`

⚽️

🏀

🏈

⚾️

🎾

🏐

Page 126 of Malerei, Fotografie, Film by Moholy-Nagy

Recreation of page 126 of Malerei, Fotografie, Film with grid and flexbox

Original image from Moholy-Nagy, Malerei, Fotografie, Film

Bauhaus in the browser

Featuring...

Grid
Flexbox
Writing mode
Transforms
Box alignment

https://codepen.io/huijing/pen/PpqomV | Full page demo

.grid {
    display: grid;
    grid-template-columns: 30% 9% 9% 9% 9% 9%;
    justify-content: center;
  }

  .grid__item:nth-child(1) {
    grid-column: span 3;
    justify-self: end;
    border-right: 1em solid;
    padding: 1em;
    text-align: justify;
    text-align-last: justify;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    .content {
      max-width: 12em;
      letter-spacing: 1px;
    }
    
    p:last-of-type {
      margin-bottom: 1em;
    }
  }

  .grid__item:nth-child(2) {
    grid-column: 4 / span 3;
    align-self: end;
    font-size: 200%;
    padding: 0.25em;
  }

  .grid__item:nth-child(3) {
    grid-column: 1 / span 3;
    border-top: 1em solid;
    border-bottom: 1em solid;
    padding: 1em 2em;
    letter-spacing: 1px;
    text-align: justify;

    p:first-child {
      margin-bottom: 1em;
    }
  }

  .grid__item:nth-child(4) {
    grid-column: 4 / span 3;
    border-top: 1em solid;
    border-bottom: 1em solid;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .grid__item:nth-child(5) {
    grid-row: 3 / 5;
    border-right: 1em solid;
    padding: 1em;

    display: flex;
    align-items: flex-start;
    justify-content: flex-end;

    img {
      width: 100%;
      max-width: 20em;
    }
  }

  .grid__item:nth-child(6) {
    writing-mode: vertical-rl;
    border-right: 1em solid;

    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .grid__item:nth-child(7) {
    padding: 0.5em 0.25em;
    font-size: 85%;
    border-right: 1em solid;
  }

  .grid__item:nth-child(8) {
    border-left: 0.5em solid;

    display: flex;
    justify-content: center;
    align-items: center;
  }

  .grid__item:nth-child(9) {
    letter-spacing: 1px;
    padding: 0.5em 0.25em;
    border-right: 1em solid;
  }

  .grid__item:nth-child(10) {
    grid-row: 3 / 5;
    grid-column: 6;
    justify-self: center;
    align-self: center;
  }

  .grid__item:nth-child(11) {
    grid-column: 2 / 4;
    letter-spacing: 1px;
    padding: 0.5em;
    border-top: 1em solid;
    border-right: 1em solid;
  }

  .grid__item:nth-child(12) {
    border-top: 1em solid;
    border-right: 1em solid;
  }

  .grid__item:nth-child(13) {
    border-top: 1em solid;
    border-right: 1em solid;
  }

Self-alignment properties — These are not the borders you are looking for

Display flex on grid items — That's more like it

Original colour diagrams by Charles Hayter, 1826

Colour diagrams recreated with CSS grid and blend-modes

Original image by Charles Hayter

Colour theory with blend-modes

Featuring...

Grid
Box alignment
Blend modes
Box shadow

https://codepen.io/huijing/pen/gmOERN | Full page demo

.grid1 {
    display: grid;
    grid-template-columns: repeat(3, 2vw 5vw 5vw 5vw 5vw 5vw 2vw);
    grid-auto-rows: 15vw;
    grid-gap: 0.1vw;
    justify-content: center;

    margin-bottom: 1em;
  }

  .grid__item {
    border-radius: 50%;
    border: 0.1vw solid;
    box-shadow: 0px 0px 0px 0.4vw white, 0px 0px 0px 0.5vw black;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .yel1 {
    grid-row: 1;
    grid-column: 3 / span 3;
    background-color: $yellow;
  }

  .yel2 {
    grid-row: 2;
    grid-column: 2 / span 3;
    background-color: $yellow;
    mix-blend-mode: soft-light;
  }

  .red1 {
    grid-row: 2;
    grid-column: 4 / span 3;
    background-color: $red;
  }

  .org1 {
    grid-row: 3;
    grid-column: 3 / span 3;
    background-color: $orange;
  }

  .org2 {
    grid-row: 4;
    grid-column: 2 / span 3;
    background-color: $orange;
    mix-blend-mode: soft-light;
  }

  .grn1 {
    grid-row: 4;
    grid-column: 4 / span 3;
    background-color: $green;
  }

  .olv1 {
    grid-row: 5;
    grid-column: 3 / span 3;
    background-color: $olive;
  }

  .red2 {
    grid-row: 1;
    grid-column: 10 / span 3;
    background-color: $red;
  }

  .yel3 {
    grid-row: 2;
    grid-column: 9 / span 3;
    background-color: $yellow;
    mix-blend-mode: soft-light;
  }

  .blu1 {
    grid-row: 2;
    grid-column: 11 / span 3;
    background-color: $blue;
  }

  .grn2 {
    grid-row: 3;
    grid-column: 10 / span 3;
    background-color: $green;
  }

  .org3 {
    grid-row: 4;
    grid-column: 9 / span 3;
    background-color: $orange;
    mix-blend-mode: soft-light;
  }

  .prp1 {
    grid-row: 4;
    grid-column: 11 / span 3;
    background-color: $purple;
  }

  .brn1 {
    grid-row: 5;
    grid-column: 10 / span 3;
    background-color: $brown;
  }

  .blu2 {
    grid-row: 1;
    grid-column: 17 / span 3;
    background-color: $blue;
  }

  .red3 {
    grid-row: 2;
    grid-column: 16 / span 3;
    background-color: $red;
    mix-blend-mode: soft-light;
  }

  .blu3 {
    grid-row: 2;
    grid-column: 18 / span 3;
    background-color: $blue;
  }

  .prp2 {
    grid-row: 3;
    grid-column: 17 / span 3;
    background-color: $purple;
  }

  .grn3 {
    grid-row: 4;
    grid-column: 16 / span 3;
    background-color: $green;
    mix-blend-mode: soft-light;
  }

  .prp3 {
    grid-row: 4;
    grid-column: 18 / span 3;
    background-color: $purple;
  }

  .slt1 {
    grid-row: 5;
    grid-column: 17 / span 3;
    background-color: $slate;
  }
  
  .grid2 {
    display: grid;
    grid-template-columns: repeat(3, 0.5vw 6vw 6vw 6vw 6vw 6vw 0.5vw);
    grid-auto-rows: 9vw;
    grid-gap: 0.1vw;
    justify-content: center;
  }

  .yel4 {
    grid-row: 1 / span 2;
    grid-column: 2 / span 3;
    background-color: $yellow;
    mix-blend-mode: soft-light;
  }

  .red4 {
    grid-row: 1 / span 2;
    grid-column: 4 / span 3;
    background-color: $red;
    mix-blend-mode: soft-light;
  }

  .blu4 {
    grid-row: 2 / span 2;
    grid-column: 3 / span 3;
    background-color: $blue;
  }

  .org4 {
    grid-row: 1 / span 2;
    grid-column: 10 / span 3;
    background-color: $orange;
    mix-blend-mode: soft-light;
  }

  .grn4 {
    grid-row: 2 / span 2;
    grid-column: 9 / span 3;
    background-color: $green;
  }

  .prp4 {
    grid-row: 2 / span 2;
    grid-column: 11 / span 3;
    background-color: $purple;
    mix-blend-mode: soft-light;
  }

  .olv2 {
    grid-row: 1 / span 2;
    grid-column: 16 / span 3;
    background-color: $olive;
    mix-blend-mode: soft-light;
  }

  .brn2 {
    grid-row: 1 / span 2;
    grid-column: 18 / span 3;
    background-color: $brown;
    mix-blend-mode: soft-light;
  }

  .slt2 {
    grid-row: 2 / span 2;
    grid-column: 17 / span 3;
    background-color: $slate;
  }
}

This demo was also an excuse to play with blend-modes. CSS blend-modes work the same way as in Photoshop. Una Kravets has written and spoken extensively about CSS blend modes. She even created CSSgram, a library for creating Instagram filters with CSS filters and blend modes.

Say yes to dynamic layouts

Original image by Wolfgang Schmittel

https://codepen.io/huijing/pen/xPEjWb
Full page demo

main {
  display: grid;
  grid-gap: 0.5em;
  grid-template-columns: calc((100vw - 3em) / 3) calc((100vw - 3em) / 3) calc((100vw - 3em) / 3);
  grid-template-areas: "title title title"
                       "text text text"
                       "key key key"
                       "detail1 detail2 detail3"
}

@media screen and (min-aspect-ratio: 1/1) and (min-height: 35em) {
  main {
    grid-template-columns: 18.75em 1fr 1fr 1fr;
    grid-template-rows: calc((100vh - 3em) / 3) calc((100vh - 3em) / 3) calc((100vh - 3em) / 3);
    height: calc(100vh - 2em);
    grid-template-areas: "title key key key"
                         "text key key key"
                         "text detail1 detail2 detail3";
  }
  
  h1 span {
    display: block;
  }
  
  img:first-of-type {
    height: calc(((100vh - 2em) / 3) * 2);
    object-fit: cover;
  }
  
  img:nth-of-type(2),
  img:nth-of-type(3),
  img:nth-of-type(4) {
    height: calc((100vh - 3em) / 3);
    object-fit: cover;
  }
  
  svg {
    grid-area: text;
    align-self: end;
  }
}

@media screen and (min-aspect-ratio: 8/5) and (min-height: 35em) {
  main {
    grid-template-columns: 18.75em 4fr 1fr 1fr;
    grid-template-rows: calc((100vh - 3em) / 3) calc((100vh - 3em) / 3) calc((100vh - 3em) / 3);
    height: calc(100vh - 2em);
    grid-template-areas: "title key . ."
                         "text key detail1 detail2"
                         "text . detail3 ."
  }
  
  div {
    margin-top: -2em;
  }
}

h1 {
  grid-area: title;
}

div {
  grid-area: text;
}

img:first-of-type {
  grid-area: key;
}

img:nth-of-type(2) {
  grid-area: detail1;
}

img:nth-of-type(3) {
  grid-area: detail2;
}

img:nth-of-type(4) {
  grid-area: detail3;
}

horizontal-tb	从1987到现在
vertical-rl	从1987到现在
vertical-lr	从1987到现在
sideways-rl*	从1987到现在
sideways-lr*	从1987到现在

Not in Kansas anymore

A new frontier for web design

Local content

Internationalisation (i18n)

The web is a unique medium of its own

Intrinsic web design

Team layout

Creating CSS pencils

Mark-up (HTML)

Visual styles (CSS)

Layout styles (CSS)

What happens when you apply a transform?

CSS Writing Modes

`writing-mode` property

`text-orientation` property

`text-combine-upright` property

Layout styles (CSS)

Visual styles (CSS)

Moar pencils, please

Mixed writing-modes?

Single dimension daisy chains

Re-ordering flow

Layout technique: `inline-block`

Layout technique: `float`

Layout technique: `flex`

Established relationship between rows and columns

Using `grid-column` and `grid-row`

Bauhaus in the browser

Colour theory with blend-modes

Say yes to dynamic layouts

Art direction for the web

CSS Shapes browser support

CSS clip-path browser support

CSS Exclusions browser support

Anatomy of a feature query

Falling back with grace

Frequency of major browser releases

CSS Grid release dates

CSS Grid browser support

Thank you!