CSS 그리드 타일

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

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

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

html<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>

css#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 속성을 적용해 보겠습니다:

html<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>

css#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개의 블록으로 이루어진 타일

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

html<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>

css#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개의 블록으로 이루어진 타일

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

html<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>

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

Результат:

실습 과제