(1)CSS - display: grid;

코딩을 처음 배웠을 때 CSS와 SCSS로 Grid System을 적용하는 방법에 대해 배우고 그 코드를 사용했었다.

다음은 SCSS로 Grid System을 만든 예시이다.

// Grid System

$columns: 12;
$column-md-width: 44px;
$column-xl-width: 75px;
$gutter: 10px;

.container {
  width: 100%;
  max-width: ($column-md-width + $gutter * 2) * $columns;
  padding: 0 $gutter;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -#{$gutter};
}

[class *= "col-md-"] {
  padding: 0 $gutter;
}

@for $i from 1 through 12 {
  .col-md-#{$i} {
    width: ($column-md-width + $gutter * 2) * $i;
  }
}

@media screen and (min-width: 1200px) {
  .container {
    max-width: ($column-xl-width + $gutter * 2) * $columns;
  }
  [class *= "col-xl-"] {
    padding: 0 $gutter;
  }

  @for $i from 1 through 12 {
    .col-xl-#{$i} {
      width: ($column-xl-width + $gutter * 2) * $i;
    }
  }
}

하지만 부트스트랩에서 Grid System에 대해 반응형까지 편하게 제공해주면서 부트스트랩을 학습한 후 거의 부트스트랩만 사용한 것 같다.

하지만 CSS에서도 grid를 제공하기 때문에 이를 학습하고 앞으로 사용해보려고 한다.

("1분코딩"님의 포스트를 주로 참고하였습니다. Grid에 대해 공부하고 싶은 분은 아래 링크로!)
이번에야말로 CSS Grid를 익혀보자

["Can I use?" 검색 결과]

Flex와 Grid의 공통점과 차이점

공통점

• 두 속성 모두 레이아웃을 결정하는 속성

차이점

• Flex는 한 방향 레이아웃 시스템 (1차원)
• Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원)

용어 정리

출처: 이번에야말로 CSS Grid를 익혀보자

Grid를 적용한 엘리먼트에 적용하는 속성

display: grid;

CSS로 그리드시스템을 적용하기 위해 꼭 필요한 요소

.container {
	display: grid;
}

1. 그리드 형태 정의 (grid-template-rows, grid-template-columns)

.container {
	display: grid;
	grid-template-columns: 200px 200px 500px;
	grid-template-rows: 200px 200px 500px;
}

repeat 함수

반복되는 값을 자동으로 처리할 수 있는 함수

• 첫번째 파라미터: 반복 횟수
• 두번째 파라미터: 반복할 문자

예를 들어,

.container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}

위 CSS는

.container {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(5, 1fr);
}

과 동일하다.

minmax 함수

• 첫번째 파라미터: 최소한의 너비
• 두번째 파라미터: 최대한의 너비

.container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, minmax(100px, auto));
}

auto-fill

개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한의 셀

.container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20%, auto));
}

auto-fit

개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한의 셀
auto-fill과 다른점

• auto-fit은 빈 공간이 있을 경우 너비를 조정해 남는 공간을 채움

2. 간격 만들기 (row-gap, column-gap)

.container {
	row-gap: 10px;
	column-gap: 20px;
}

.container {
	gap: 10px 20px;
	/* row-gap: 10px; column-gap: 20px; */
}

두 예시는 동일한 간격을 만든다.

가로 세로 간격이 동일할 경우 다음과 같이 작성할 수도 있다.

.container {
	gap: 20px;
	/* row-gap: 20px; column-gap: 20px; */
}

3. 그리드 형태를 자동으로 정의 (grid-auto-columns, grid-auto-rows)

만약 grid-template-rows에서 row는 3줄로 정의하였는데, 3줄을 넘어 더 row가 존재할 가능성이 있는 경우 grid-auto-rows를 사용하면 된다.

.container {
	grid-template-rows: repeat(3, minmax(100px, auto));
    grid-auto-rows: minmax(100px, auto);
}

4. 영역 이름 붙이기(grid-template-areas)

출처: 이번에야말로 CSS Grid를 익혀보자

.header { grid-area: header; }
.sidebar-a { grid-area: a; }
.main-content { grid-area: main; }
.sidebar-b { grid-area: b; }
.footer { grid-area: footer; }
/* 이름 값에 따옴표가 없는 것에 주의하세요 */

5. 자동 배치 (grid-auto-flow)

• row(순서대로 배치, flex에서 flex-direction:row; flex-wrap:wrap;처럼 작동)
  

• column
  

• dense, row dense

  • row 예시에서 빈칸을 채울 수 있는 그리드 아이템이 이동하여 배치

• column dense

  • column 예시에서 빈칸을 채울 수 있는 그리드 아이템이 이동하여 배치

6. 그리드 아이템 각 방향 정렬

align-items: 세로 방향 정렬

• strech
• start
• center
• end

justify-items: 가로 방향 정렬

• strech
• start
• center
• end

place-items: align-items justify-items를 같이 쓸 수 있는 단축 속성

align-content: 그리드 아이템 통째로 세로 정렬

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

justify-content: 그리드 아이템 통째로 가로 정렬

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

place-content: align-content justify-content를 같이 쓸 수 있는 단축 속성

align-self: 개발 아이템 세로 정렬

• strech
• start
• center
• end

justify-self: 개발 아이템 가로 정렬

• strech
• start
• center
• end

place-self: align-self justify-self를 같이 쓸 수 있는 단축 속성

Grid 셀에 적용하는 속성

1. 각 셀의 영역 지정

• grid-column-start
• grid-column-end
• grid-column
• grid-row-start
• grid-row-end
• grid-row

.item:nth-child(1) {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}

출처: 이번에야말로 CSS Grid를 익혀보자

.item:nth-child(1) {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}

이렇게 작성하여도 동일하게 작동한다.

시작번호/끝번호를 지정하는 방법 외에 몇 칸을 차지할지 지정할 수 있다.

.item:nth-child(1) {
	/* 1번 라인에서 2칸 */
	grid-column: 1 / span 2;
	/* 1번 라인에서 3칸 */
	grid-row: 1 / span 3;
}

auto를 적으면 알아서 칸만 차지하고 배열이된다.

.item:nth-child(2) {
	grid-column: auto / span 2;
	grid-row: auto / span 3;
}

출처: 이번에야말로 CSS Grid를 익혀보자