Css Grid 2

Place Items - 각 자식 요소들 셀 안에서의 위치

justify-items (수평)

Default value => justify-items : stretch : grid를 늘려서 grid를 채우게 하는 것

Justify-items : start : item을 cell 시작에 배치한다.

Justify-items : center : item을 cell 중앙에 배치한다.

Justify-items : end : item을 cell 끝에 배치한다.

align-items(수직)

위와 동일

place-items (수직) (수평)

위와 동일

place content - gird가 적용된 container의 위치

• Justify-content : start; (그리드가 놓이는 위치를 뜻하며 기본은 start)

• Align-content는 수직적으로 그리드를 움직이는 것

  1. Start, end, space-evenly, space-around, space-between 사용

  2. 컨테이너의 height가 그리드를 담을 만큼 충분해야한다.(높이 지정)

  3. Grid-template에서 높이를 fr로 설정하고 align-content를 stretch로 설정하면 쭉 늘어난다.

  4. Place items와 마찬가지로 place-content를 통해 수직 수평으로 그리드 이동가능(첫번째가 수직, 두번째 옵션이 수평)

  5. Place-items는 셀안에서 항목이 이동하는 것이며, place-content는 그리드가 이동하는 것이다.

Auto Columns and Rows

• align-self

• justify-self

• place-self: (수직) (수평);

  child에만 적용돠는 property이다.

• Grid-auto-rows(크기)

  만들어놓은 row보다 더 많은 content가 있으면 자동으로 row를 더 만든다.

  .grid {
     color: white;
     display: grid;
     gap: 5px;
     grid-template-columns: repeat(4, 100px);
     grid-template-rows: repeat(4, 100px);
     grid-auto-rows: 150px;
  }

  grid라는 클래스 명을 가진 div는 20개의 div를 가지고 있다. 여기서 grid-template-columns: repeat(4, 100px) , grid-template-rows: repeat(4, 100px) 로 지정해준 4번째 row까지는 100px로 지정되지만 남은 row들은 grid-auto-rows: 150px 로 자동적으로 150px로 지정된다.

• Grid-auto-flow(방향)

  Flex-direction 과 비슷하다 . Column / row 정해서 지정할 수 있다.

• Grid-auto-columns(크기)

  grid-auto-flow: column;일때 작동한다. grid-auto-columns : 100px 이런식으로 설정해주면 모두 100px 로 설정이 된다.