grid-alignment (justify-content, align-content)

justify-content, align-content

---

미리보기

 

item-1

item-2

item-3

item-4

item-5

item-6

item-7

item-8

justify-content

start center end space-around space-between space-evenly

align-content

start center end space-around space-between space-evenly

 

start, center, end, space-around, space-between, space-evenly 의 값을 적용할 수 있다

이전 justify-items, align-items와 같이 부모 요소에 적용하면 된다

 

코드 예시

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);


  justify-content: start;
  align-content: 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);
  }
}

 

place-content

---

place-items와 거의 동일하다. 마찬가지로 부모요소에 적용가능하고 <align-content> <justify-content>의 값을 가진다

 /*	align-content justify-content */
 place-content: start end;

 

적용 예시

section.grid-container {
  height: 60vh;
  display: grid;

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


  place-content: start end;


  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);
  }
}

place-content 적용 모습