<html>
<ul class="container">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
</ul>
- grid-column·row
:그리드 컨테이너의 줄 번호를 속성값으로 사용해 아이템을 배치하는 속성
줄 번호란?
사용예시1)
.container{
display: grid;
height: 500px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
/* 2행 3열의 그리드 레이아웃을 만든다.*/
}
li:nth-child(1){
grid-row: 1 / 2;
grid-column: 1 / 3;
}
li:nth-child(2){
grid-row: 1 / 3;
}
사용예시2)
.container{
display: grid;
height: 500px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
/* 2행 3열의 그리드 레이아웃을 만든다.*/
}
li:nth-child(2){
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 4;
}
'Study > HTML, CSS' 카테고리의 다른 글
| [CSS] 레이아웃 - grid 속성 : align-items, align-self, justify-items, justify-self (0) | 2023.04.02 |
|---|---|
| [CSS] 레이아웃 - grid 속성 : grid-template-areas, grid-area (0) | 2023.04.02 |
| [CSS] 레이아웃 - grid 속성: grid-template-columns· rows, gap (0) | 2023.04.02 |
| [CSS] 레이아웃 - grid 기본개념 (0) | 2023.04.02 |
| [CSS] flex (0) | 2023.04.01 |
