CSS Grid layout

Grid Template

.grid {
  display: grid;
  border: 2px blue solid;
  width: 400px;
  height: 500px;
  /*
  grid-template-columns: 100px 50% 200px;
  grid-template-rows: 40% 50% 50px;
  */
  grid-template:  40% 50% 50px / 100px 50% 200px;
}

.box {
  background-color: beige;
  color: black;
  border-radius: 5px;
  border: 2px dodgerblue solid;
}

Fraction & Repeat

.grid {
  display: grid;
  border: 2px blue solid;
  width: 400px;
  height: 500px;
  grid-template: 1fr 1fr 1fr / 3fr 50% 1fr;
  /*
  1. each row will take up the exact same fraction of the available space.
  2. first column takes up three fourths of the remaining space and the last column takes up one fourth

    Repeat：
   grid-template: repeat(3,1fr) / 3fr 50% 1fr;
  */
}

.box {
  background-color: beige;
  color: black;
  border-radius: 5px;
  border: 2px dodgerblue solid;
}

minmax

.grid {
  display: grid;
  border: 2px blue solid;
  height: 500px;
  grid-template: repeat(3, 1fr) / 3fr minmax(50px,300px) 1fr;
  /*
  second column between 50 pixels and 300 pixels
  */
}

Grid Gap

.grid {
  display: grid;
  border: 2px blue solid;
  height: 500px;
  grid-template: repeat(3, 1fr) / 3fr minmax(50px, 300px) 1fr;
  /*
  row-gap: 20px;
  column-gap: 5px;
  */
  gap: 20px 5px;
}

Multiple Row Items

.a {
   grid-row-start:5;
   grid-row-end:7;
}

Grid Row

.a {
  /*
  grid-row-start: 5;
  grid-row-end: 7;
  */
  grid-row: 5 / 7;
}

Grid Column

以下输出结果一样，用span为了减少计算错误

.item {
  grid-column: 4 / span 2;
}

.item {
  grid-column: 4 / 6;
}

.item {
  grid-column-start: 4;
  grid-column-end: span 2;
}

.item {
  grid-column-start: span 2;
  grid-column-end: 6;
}

Grid Area

1. grid-row-start
2. grid-column-start
3. grid-row-end
4. grid-column-end

.item {
  grid-area: 2 / 3 / 4 / span 5;
}

.a {
  /*
  grid-row: 5 / 7;
  grid-column: 1 / span 2;
  */
  grid-area: 5 / 1 / span 2 / span 2;
}

.b {  
  /*
  grid-row: 2 / span 3;
  grid-column: 2 / span 6;
  */
  grid-area: 2 / 2 / span 3 / span 6;
}

.c {
  grid-area: 6 / 8 / span 3 / span 1;
}

Grid Review

• grid-template-columns defines the number and sizes of the columns of the grid
• grid-template-rows defines the number and sizes of the rows of the grid
• grid-template is a shorthand for defining both grid-template-columns and grid-template-rows in one line
• row-gap puts blank space between the rows of the grid
• column-gap puts blank space between the columns of the grid
• gap is a shorthand for defining both row-gap and column-gap in one line
• grid-row-start and grid-row-end makes elements span certain rows of the grid
• grid-column-start and grid-column-end makes elements span certain columns of the grid
• grid-area is a shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end, all in one line

.grid {
  border: 2px blue solid;
  height: 500px;
  width: 500px;
  display:grid;
  grid-template-columns: 25% 25% 2fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 10px 15px;
}

.box {
  background-color: beige;
  color: black;
  border-radius: 5px;
  border: 2px dodgerblue solid;
}

.a{
  grid-column: 1 / span 2;
  grid-row: 1 / 3;
}

• Previous
  CSS Transitions
• Next
  Browser compatibility