displaly: grid; 는 flex처럼 border를 줄 수 있다.
grid: item 이 되어서 필요하다면 순서 변경도 가능하다.
코멘트 :
grid: item;은 border 속성을 활용하여 배치의 순서를 변경할 수 있다.
마치 flex-item 처럼
모바일 레이아웃은 1열 짜리로 유지할 것이다.
12-grid-layout.css 예제
미디어 퀘리를 이용하여 조건은 최소 768px인 경우를 지정한다.
.container {
display: grid;
padding: 0 20px;
@media (min-width: 768px) {
grid-template-columns: repeat(12, 1fr);
max-width: 800px;
max-inline-size: 800px;
margin: 0 auto;
}
}이미 container display: grid;가 있기에 다시 줄 필요는 없다.
flex로 수성했을 때처럼 Main content하고 sidebar 영역은 각 절반 씩 차지했다. 즉, 최소 column은 두 개 이다.
그리고 12 column을 맞추기 위해 grid-template-columns를 지정한다. repeat 함수로 Main content하고 sidebar 영역을 두 부분으로 나눈다.
즉, 12개의 열(column)을 만들되, 각 열의 크기를 동일한 비율(1fr)로 주는 것이다.
1fr → 남은 공간을 균등하게 1등분 하는 것.
fr 값이 클수록 해당 열이나 행이 더 많은 공간을 차지함.
grid-template-columns: repeat(3, 1fr);:
남은 공간을 3등분하여, 각 열이 동일한 너비를 가짐grid-template-columns: 1fr 2fr 1fr;:
두 번째 열(2fr)이 나머지(1fr)보다 2배 넓게 배치됨grid-template-columns: 200px 1fr 2fr;:
첫 번째 열은 200px로 고정되고, 남은 공간을 1fr : 2fr 비율로 나눔
이렇게 배치되는 것은 정상이다.
여기서 main과 sidebar를 제외한 header, navigation, footer는 두 칸을 차지해야 한다.
.header,
.navigation,
.footer {
grid-column: 1 / -1;
}즉, 1번 column에서 시작하고, 거꾸로 돌아가서 맨 마지막 열번호(-1)를 지정할 수 있다.
13번(마지막 열) = -1,12번 = -2,11번 = -3...
-1로 지정하는 이유 :
모바일 환경에서 디자인 자체를 반드시 12 column으로 나누지 않을 수 있다.
모바일 view - 2 column 레이아웃 작업
테블릿 view - 8 column 레이아웃 작업
데스트탑 - 12 column 레이아웃 작업
8 column일 때 끝나는 column 라인 number는 9번이 된다.
12 column 기준으로는 13번이 된다.
grid-column: 3 / span 12;물론 이렇게 줘도 된다.
다만 끝나는 번호가 상황마다 다르기 때문에 이를 대비하여 -1로 작성을 하면 된다.
여기서 .content, .sidebar는 총 12 column에서 반반씩 차지해야 한다면 grid-column: 1 / span 6; (1번 column에서 시작하여 6개의 열을 차지한다) 1 /를 생략하고 아래와같이 렌더링 가능하다.
그 이유는 grid-column에 시작하는 번호를 입력하지 않으면 마크업 순서대로 흘러가기 때문이다.
grid-column: span 6;
그리고 데스크탑 반응형을 만들어 보자.
12 column을 유지하기 위해 display: grid; 줘야 하지만 위에 지정하였기 때문에 별도로 주지 않아도 된다.
footer는 전체를 차지하지만 navigation은 전체를 차지하지 않는다.
Main Content를 유지하고 나머지 Navigation와 Sidebar만 3칸 씩 차지하도록 지정한다.
그리고 데스크탑의 최대 너비는 1280px을 넘지 않았으면 좋겠다.
@media (min-width: 1024px) {
max-width: 1280px;
max-inline-size: 1280px;
.navigation,
.sidebar {
grid-column: span 3;
}
}
Navigation와Sidebar내부에 content가 들어가면 높이는 자동으로 맞춰지게 된다. (짧아진 높이를 신경쓰지 않아도 됨)
테브릿 view와 데스크탑 view의 최대 너비를 각각 800px과 1280px으로 지정한다.
이 때 창이 더 커지면서 지정한 값보다 더 커지면서 grid 영역이 왼쪽 정렬로 지정된다.
아무래도 중앙정렬되면 보기 좋으니 margin: 0 auto;를 지정한다. (새로운 중앙정렬 테크닉은 3/6(목) 알려주기로 함.)
