Display Grid

사이트

Css Grid

부모 요소에 display:grid 적용시 자식 요소들은 grid cell로 변함

@Grid (부모요소 / container)

구분	명령어
가로 사이즈 설정	grid-template-columns
세로 사이즈 설정	grid-template-rows
레이아웃 설정	grid-template-areas
그리드 간격 설정	grid-gap

@grid-template-columns

-가로 열 설정
-px, %, fr 단위로 사용 가능
-반복 시 repeat() 사용하여 코드 간단하게 작성 가능

.container {
  grid-template-columns: 100px 100px;
  grid-template-columns: 50% 50%;
  grid-template-columns: 50% 50%;

  /* 반복 */
  grid-template-columns: repeat(5, 100px);
}

@grid-template-rows

-세로 행 설정
-px, %, fr 단위로 사용 가능
-반복 시 repeat() 사용하여 코드 간단하게 작성 가능
-grid-auto-rows를 사용하여 자동 조절할 수 있음
-minmax()를 사용하여 최소값, 최대값 설정 가능

.container {
  grid-template-rows: 100px 100px;
  grid-template-rows: 50% 50%;
  grid-template-rows: 50% 50%;

  /* 반복 */
  grid-template-rows: repeat(5, 100px);

  /* 높이 자동 조절 */
  grid-auto-rows: auto;

  /* 최소값, 최대값 설정 */
  /** ~150px: 고정
      150px~: 자동조절 */
  grid-auto-rows: minmax(150px, auto);
}

예시

.container {
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 10px;
}
.item2 {
  grid-column: 2 / 4; /* 2번째 열 ~ 4번째 열 */
  grid-row: 1 / 3; /* 1번째 행 ~ 3번째 행 */
}

결과 그리드

---

@grid-template-areas

• 자식 요소의 grid-area 속성으로 그리드 영역의 이름을 참조하여, 그리드 템플릿 영역을 설정

• 부모 요소: grid-template-areas를 이용하여 그리드 템플릿 영역 설정
• 자식 요소: grid-area를 이용하여 그리드 영역 이름 설정

/* 부모요소 */
.container {
  grid-template-areas: "a b";
}

/* 자식요소 */
.item1 {
  grid-area: a;
}
.item1 {
  grid-area: b;
}

예시. grid-template-areas를 활용해서 이름을 지정한 후 아이템 배치하기

.container{
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 150px;
  grid-gap: 1rem
  grid-template-areas:
    "a a a"
    "b c c"
    "b d g"
    "e f g";
}
.image1 {
  grid-area: a;
}
.image2 {
  grid-area: b;
}
.image3 {
  grid-area: c;
}
.image4 {
  grid-area: d;
}
.image5 {
  grid-area: e;
}
.image6 {
  grid-area: f;
}
.image7 {
  grid-area: g;
}

결과 그리드

---

@Grid cell (자식요소 / item)

구분	명령어
특정 item을 표시하기 시작할 열 지정	grid-column-start
특정 item을 표시하기 끝마칠 열 지정	grid-column-end
특정 item을 표시하기 시작할 행 지정	grid-row-start
특정 item을 표시하기 끝마칠 행 지정	grid-row-end
grid-column/grid-row로 단축해서 사용할 수 있음

.grid__cell {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

/* 코드 단순하게 */
/* grid-column/row: 시작할 열/행, 끝날 열/행  */
.grid__cell {
  grid-column: 2 / 4;

  grid-row: 1 / 3;
}

---