Grid System이란?
디자이너가 하얀색 빈 화면에서 layout을 일관성 있게 배치 작업을 하는 것은 쉽지 않다.
스케치북에 글을 쓸 때와 줄 노트에 글을 썼을 때 글의 안정도가 다른 것처럼.
Grid System은 Grid 만의 규칙과 패턴이 존재한다.
우선 Grid System에 사용되는 용어를 살펴보자 !
Grid System 용어
- Columns : gutter 그리고 unit 사이즈 즉 하나의 단위 가지며 일정한 간격대로 나열되어 있는 기둥을 Columns 라고 한다.
- Unit : 기둥(Columns)의 사이즈.
- Gutter : 기둥(Columns) 사이의 간격.
🔥 Desktop 반응형 Grid
- 혹은 gutter을 2로 나누어 반으로 양옆에 적용하여 하나의 Columns로 정의할 수 있다..
총 12개의 Columns 를 확인할 수 있다.
Grid가 적용되는 범위는 unit 65px, gutter 30px, columns의 갯수 로 알 수 있다.
(65px + 30px) x 12 = 1140px
gutter 가 없는 경우의 Grid
이 경우에는 Unit 의 값이 113px로 정의하면 안된다.
이 Desktop의 사이즈는 1375 x 875로 가정한다. 하지만 더 큰 화면의 값인 1920 x 1080으로 화면으로 사용하게 되면 반응형으로 사용하지 못하게 된다. 그러므로 Unit의 값이 px 단위가 아닌 % 값으로 해줘야한다.
🧩 Unit % 값 구하는 방법!
1 ➗ Columns의 갯수 x width 값 = ?
즉, 아래의 Unit의 값은
1 ➗ 12 x 100 = 8.333333 이다.
양 옆에 margin이 있는 경우의 Grid
이 경우에는 데스크탑의 화면 사이즈가 1920 x 1080으로 커졌음에도 margin 사이즈는 변하지 않았다.
즉, 
양옆의 margin 부분을 제거한 Gird 영역에 Grid System을 적용하면 된다.
🧩 Unit의 값 구하는 방법
( width 값 - 양옆의 margin 값 ) x 1 ➗ Columns의 갯수 = ?
즉, 이번 Unit의 값은
( 100% - 100px ) x 1 ➗ 12 = 8.333333% - 8.333333px
🔥 Mobile 반응형 Grid
Desktop에서는 Unit의 사이즈를 px 단위로 계산해도 되었지만!
Mobile의 경우는 Unit의 사이즈가 % 단위로 계산해야 한다.
이유는 모바일은 기기마다 해상도 사이즈가 너무나도 다르다.
🧩 Unit의 값 구하는 방법
전체 width ➗ Columns 갯수 - Gutter = ?
즉, 이번 Unit의 사이즈는
100% ➗ 4 - 20px =
25% - 20px
margin이 포함된 Mobile
🧩 Unit의 값 구하는 방법
-
(1 Columns의 사이즈 ) - Gutter =
25% - 25px -
1 Columns 의 사이즈
25% - margin / 2 =
25% - 5px
📝 반응형 Grid 코드 설계
이제부터 위에서 배웠던 개념을 정리하여 _grid.scss를 생성하여 반응형 Grid 레이아웃을 코드화로 진행하려고 한다.
앞서 설명했던 것 같이 Grid의 주요 개념은 Columns, Unit, Gutter, margin 총 4개이다.
Grid System을 만들기 위한 3개의 클래스
- .container
- .row
- .col-__ --__
🌿 Container
.container {
width: 100%;
padding: 0 $sm-margin; // padding: 0px 5px;
margin: 0 auto
}
🌿 Row
.row {
display: flex; // flex는 기본값으로 row의 속성을 띄고있다.
flex-wrap: wrap;
}flex-wrap: wrap은
// row안에 있는 자식 속성들이 row의 사이즈보다 클 경우
// 사이즈를 넘어간 나머지들은 밑칸으로 보내는 역할을 한다.
🌿 Columns의 사이즈(width값)을 정해준다.
col-sm-1 , col-md-1 , col-lg-5
col-sm-2 , col-md-2 , col-lg-6
col-sm-3 , col-md-3 , col-lg-7
위의 숫자는 Columns의 갯수를 나타낸다.
참고로 Columns들은 Columns하나하나 양옆에 padding 사이즈가 필요하다! 때문에
[class^='col-'] {
padding: 0 $gutter / 2;
}
로 모든 Columns에 양옆 padding 0 10px씩 적용해준다.
💄 유용한 css 기술 두 가지
- $ 기호를 이용한 scss 변수 생성.
$gutter: 20px; $sm-columns: 4; $sm-margin: 5px; 응용하기 👇 .container { width: 100%; padding: 0 $sm-margin; // padding: 0px 5px; margin: 0 auto // container가 항상 화면 정중앙에 배치 될 수 있도록. }이런식으로 css도 값을 설정할 수 있다.
- 속성 선택자
예시 )[name="age"] { HTML에서 name이라는 attribute(속성)중에서 그 값이 "age"인 녀석들을 찾는다. }하지만 우리가 해야 하는 것은 모든 col- 과 관련 있는 녀석들을 찾아야 한다. col-sm-1 , col-md-2 , col-lg-3 등.. 이때 속성 선택자 ^= 를 사용해 주면 된다. [class^='col-'] { class 속성 중에서 'col-' 시작하는 모든 녀석들을 찾는다. }
+ 💄 Scss 반복문 사용하기
Columns의 width 사이즈를 정의해 줘야 한다.
col-sm-1
col : 기둥
-sm : 모바일 화면크기
-1 : 첫번째 기둥 25% (전체 width가 100% 라고 가정할때 )
col-sm-2
-2 : 50% (전체 width가 100% 라고 가정할때 )
col-sm-3
-3 : 75% (전체 width가 100% 라고 가정할때 )
col-sm-4
-4 : 100% (전체 width가 100% 라고 가정할때 ) 
$sm-columns : 4;
@for $i from 1 through $sm-columns {
.col-sm-#{$i} { // $sm-columns 수 만큼 .col-sm-__ 클래스를 만든다.
width: $i / $sm-columns * 100%;
}
}🧩 width: $i / $sm-columns * 100%;
.col-sm-1 {
width: 1 / 4 * 100% => 25%
}
