CSS Grid

[rogerxu]

CSS Grid 网格布局教程 - 阮一峰的网络日志 (ruanyifeng.com)

A Complete Guide to Grid | CSS-Tricks

Grids - Learn web development | MDN

[rogerxu]

Understanding CSS Grid Systems from the Ground Up

简明 CSS Grid 布局教程

[rogerxu]

CSS Grid

History

• Table-based layout
• Frames and layers
• Floats, clears, position
• Flexbox
• CSS Grid

Usage

The CSS Grid Layout module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a flexible or fixed predefined layout grid.

.grid {
  display: grid;
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 100px auto 50px;
}

Implicit lines

Move box 4 to the position of box 2.

.box-4 {
  grid-column: 2/3; // => grid-column-start: 2; grid-column-end: 3;
  grid-row: 1/2; // => grid-row-start: 1; grid-row-end: 2;
}

The Flexible Length Unit (fr)

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

.grid {
  display: grid;
  grid-template-columns: 25% 1fr 2fr 1fr;
}

Repeat Keyword

12-column layout with gutters (current workaround).

.grid {
  display: grid;
  grid-template-columns: 1fr repeat(11, 10px 1fr);
}

Gutters

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

Named Lines

grid-template-columns: [sidebar-start] 1fr [sidebar-end]; grid-column: sidebar-start/sidebar-end;

.grid {
  display: grid;
  grid-template-columns:
    [left-sidebar-start] 1fr 10px 1fr [left-sidebar-end]
    10px
    [main-area-start] 1fr repeat(7, [gutter] 10px [row] 1fr) [main-area-end]
    10px
    [right-sidebar-start] 1fr 10px 1fr [right-sidebar-end];
  grid-template-rows:
    [header-start] 1fr [header-end]
    10px
    [main-start] 1fr [main-end]
    10px
    [footer-start] 1fr [footer-end];
}

.header {
  grid-column: left-sidebar-start / right-sidebar-end;
  grid-row: header-start / header-end;
}

.left-sidebar {
  grid-column: left-sidebar-start / left-sidebar-end;
  grid-row: main-start / main-end;
}

.body-left {
  grid-column: main-area-start / gutter 4;
  grid-row: main-start / main-end;
}

.body-right {
  grid-column: row 4 / main-area-end;
  grid-row: main-start / main-end;
}

Grid Template Areas

Template Areas

.grid {
  display: grid;
  grid-template-columns: 1fr repeat(3, 10px 1fr);
  grid-template-rows: auto;
  grid-template-areas:
  "header header header header header header header"
  "sidebarleft . content content content . sidebarright"
  "footer footer footer footer footer footer footer";
}

Grid Areas

.header {
  grid-area: header;
}

.left-sidebar {
  grid-area: sidebarleft;
}

.content {
  grid-area: content;
}

[rogerxu]

Container

.grid-container {
  display: grid;
}

grid template

.grid-container {
  display: grid;
  grid-template-columns: ...;
  grid-template-rows: ...;
}

repeat()

auto-fill

fr

minmax()

auto()

grid gap

grid-gap

grid areas

grid-template-areas

grid-auto-flow