CSS grid + writing-mode = 🎉

By Chen Hui Jing / @hj_chen

What is CSS grid?

Grid Layout is a new layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents.

Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts.

Source: CSS Grid Layout Module Level 1

When is CSS grid supported?

Gecko: intent to ship in Firefox 52 (7 March, 2017)

Blink: intent to ship in Chrome 57 (14 March, 2017)

Webkit: ships in Safari 10.1 (release date March/April-ish)

Edge: on the backlog with High priority 🤷

Enable CSS Grid Layout

Source: Igalia

So I built something the other day...

Screenshot of penang-hokkien@gitlab.io

What is CSS writing-mode?

Magic by Shia Labeouf

CSS Writing Modes Level 3 defines CSS features to support for various international writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and vertical (e.g. Asian scripts).

You can make your browser literally turn on its side from left-to-right.

🙃

Or make it read from right-to-left.

🙂

Vertical text is fun!

Different but same

Centring things is no fun

See the Pen Vertical layout behaviour by Chen Hui Jing (@huijing) on CodePen.

Today we learnt

  • Centre along vertical axis using:
    margin-top: auto;
    margin-bottom: auto;
  • Sideways equivalent of vertical centring is 💩
  • Flexbox no like writing-mode on Firefox (for now)
  • Browsers are very inconsistent at the moment 😫

Can I Use? Can.

Browser support: CSS Writing Mode

Can I Use css-writing-mode? Data on support for the css-writing-mode feature across the major browsers from caniuse.com.

CSS Logical Properties Level 1

Introduces logical properties and values that provide the author with the ability to control layout through logical, rather than physical, direction and dimension mappings.

Source: CSSWG

start and end vs. left and right

Can I Use? Cannot.

Browser support: CSS Logical Properties

Can I Use css-logical-props? Data on support for the css-logical-props feature across the major browsers from caniuse.com.

Disclaimer: If you're reading this from the future, maybe can.

But, we have CSS Grid

Disclaimer: you cannot learn CSS grid overnight.

不是一番寒彻骨 bù shì yī fān hán chè gǔ 怎得梅花扑鼻香 zěn de méi huā pū bí xiāng

It'd be nice if you read the specification 🤓

Grid container Grid item
  • display: grid;
  • grid-template-columns
  • grid-template-rows
  • grid-column-gap
  • grid-row-gap
  • grid-row
  • grid-column
  • align-self
  • justify-self

Switching to Grid

PGHK homepage grid

Simple grid

Intro section of PGHK
.container {
  display: grid;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
}

.top-left {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  align-self: center;
  justify-self: end;
}

.top-right {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  align-self: center;
  justify-self: start;
}

.bottom {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  justify-self: center;
}

Another simple grid

fr → represents a fraction of the free space in the grid container.

Stories section of PGHK
.container {
  display: grid;
  grid-template-columns: 3.6em 1fr;
  grid-column-gap: 0.5em;
  grid-row-gap: 1em;
}

.left {
  grid-row: 1 / 2;
  align-self: center;
}

.top-right {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  align-self: center;
  justify-self: start;
}

.bottom {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  justify-self: center;
}

Moderate grid

repeat() → represents a repeated fragment of the track list

Resources section of PGHK
.outer-container {
  display: grid;
  grid-template-columns: 1fr 2em;
}

.inner-container {
  grid-column: 1 / 2;
  grid-row: 1 / 2;

  display: grid;
  grid-column-gap: 0.5em;
  grid-row-gap: 1em;

  @media all and (max-width: 719px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media all and (min-width: 720px) and (max-width: 1279px) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media all and (min-width: 1280px) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.right {
  align-self: center;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

Further reading

THE END

Websitehttp://www.chenhuijing.com

Twitter@hj_chen

Medium@hj_chen

Codepen@huijing