[CSS] grid

 

 

 

flex는 가로로 정렬하는 기준을 정하는 속성이라면 grid는 가로와 세로의 규칙을 모두 정할 수 있다.

 

위의 구성에서 상단의 2줄은 3x2로 구성되어있으며 엘리먼트가 총 6개이다.

CSS는 다음과 같다.

<div class="box-wrap">
	<div><img src="..." /></div>
	<div><img src="..." /></div>
	<div><img src="..." /></div>
	<div><img src="..." /></div>
	<div><img src="..." /></div>
	<div><img src="..." /></div>    
</div>

.box-wrap {
	display: grid;
	/* 컬럼의 개수와 너비를 지정한다. 나는 3개로 설정했다. */
	/* 1fr 1fr 1fr 등으로 지정 할 수도 있다. */
	grid-template-columns: 200px 200px 200px;
	/* 줄의 개수와 너비를 지정한다. 나는 2개로 설정했다. */
	grid-template-rows: 200px 200px;
}

 

그리고 하단의 2줄은 4칸을 차지하는 엘리먼트 1개와 각각 1칸씩 차지하는 엘리먼트 2개로 엘리먼트가 총 3개이다.

이 경우 CSS는 다음과 같다.

<div class="box-wrap">
	<div class="big"><img src="..." /></div>
	<div><img src="..." /></div>
	<div><img src="..." /></div>  
</div>

.box-wrap {
	display: grid;
	grid-template-columns: 200px 200px 200px;
	grid-template-rows: 200px 200px;

	/* 가장 큰 영역을 차지하는 엘리먼트에 적용 */
	&.big {	
		/* 시작줄, 시작열, 끝줄, 끝열 */
		/* 3번째, 4번째 값은 해당 값의 엘리먼트가 시작되기 전의 위치이다. */
		grid-area: 1 / 1 / 3 / 3;
	}
}

 

 

 

참고

grid-area - CSS: Cascading Style Sheets | MDN

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.