grid는 웹사이트의 복합적인 레이아웃을 표현할 수 있는 강력하고 쉬운 틀이다.
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
레이아웃을 만들기 위한 기본적인 html구조를 div로 만들었다.
부모 요소인 container 컨테이너라고 하고, 자식요소를 item 아이템이라고 한다.
grid-container는 선, item이 모인 하나의 grid이고 item은 선 안의 내용으로 각각의 칸을 의미한다.
컨테이너 안의 아이템들이 어떻게 배치되는지를 정해주어야 하고, 컨테이너에 적용되는 속성/ 아이템에 적용되는 속성을 구분해야 한다.
.container{
display: grid;
}
CSS에서 container의 display를 grid 속성으로 설정한다.
grid를 사용한다고 선언한 것일뿐 나머지 속성을 지정해주지 않으면, 화면에서 표현되는 것은 없다.
grid의 형태를 만들어 주기 위해서는 grid-template-rows / grid-template-columns 속성을 이용한다.
grid에 columns(열)과 rows(행)을 만들기 위해서는 grid-template-columns과 grid-template-rows 속성을 사용해야한다.
grid-template-rows는 행(row)의 배치를 결정하고, grid-template-columns는 열(column)의 배치를 결정한다.
grid-template-columns : 열의 배치 결정
grid-template-columns: 1fr 2fr 1fr; -> 열을 1:2:1의 비율로 지정한다.
grid-template-columns: 200px 300px 100px; -> 열을 각각의 길이로 지정한다.
grid-template-columns: 200px 1fr 1fr; -> 길이 + 비율을 동시에 지정할 수도 있다.
grid-template-rows : 행의 배치 결정
columns와 동일하게 사용한다.
repeat(반복횟수, 반복값) : 반복되는 값 처리
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; -> 반복되는 값은 repeat으로 묶어줄 수 있다.
grid-template-columns: repeat(5,1fr) 으로 위의 문장을 간단하게 표현할 수 있다.
grid-template-columns: repeat(3, 2fr 1fr)은 2:1:2:1:2:1을 의미한다.
minmax(최소,최대) : 최소값, 최대값 지정
최솟값과 최댓값을 지정할 수 있는 함수입니다.
minmax(100px, auto) -> 최소 100px, 최대는 안의 내용에 따라 자동으로 늘어난다.
grid-template-rows: repeat(3, minmax(100px, auto)); -> minmax(100px,auto)크기의 열 3번 반복해서 지정한다.
auto-fill / auto-fit
auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 너비의 허용범위 안에서 자동으로 지정되는 것이다.
차이점은, auto-fill은 남은 영역은 비워둔 상태로 두고, auto-fit은 남은 영역까지 모두 채우는 것이다.
.container1{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
}
.container2{
display: grid;
grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
}
<div class="container1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="container2">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
위의 container1은 autofit을 지정했고, 아래의 container2는 autofill을 지정한 것이다.
row-gap / column-gap / gap : 그리드 셀 간격 설정
row-gap: 행 간격 / column-gap: 열 간격 / gap: 행, 열 간격 을 지정한다.
.container{
row-gap: 10px;
column-gap: 30px;
}
행, 열 간격을 각각 10px, 30px으로 지정했다.
.container {
gap: 10px 30px;
}
위 내용을 gap으로 지정할 수도 있다. (행 10px, 열 30px 간격 설정)
.container {
gap: 10px;
}
행, 열 모두 10px 같은 간격으로 설정할 때는 위와 같이 gap을 한번만 지정한다.
grid-column-start / grid-column-end / grid-column
grid-row-start / grid-row-end / grid-row
: 각 셀의 영역을 지정
item이 나타날 위치를 지정해주는 것인데, 칸이 아닌 grid-line(선)을 중심으로 계산해야 한다.
열, 행 번호를 위와 같이 확인할 수 있다.
grid-column-start : 특정 item을 나타내기 시작할 열을 지정
grid-column-end: 특정 item을 나타내기를 끝낼 열을 지정
grid-row-start : 특정 item을 나타내기 시작할 행을 지정
grid-row-end: 특정 item을 나타내기를 끝낼 행을 지정
grid-row / grid-column : 특정 아이템 나타날 행, 열의 범위 지정 (/으로 구분한다)
grid-row-start : 2; grid-row-end : 4; 으로 나타낸 것을 grid row로 한번에 나타낼 수 있다. -> grid-row : 2/4;
grid-column-start : 2; grid-column-end : 4; 을 grid-column으로 한번에 나타낸다. -> grid-column : 2/4;
grid-template-areas : 각 영역의 이름을 이용해서 배치
.container{
grid-template-areas:
"header header header"
"nav nav aside"
"section section aside"
"footer footer footer"
;
위 태그로 영역 이름을 지정해주고 배치하였다. 아래 그림과 같이 영역을 나눌 수 있다.
align-items : 세로 방향 정렬
아이템들을 세로(column축) 방향으로 정렬해서 컨테이너에 적용한다.
stretch
start
center
end
justify-items : 가로 방향 정렬
아이템들을 가로(row축) 방향으로 정렬해서 컨테이너에 적용한다.
stretch
start
center
end
place-items : align-items와 justify-items를 같이 쓸 수 있는 단축 속성
align-items, justify-items의 순서로 공백을 사이에 두고 작성한다. 하나의 값만 쓰면 두가지 속성에 모두 동일하게 적용된다.
align-content : 아이템 그룹 세로 정렬
Grid 아이템들의 높이를 모두 합한 값이 Grid 컨테이너의 높이보다 작을 때 Grid 아이템들을 전체 통째로 정렬하는 속성
stretch
start
center
end
space-between
space-around
space-evenly
justify-content : 아이템 그룹 가로 정렬
Grid 아이템들의 너비를 모두 합한 값이 Grid 컨테이너의 너비보다 작을 때 Grid 아이템들을 전체 통째로 정렬하는 속성
stretch
start
center
end
space-between
space-around
space-evenly
place-content : align-content와 justify-content를 같이 쓸 수 있는 단축 속성
align-content, justify-content의 순서로 공백을 사이에 두고 작성한다. 하나의 값만 쓰면 두가지 속성에 모두 동일하게 적용된다.
align-self : 개별 아이템 세로 정렬
개별 아이템을 세로(열) 방향으로 정렬해서 아이템에 적용한다.
stretch
start
center
end
justify-self : 개별 아이템 가로 정렬
개별 아이템을 가로(행) 방향으로 정렬해서 아이템에 적용한다.
stretch
start
center
end
place-self : align-self와 justify-self를 같이 쓸 수 있는 단축 속성
order : 시각적 배치 순서
아이템들의 시각적 나열 순서를 결정하는 속성
작은 숫자일 수록 먼저 배치된다.
z-index : z축 정렬
숫자가 클 수록 위로 올라오고, position의 z-index와 동일하다.
'WEB > CSS' 카테고리의 다른 글
transition - CSS 속성을 천천히 변화 시키기 (0) | 2022.06.08 |
---|---|
레이아웃 CSS - flex (1) | 2022.06.08 |
가상 클래스 (추상 클래스, 의사 클래스, Pseudo-class) (0) | 2022.06.07 |
요소 배치 태그 : float / float 태그 해제 : clear (0) | 2022.06.07 |
position : 요소 배치하기 - static, relative, fixed, absolute (3) | 2022.06.02 |