Picture from egghead

1. CSS grid gives us a more natural coding experience than using float or flex for complex layout.
2. Grid-based web design can be translated to web layout seamlessly as well as pixel-perfect.
3. For the first time, coding for layout is not a brain killer, but more like playing game.
4. More possibilities for responsive design: the new properties in grid like grid-auto-flow, auto-fill, auto-fit, minmax give web responsive design more possibilities than before.

Set Grid Frame

To create a grid frame, two basic things need to be considered:

1. How many rows and columns does the grid frame have?
2. How tall and wide are the rows and columns?

These two basic properties can be defined with two CSS grid property: grid-template-rows and grid-template-columns. Here is an example:

See the Pen Set CSS Grid Frame by wanghongyang (@wanghongyang) on CodePen.

In this example, a grid frame containing 16 grid items has been build by adding these codes to .container:

.container {
  display: grid;
  height: 100vh;
  grid-gap: 5px;
  grid-template-columns:  1fr 2fr 1fr 2fr;
  grid-template-rows: 1fr 2fr 2fr 1fr;
  /*   grid-template-columns: repeat(2, 1fr 2fr); */
  /*   grid-template-columns: 100px 200px 100px auto; */
  /*   grid-template-columns: repeat(auto-fill, 200px); */
  /*   grid-template-columns: repeat(auto-fill, minmax(200px, auto)); */
}

• grid-template-columns is set to define columns number and width;
• grid-template-rows is set to define rows number and height;

CSS grid provides us with several ways to define grid columns and rows:

• grid-template-columns: 1fr 2fr 1fr 2fr; equals to 4 columns, and the proportion of fractions (fr is a new unit means fraction) is 1:2:1:2. All grids will resize with the window size, but always keep the proportion.
• grid-template-columns: repeat(2, 1fr 2fr); There are only 4 columns in this example, what if we need 1000 columns? To simplify codes, repeat notation can be utilized. repeat(2, 1fr 2fr) means repeat 1fr 2fr proportion twice, which is the same results with 1fr 2fr 1fr 2fr.
• grid-template-columns: 100px 200px 100px auto; Apart from fr unit, pixel px unit can also be used. In addition, auto notation can be used to auto-fill the remaining space, so the frist three columns in this case occupy 100px, 200px, 100px respectively and the last column auto-fills the remaining space.
• grid-template-columns: repeat(auto-fill, 200px); When the first argument is auto-fill instead of specific number in repeat notation, the browser will take the second argument as the break point of reflowing layout. In this case, the first grid item of the second row will auto-fill the white space in the first row once it's wider than 200px.
• grid-template-columns: repeat(auto-fill, minmax(200px, auto)); In the prior case, when the view width is not an integer multiple of 200px, there will be white spaces in the first row. So how to auto-fill the white space while keeping the break point? Notation minmax can be used to define a range. minmax(200px, 400px) means the length of item can range from 200~400px. When the second argument is set to auto, space less than 200px will be auto-filled.

Open Codepen above and comment/uncomment to see effects.

Put Grid Items into Grid Frame

There are two ways to put items into grid.

Method One

The first way is straight forward: Assign name for each grid item by grid-area and assign each grid mesh with grid item name by grid-template-areas.

See the Pen Put items into grid 2 by wanghongyang (@wanghongyang) on CodePen.

In this example, mainly two sections of codes are needed: grid-template-areas in .container and grid-area in .grid-item:

.container {
  display: grid;
  grid-gap: 5px;
  height: 100vh;
  grid-template-columns: 1fr 2fr 1.5fr 1fr;
  grid-template-areas: 
    "sec1 sec2 sec3 sec4"
    "sec5 sec2 sec6 sec6";
}
.grid-item:nth-of-type(1) {
  grid-area: sec1;
}
.grid-item:nth-of-type(2) {
  grid-area: sec2;
}
...

The grid-area property is for the children (grid items) to assign names. Once the names are assigned, grid-template-areas property can be used for parent (grid container) to fill each grid mesh with one name.

Method Two

The second way of putting items into grid is to define grid lines and assign start and end (or span) for grid items.

See the Pen Put items into grid 2 by wanghongyang (@wanghongyang) on CodePen.

In this example, mainly two sections of codes are needed: define grid lines when setting grid-template-columns (or rows) in .container and grid-column-start and grid-column-end (or rows) in .grid-item:

.container {
  display: grid;
  grid-gap: 5px;
  height: 100vh;
  grid-template-columns: 
    [first-column-start] 1fr 
    [first-column-end second-column-start] 2fr 
    [second-column-end third-column-start] 1.5fr 
    [fourth-column-start] 1fr [fourth-column-end];
}

.grid-item:nth-of-type(2) {
  grid-row-end: span 2;
}

.grid-item:nth-of-type(6) {
  grid-column-start: third-column-start; 
/*   grid-column-start: second-column-end; */
/*   grid-column-start: 3; */
  grid-column-end: fourth-column-end;
/*   grid-colum-end: 5; */
  
  /* or simply use shorthand: */
  /*   grid-column: 3 / span 2; */
}

Grid lines are lines between every two grid items, and they can be defined by adding name in []. Then the defined names can be used in children (grid items) grid-column-start and grid-column-end property to specify the start and end of grid items.

• grid-column-start: third-column-start; and grid-column-start: fourth-column-end; are set for the sixth item to start with the third grid line and end with the fifth grid line, which spans two columns.
• grid-column-start: 3; and grid-column-end: 5; are the same with the prior one. You can either specify grid-column with grid line name, which is defined by you, or the default value indicating the No. of grid lines.
• grid-column: 3 / span 2; Short-hand grid-column is more convenient to write. The value before / is the start value and the format after / should be span x to specify how many columns current grid item occupies.
• grid-column: third-column-start / span 2; It is the same with the prior one.

By harnessing these two methods, you can put certain grid item into any grid mesh of the grid. You can specify the flow direction by adding grid-auto-flow: column; property to grid container and specify the order property for any grid item. Note that no matter where the grid items are, the order of grid items in HTML remain unchanged.

Properties Sheet

Study Resources

[1] Egghead, Rory Smith, video, Build Complex Layouts with CSS Grid Layout

[2] Grid examples, Rachel Andrew, Grid by Example

[3] CSS Tricks, Chris House, A Complete Guide to Grid

[4] Codepen, Anthony Dugois, CSS Grid Template Builder

[5] Personal Blog, Una, 3 CSS Grid Features That Make My Heart Flutter

[6] Cloudfour, Tyler Sticka, Case Study: My First Practical CSS Grid Layout

[7] Mozilla Hacks, Ali Spivak, A new CSS Grid demo on mozilla.org

[8] Mozilla Developer Network (MDN), Examine grid layouts with the CSS Grid Inspector

[9] CSS Tricks, Chris Coyier, Container Query Discussion

[10] Thomas Park, Game for learning CSS Grid, CSS Grid Garden