css_grid_tutorial

lesson-01: Columns

• three decorations to generate columns：

grid-template-columns: 30% 20% 50%;
grid-template-columns: 1fr 2fr 1fr;
grid-template-columns: repeat(3, 1fr);

lesson-02: Rows

• fixed height:

grid-auto-rows: 200px;

• fixed + auto height:

grid-auto-rows: minmax(200px, auto);

• fixed multi rows height:

grid-template-rows: 200px 300px 400px 200px;

• using repeat function：

grid-template-rows: repeat(3, 200px);
grid-template-rows: repeat(3, minmax(200px, auto));

• gaps between rows and columns

grid-column-gap: 10px;
grid-row-gap: 10px;
grid-gap: 10px;

lesson-03: Grid Lines

• locate class into specific column and row numbers:

.three {
  grid-column: 1 / 4;
  grid-row: 2 / 4;
}

lesson-04: Nested Grid

• nested grid within content

.nested {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  /* grid-column: 1 / 4; */
  grid-column: span 3;
}

lesson-05: Aligning & Justifying Items

• apply all items

#content {
  /* align-items: stretch; */
  align-items: end;
  /* justify-items: start; */
  justify-items: end;
}

• specific item:

.one {
  align-self: end;
  justify-self: end;
}
.two {
  align-self: center;
  justify-self: center;
}
.three {
  align-self: start;
  justify-self: start;
}

lesson-06: Create a 12-Column Grid

• 12-column grid framework:

header {
  grid-column: 1 / 13;
}
main {
  grid-column: 4 / 13;
  grid-row: 2 / 4;
}
aside {
  grid-column: 1 / 4;
}
section {
  grid-column: 1 / 13;
  grid-row: 4 / 6;
}
nav {
  grid-column: 1 / 4;
}
footer {
  grid-column: 1 / 13;
}