CSS 그리드 타일

그리드 시스템을 실습으로 배우고 다른 간격을 가진 타일을 만들어 보겠습니다.

간격 없이 한 줄에 3개씩 9개의 블록으로 이루어진 타일

9개의 요소로 이루어진 테이블을 만들고 세 개의 열로 배치해 보겠습니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	height: 100px;
	padding: 10px;
	border: 1px solid #696989;
}

간격을 두고 한 줄에 3개씩 9개의 블록으로 이루어진 타일

이제 요소 사이에 간격을 만들기 위해 grid-gap 속성을 적용해 보겠습니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 10px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	height: 100px;
	padding: 10px;
	border: 1px solid #696989;
}

블록 사이에만 간격을 둔 한 줄에 3개씩 9개의 블록으로 이루어진 타일

이제 그리드 내 블록 사이에만 간격을 설정해 보겠습니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 10px;
	border: 2px solid #696989;
	width: 600px;
}
#parent > div {
	height: 100px;
	padding: 10px;
	border: 1px solid #696989;
}

한 블록이 부족한 한 줄에 3개씩 8개의 블록으로 이루어진 타일

아래 줄에 하나의 블록이 부족한 타일을 만들어 보겠습니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 10px;
	border: 2px solid #696989;
	width: 600px;
}
#parent > div {
	height: 100px;
	padding: 10px;
	border: 1px solid #696989;
}

실습 과제

다음 예제를 구현하세요: