CSS Grid

Hello world!

div

.content {
  display: grid;
  grid-template-columns: 120px auto 120px;
}

It can work kinda like flex...

div

.long

div

.content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.long {
  grid-column: span 2;
}

But we can go vertical as well!

div

.tall

div

.content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.tall {
  grid-row: span 2;
}

Grid lines

.wide

.not-as-wide

.content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.wide {
  grid-column-start: 1;
  grid-column-end: -1;
}

.not-as-wide {
  grid-column: 1 / 4;
}

Firefox grid inspector

Named lines

.use-name

.content {
  display: grid;
  grid-template-columns: 80px [st] 1fr 1fr [en] 80px;
}

.use-name {
  grid-column: st / en;
}

Use it with flexbox for best effect

Here is some text lined up

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper nunc vel libero consequat, eget porta dolor porta. Sed convallis metus eu tellus elementum vestibulum. Phasellus finibus mollis nibh, eget iaculis nulla laoreet id. Nulla vitae nibh arcu.

.content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 30px;
}

.both {
  grid-column: span 2;
  display: flex;
  align-items: center;
  justify-content: left;
}

Auto layout

div

.content {
  grid-template-rows: 30px;
  grid-auto-rows: 60px;
}

Named grid areas

.nav

.body

.content {
  grid-template-rows: 30px auto 30px;
  grid-template-columns: 1fr 4fr;

  grid-template-areas:
    "header header"
    "nav    body"
    "footer footer";
}

.header {
  grid-area: header;
}

github.com/ehrenmurdick/css-grid-slides

ehren.io/css-grid-slides