grid alignment (justify-items, align-items)

justify-items, align-items

---

미리보기

 

item-1

item-2

item-3

item-4

item-5

item-6

item-7

item-8

justify-items

stretch (default) start center end

align-items

stretch (default) start center end

 

그리드 아이템을 정렬할 때 사용한다.

총 4가지 property (stretch, start, center, end)가 있으며 부모 요소에서 적용할 수 있다

 

적용 예시

section.grid-container {
  height: 100vh;

  display: grid;

  grid-template-columns: repeat(4, 10%);
  grid-template-rows: repeat(2, 150px);

  background-color: rgb(173, 72, 72);


  justify-items: stretch;
  align-items: stretch;


  div.item {
    font-size: 1.5rem;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 3px;
    background-color: rgb(209, 209, 209);

    border: 1px solid rgb(125, 125, 125);
  }
}

부모 요소인 #grid-container 에 적용한 모습이다.

 

Place-items

---

justify-items, align-items의 축약이다

place-items: <align-items> <justify-items> 순으로 적용 가능하다

place-items: end start;

작성 예시

section.grid-container {
  height: 100vh;

  display: grid;

  grid-template-columns: repeat(4, 10%);
  grid-template-rows: repeat(2, 150px);

  background-color: rgb(255, 255, 255);

  place-items: end start;

  div.item {
    font-size: 1.5rem;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 3px;
    background-color: rgb(209, 209, 209);

    border: 1px solid rgb(125, 125, 125);
  }
}