[CSS] ch2.9 ~ ch2.13 : Grid3

ch2.9 : Place Content

• justify-content는 grid 자체를 움직이는 것

• justify-items는 cell의 배치를 논하는 것

• align-content(수직) / justify-content(수평)을 한번에 쓸 수도 있다.
  place-content: end center; /*수직 수평*/

ch2.10 : Auto Columns and Rows

.header {
  background-color: #2ecc71;
  align-self:end; /*child에 적용되는 property*/
  justify-self:center;
  place-self: end center; /*위에 두개 한번에 적는 경우*/
}

.grid {
    color: white;
    display: grid;
    gap: 5px;

    grid-template-columns: repeat(4, 100px);
    grid-template-rows: repeat(4, 100px);
    grid-auto-flow: column; /*진행방향*/
    grid-auto-columns: 100px; /*grid template에서 정해주지 않은게 있다면 100px로*/
}

.item:nth-child(odd) {
    background-color: #2ecc71;
}

ch2.11 : minmax

• minmax: 요소가 얼마나 작게/크게 될 수 있는지
  grid-template-columns: repeat(5, minmax(100px, 1fr));

ch2.12 : auto-fit auto-fill

• auto-fit과 auto-fill은 repeat에만 사용한다.
• auto-fill : row를 empty column으로 채우는 것
• auto-fit : current div를 가져와서 stretch한다.

.grid:first-child {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.grid:last-child {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

ch2.13 : min-content max-content

• min-content: content가 작아질 수 있는 만큼 작아지는 것
• max-content: content가 필요한 만큼 커지는 것
  grid-template-columns: min-content max-content;
• 혼합해서 쓸 수도 있다.
  grid-template-columns: repeat(5, minmax(max-content, 1fr));