两步构建 CSS Grid

3月7号，谷歌、火狐统一更新了浏览器，加入 CSS Grid 网格布局。为什么新的 CSS Grid 网格布局值得让前端工程师激动？我觉得有三个原因：

CSS Grid 比使用 float 或 flex 拿来做复杂的布局更简单。
基于网格的网页设计，使用 CSS Grid 可以无缝地、简单地转换为网页布局，并且像素精确。
给网页响应式布局带来更多的可能性：CSS Grid 中的新属性，比如 grid-auto-flow, auto-fill, auto-fit, minmax 能够很简单地设置响应点及自动填充，给 Web 响应设计带来更多的可能性，在设备尺寸注定会越来越多的将来，CSS Grid 提前一步给出了解决方案。

本文主要写了如何两步构建 CSS Grid:

设置 CSS Grid frame；
放置 Grid items 到 frame 中。

以下是全文。

Set Grid Frame

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

How many rows and columns does the grid frame have?
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:

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

Properties for the Grid Container	Properties for the Grid Items
display	grid-column-start
grid-template-columns	grid-column-end
grid-template-rows	grid-column
grid-template-areas	grid-row-start
grid-template	grid-row-end
grid-column-gap	grid-row
grid-row-gap	grid-area
grid-gap	justify-self
justify-items	align-self
align-items	order
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid

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