Grid Layout

Grid Layoutの例

1.Webレイアウト

body {
  display: grid;
  grid-template-columns: 1fr 650px 200px 1fr;
  grid-template-rows: repeat(3, auto);
  grid-template-areas: 
    ". header header ."
    ". main aside ."
    ". footer . .";
}
header {grid-area: header;}
main   {grid-area: main;}
aside  {grid-area: aside;}
footer {grid-area: footer;}

2.ユーザーカード

.profile {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, auto);
}
.img     {grid-area: 1 / 1 / 2 / 3;}
.name    {grid-area: 1 / 2 / 2 / 4;}
.email   {grid-area: 1 / 4 / 2 / 5;}
.hompage {grid-area: 2 / 2 / 3 / 5;}
.desc    {grid-area: 3 / 1 / 4 / 5;}