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;
}
:
실습 과제
다음 예제를 구현하세요:
다음 예제를 구현하세요:
다음 예제를 구현하세요: