Grid layout 속성은
Flex Layout과 마찬가지로
컨테이너에 적용하는 속성과 아이템에 적용하는 속성
이렇게 두 가지로 나뉜다.
오늘은 gir layout을 구성하는
아이템 적용 속성들에 대해 다뤄볼 것이다.
아이템 적용속성에는
크게 grid-column, grid-row, justify-self, align-self로 나뉜다.
앞선 컨테이너 적용 속성과 비슷한 속성들이 쓰였다.
다른 점은 단지 속성명과 적용되는 것이 아이템이라는 것!!
gird에서 아이템을 배치하는 방법에는
라인 기반과 영역기반으로 나뉜다.
라인기반은 gird line을 기준으로 하여 item의 위치를 설정하는 것이고,
영역기반은 영역별 이름을 이용해 위치를 설정하는 것이다.
오늘은 라인기반을 위주로 살펴볼 것이다.
1. gird-column(row)-start / grid-column(row)-end
: grid line을 기준으로 하여 그리드 아이템 위치를 설정한다.
기본값은 auto로 자동배치이다.
❗중요❗
몇 칸이 아니라 몇줄부터 몇 줄까지인지로 정의된다는 것
또한 컨테이너 적용 속성이 아니라 nth-child(1)와 같이
해당 아이템을 선택하여 적용해야 한다.
💻 HTML코드
<body>
<div class="container">
<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>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
💻CSS코드(item)
div:nth-child(1){
grid-column-start : 2;
grid-column-end : 3;
grid-row-start : 3;
grid-row-end : 4;
}
💻결과
2. grid-column / grid-row
: grid-column(row)-start, grid-column(row)-end의 단축속성으로
컨테이너의 줄 번호를 이용해 아이템을 배치하는 속성이다.
보통은 column(row)의 n번째 줄부터 n번째 줄까지 병합할 때 쓰인다.
앞선 코드에서 grid-column과 grid-row를 써서 축약하여 쓴다면 아래와 같다.
💻CSS코드
nth-child(1){
gird-column : 2/3;
grid-row : 3/4;
}
grid-column 속성은 여러 가지 방법으로 쓰일 수 있는데
방법에 따라 병합이 되거나 시작위치만 배치하거나 할 수 있다.
1️⃣gird-column
: 끝 번호값( grid-column-end )이 없기 때문에 칼럼의 시작위치만 정의된다.
예를 들어 1번 아이템의 grid-column : 2; 로 정의하면
1번의 위치가 2부터 시작되면서 2는 3번 자리.. 12는 다음줄 13번 자리처럼
값들이 밀리면서 배치된다.
💻CSS코드
nth-child(1){
gird-column : 2;
}2️⃣grid-column : n1 / n2;
: n1번째 줄부터 n2번째 줄까지 병합하는 속성이다.
여기서 앞선 예제와 같이 column의 끝 지점과 row의 시작지점을
동일하게 하면 아이템의 병합이 아닌 재배치를 할 수 있다.
❗참고❗
grid-column : - (음수)
속성값으로 음수가 나왔을 경우 반대쪽부터 시작하게 된다.
가장 맨 오른쪽 줄이 -1이 되며 순서대로 -1,-2,.. -(n-1)로 정의된다.
gird-column : 1/-1 ; 은 gird column의 한 줄을 다 병합하여 차지하는 속성이다.
💻CSS코드
nth-child(1){
grid-column : 1/4;
}
3️⃣grid-column : span n;
: 몇 개의 cell을 병합시킬 것인지를 정의한다.
gird-column : 1 / span 2; 로 시작점을 정의해 줄 수 있다.
값의 따라서 grid-column과 같은 결과를 나타낼 수 있다.
예를 들어 grid-column : 1/4;의 값은 1번째 줄부터 4번째 줄까지의 병합이고,
grid-column : 1 / span 3은 1번째 줄부터 3칸 병합이므로 같은 값을 띤다.
💻CSS코드
nth-child(1){
grid-column : 1/ span 3;
}
/* 위 아래 같은 결과 */
nth-child(1){
grid-column : 1 / 4;
}
💻결과
3. justify-self(가로) / align-self(세로)
: 선택된 grid 아이템 1개 만의 가로/세로 방향으로 정렬한다.
컨테이너 속성의 justify-items과 align-items로 grid 아이템 전부의 가로/세로 정렬을 변경했다면
justify-self와 align-self는 아이템 1개만 가로/세로 정렬을 설정하는 것이다.
1️⃣stretch
: 박스모양처럼 아이템들이 쭉 늘어나있는 상태
2️⃣start / center / end
: 시작 / 가운데 / 끝으로 정렬이 되어 있는 상태이다.
예를 들어 3번 아이템의 정렬을 변경한다면 아래와 같이 변경된다.
💻CSS코드
/* 1번 그림 */
nth-child(3){
justify-self : center;
}
/* 2번 그림 */
nth-child(3){
align-self : end;
}
/* 3번 그림 */
nth-child(3){
justify-self : center;
align-self : end;
}
grid 아이템 속성에 대해 알아보았다.
아이템 속성은 gird 전체가 아닌 아이템 한 개의 속성만 변경한다는 것에 유의하며,
마지막으로 grid item 속성에 대해 간단하게 표로 정리를 해 보았다.
| grid item 속성 | 속성명 |
| grid-column-start grid-column-end |
그리드의 라인을 기준으로 그리드 아이템을 배치한다.(세로줄) |
| grid-row-start grid-row-end |
그리드의 라인을 기준으로 그리드 아이템을 배치한다.(가로줄) |
| grid-column | grid-colum-start/end의 단축속성으로 그리드 아이템들을 배치한다. |
| grid-area | grid item을 영역에 따라 이름으로 지정하여 아이템을 배치한다. |
| justify-self | 아이템 1개의 가로 정렬을 정의한다. |
| align-self | 아이템 1개의 세로 정렬을 정의한다. |
📚오늘의 출처📚
얄코, 야무
지난 포스팅 리뷰
Grid Layout이란
2차원(가로, 세로)의 레이아웃 시스템이다.
gird의 컨테이너 적용 속성에는 크게 4가지가 있다.
1️⃣ grid-template-column / grid-template-rows
: grid 트랙의 크기를 지정해 주는 속성
2️⃣ gap
: grid 셀 사이의 간격을 설정
3️⃣ grid-auto-rows / grid-auto-columns
: 가로(세로) 줄의 개수와 상관없이 지정한 크기대로 크기를 설정
4️⃣ justify-items(가로) / align-items(세로)
: grid 아이템을 가로/세로 방향으로 정렬한다.
'Study with Yedol > CSS' 카테고리의 다른 글
| CSS transform 속성 적용 방법 (0) | 2024.01.24 |
|---|---|
| CSS cursor 속성 적용 방법 (0) | 2024.01.19 |
| CSS Grid layout 컨테이너 속성 (0) | 2024.01.12 |
| CSS Flex레이아웃 item 적용 속성 (0) | 2024.01.08 |
| CSS Flex 레이아웃 컨테이너 적용 속성 (0) | 2024.01.07 |
