🔥Final Project Day 4 - Grid Place Content, align-self, justify-self

.grid {
  display: grid;
  background: black;
  gap: 10px;
  height: 250vh;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);

  /* 여기 아래에 작성 예정  */
}

.header {
  background: #2ecc71;
}
.content {
  background: #3498db;
}
.nav {
  background: #8e44ad;
}
.footer {
  background: #f39c12;
}

justify-content: start;

<div class="grid">
  <div class="header"></div>
  <div class="content"></div>
  <div class="nav"></div>
  <div class="footer"></div>
  <div class="header">header</div>
  <div class="content">content</div>
  <div class="nav">nav</div>
  <div class="footer">footer</div>
  <div class="header">header</div>
  <div class="content">content</div>
  <div class="nav">nav</div>
  <div class="footer">footer</div>
  <div class="header">header</div>
  <div class="content">content</div>
  <div class="nav">nav</div>
  <div class="footer">footer</div>
</div>

justify-content: start;
align-content: space-between;

grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 1fr);
align-content: stretch;

place-content: end center;

.header {
  background: #2ecc71;
  align-self: end;
  /* align 그 자체에만 적용된다. */
  justify-self: center;

  /* align-self, justify-self 의 Shortcut 도 있다. */
  place-self: start end;
}
.content {
  background: #3498db;
}
.nav {
  background: #8e44ad;
}
.footer {
  background: #f39c12;
}