[1분코딩] CSS Flex와 Grid 제대로 익히기 #02 (Grid)

처음 배우는 개념이라 아직 어렵긴 하지만 정말 신세계다..! 

자바스크립트 공부하기도 바쁜데 다시 CSS 공부하는게 맞나 싶었는데

몰랐으면 후회할 뻔!
참고 (1분코딩 블로그) : https://studiomeal.com/archives/533 

---

※ 그리드에 대한 오해?

"Grid는 인터넷 익스플로러에서 지원하지 않기 때문에 우리나라에서는 그림의 떡이다"

X. IE10과 11에서도 구버전 스펙을 지원하기 때문에 좀 귀찮기는 해도 방법이 있다! 분명 한계는 있지만 뭐가 다른지를 잘 알아두고 대응하면 충분히 사용 가능! 

---

Grid 레이아웃을 만들기 위한 기본적인 HTML 구조 

<div class="container"> <!-- 부모요소 :  그리드 컨테이너  -->
	<div class="item">A</div> <!-- 자식 요소 : 그리드 아이템 -->
 	<div class="item">B</div>
	<div class="item">C</div>
	<div class="item">D</div>
	<div class="item">E</div>
	<div class="item">F</div>
	<div class="item">G</div>
	<div class="item">H</div>
	<div class="item">I</div>
</div>

---

출처 : 1분코딩 블로그

용어정리

• 그리드 컨테이너 (Grid Container) : display: grid를 적용하는 grid 전체영역 
• 그리드 아이템 (Grid Item) :  grid 컨테이너의 자식 요소
• 그리드 트랙 (Grid Track) : grid의 행(row) 또는 열(column)
• 그리드 셀 (Grid Cell) : grid 한 칸. <div> 같은 실제 html 요소는 그리드 아이템이고, 이런 grid 아이템 하나가 들어가는 "가상의 칸(틀)"
• 그리드 라인 (Grid Line) : grid 셀을 구분하는 선
• 그리드 번호 (Grid Number) : grid 라인의 각 번호
• 그리드 갭 (Grid Gap) : grid 셀 사이의 간격
• 그리드 영역 (Grid Area) : grid 라인으로 둘러싸인 사각의 영역, 그리드 셀의 집합

---

Grid 컨테이너에 적용하는 속성

display : grid 

• inline-grid도 있는데, 이건 block과 inline-block의 관계와 같음

grid-template-rows / grid-template-columns : 여러 단위를 사용, 섞어서 쓸 수도 있음

• 컨테이너에 grid 트랙의 크기들을 지정
• grid-template-rows는 행(row)의 배치
• grid-template-columns는 열(column)의 배치

grid-template-columns: 200px 200px 500px;
grid-template-columns: 1fr 1fr 1fr;
/* fr(fraction 비율) 숫자 비율대로 트랙의 크기를 나눔 = 1:1:1 비율로 3개의 column을 만들겠다! */
grid-template-columns: 100px 2fr 1fr;

repeat : 반복되는 값을 자동으로 처리

• repeat(반복횟수, 반복값)

repeet(5,1fr) /* = 1fr 1fr 1fr 1fr 1fr 과 같음 */
repeat(3, 1fr 4fr 2fr) /* 이런 패턴도 가능 */

minmax : 최솟값과 최댓값을 지정

• minmax(100px, auto) : 최소한 100px, 최대는 자동으로 늘어나게
  (아무리 내용이 적어도 최소한 높이 100px은 확보하고 내용이 많아 100px이 넘어가면 알아서 늘어남)

auto-fill / auto-fit : column 의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채움

• auto-fill 대신 auto-fit을 사용하면, 남는 공간을 채움

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

row-gap / column-gap / gap : row 간격 / column 간격 / row, column 간격

• IE에서는 gap의 대체 속성이 없음🤦‍♀️

grid-auto-columns / grid-auto-rows : grid-template-columns(또는 grid-template-rows)의 통제를 벗어난 위치에 있는 트랙의 크기를 지정하는 속

• 통제를 벗어난? : row 개수를 미리 알 수 없는 경우 

---

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;
}

/* 축약형 */
.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;
}

• grid-column을 이용해 ‘통제받지 않는’ column들을 만들 수 있음

.container {
	grid-template-columns: 50px;
	grid-auto-columns: 1fr 2fr;
}
.item:nth-child(1) { grid-column: 2; }
.item:nth-child(2) { grid-column: 3; }
.item:nth-child(3) { grid-column: 4; }
.item:nth-child(4) { grid-column: 5; }
.item:nth-child(5) { grid-column: 6; }
.item:nth-child(6) { grid-column: 7; }
/* end를 생략하면 그냥 한 칸임 */

↓결과

출처 : 1분출처 블로그

grid-template-areas : 각 영역(Grid Area)에 이름을 붙이고, 그 이름을 이용해서 배치

• 해당 아이템 요소에 grid-area 속성으로 이름을 지정

.container {
	grid-template-areas:
		"header header header"
		"   a    main    b   "
		"   .     .      .   "
		"footer footer footer";
}

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

↓결과

출처 : 1분코딩 블로그

grid-auto-flow : 아이템이 자동 배치되는 흐름을 결정

 

align-items : 세로 방향 정렬

justify-items : 가로 방향 정렬

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

• 아이템들을 가로/세로방향으로 정렬

 

align-content : 아이템 그룹 세로 정렬

justify-content : 아이템 그룹 가로 정렬

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

• 아이템들의 너비/높이를 모두 합한 값이 grid 컨테이너의 너비높이보다 작을 때 grid 아이템들을 통째로 정렬

 

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

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

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

• 해당 아이템을 가로/세로 방향으로 정렬

 

order : 배치 순서

z-index : Z축 정렬