명시적 그리드
그리드 시스템은 명시적 그리드와 암시적 그리드를 사용합니다. 이 개념들을 자세히 살펴보겠습니다.
명시적 그리드는 열과 행을 따라 배치된 요소들의 집합입니다. 명시적 그리드는 종종 수동으로 생성되며, 이전 강의에서 우리가 함께 생성한 모든 그리드는 명시적 그리드입니다 (예를 들어, 그리드 타일 배치 강의).
이제 우리의 명시적 그리드가 될 테이블을 생성해 봅시다:
<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: 1fr 1fr 1fr / 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
