퍼블리싱/css

display:gird 기초에 대해 알아보자

xhakxh135 2023. 8. 17. 14:42
반응형
SMALL

flex와는 또다른 grid

 

Flex는 한방향 레이아웃 시스템이라면(1차원)

Grid는 두 방향 레이아웃 시스템이다(2차원)

 

기본기

flex와 마찬가지로 컨테이너와 아이템이 있으면 됌

A
B
C
D
E
F
G
H
I

 

부모요소 -> Grid Container(그리드 컨테이너)

자식요소 -> Grid Item(그리드 아이템)

 

설정은 display:grid로 시작

 

그리드 컨테이너(Grid Container) Grid 전체의 영역
그리드 아이템(Grid Item) Grid 컨테이너의 자식요소
그리드 트랙(Grid Track) Grid의 행(Row) 또는 열(Column)
그리드 셀(Grid Cell) Grid의 한 칸을 가르킴
그리드 라인(Grid Line) Grid 셀을 구분하는 선
그리드 번호(Grid Number) Grid 라인의 각 번호
그리드 갭(Grid Gap) Grid 셀 사이의 간격
그리드 영역(Grid Area) Grid 라인으로 둘러싸인 사각형 영역

*inline-grid도 있는데 inline-block 느낌으로 생각하면 됌

 

 

 

부모요소 Grid Container에게 줄 수 있는 요소들

grid-template-columns (-ms-grid-rows, -ms-grid-columns)

 

컨테이너 Grid 트랙의 크기들을 지정해줄 수 있다.

.container {
	grid-template-columns: 200px 200px 500px; /*columns를 200px 200px 500px으로 만들겠다.*/
	/* grid-template-columns: 1fr 1fr 1fr */
	/* grid-template-columns: repeat(3, 1fr) */
	/* grid-template-columns: 200px 1fr */
	/* grid-template-columns: 100px 200px auto */

	grid-template-rows: 200px 200px 500px;
	/* grid-template-rows: 1fr 1fr 1fr */
	/* grid-template-rows: repeat(3, 1fr) */
	/* grid-template-rows: 200px 1fr */
	/* grid-template-rows: 100px 200px auto */
}

*grid-template-rows는 행(row)의 배치

*grid-template-columns는 열(column)의 배치

 

*fr은 (fraction) 숫자비율대로 트랙의 크기를 나눈다.

1fr 1fr 1fr -> 1:1:1 비율로 3개의 colmuns를 만들겠다.

 

 

repeat 함수

.container {
	grid-template-columns: repeat(5, 1fr);
	/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr */
	/* repeat(반복횟수, 반복값)*/
}

 

minmax 함수

minmax(100px, auto) -> 최소한 100px, 최대는 자동auto로 늘어나게 하겠다.

.container {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, minmax(100px, auto)); /* 3열로 하고 최소 100px */
}

 

auto-fill과 auto-fit

컬럼 개수를 미리 정하지 않고 설정된 너비를 꽉 채워줌.

 

auto-fill

.container {
	grid-template-columns: repeat(auto-fill, minmax(20%, auto));
}

/*  20%로 설정했으므로 한줄에 5개씩 아이템이 들어감*/

auto-fit -> 자동으로 fill을 채워준다 (마지막에 item이 4개 남았다고 치면 각 25%씩 차지함)

 

 

간격만들기 row-gap / columns-gap / gap

각 셀 사이의 간격을 설정한다.

.container {
	row-gap: 10px;
	/* row의 간격을 10px로 */
	column-gap: 20px;
	/* column의 간격을 20px로 */
    gap: 10px 20px;
	/* row-gap: 10px; column-gap: 20px; */
    gap: 20px;
	/* row-gap: 20px; column-gap: 20px; */
}

 

 

그리드 형태를 자동으로 정의 grid-auto-columns, grid-auto-rows

.container {
	grid-auto-rows: minmax(100px, auto);
}

auto를 써주면 굳이 횟수를 지정하지 않아도 된다~

 

 

각 셀의 영역 지정 grid-columns-start,end / grid-column / grid-row-start / grid-row-end / grid-row

(-ms-grid-row / -ms-grid-column / -ms-grid-row-span / -ms-grid-column-span)

.item:nth-child(1) {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}



.item:nth-child(1) {
	grid-column: 1 / 3; /* 1번 라인에서 2칸*/
	grid-row: 1 / 2; /* 1번 라인에서 3칸*/
}

 

영역의 이름으로  그리드 정의 grid-template-areas

각 차지하는 셀의 개수만큼 해당 위치에 이름을 적어주면 된다.

.container {
	grid-template-areas:
		"header header header"
		"   a    main    b   "
		"   .     .      .   "
		"footer footer footer";
}

.header { grid-area: header; }
.sidebar-a { grid-area: a; }
.main-content { grid-area: main; }
.sidebar-b { grid-area: b; }
.footer { grid-area: footer; }

/* 해당 아이템 요소에 grid-area로 속성이름을 지정해준다. */

 

자동배치 grid-auto-flow

 

새로 방향 정렬 align-items

.container {
	align-items: stretch;
	/* align-items: start; */
	/* align-items: center; */
	/* align-items: end; */
}

가로 방향 정렬

.container {
	justify-items: stretch;
	/* justify-items: start; */
	/* justify-items: center; */
	/* justify-items: end; */
}

 

place-items

align-items와 justify-item을 같이 쓸 수 있는 속성

.container {
	place-items: center start;
}

 

아이템 그룹 세로 정렬 align-content

.container {
	align-content: stretch;
	/* align-content: start; */
	/* align-content: center; */
	/* align-content: end; */
	/* align-content: space-between; */
	/* align-content: space-around; */
	/* align-content: space-evenly; */
}

 

아이템 그룹 가로 정렬 justify-content

.container {
	justify-content: stretch;
	/* justify-content: start; */
	/* justify-content: center; */
	/* justify-content: end; */
	/* justify-content: space-between; */
	/* justify-content: space-around; */
	/* justify-content: space-evenly; */
}

 

place-content

align-content와 justify-content를 같이 쓸 수 있음.

.container {
	place-content: space-between center;
}

 

 

개별 아이템 가로, 세로 정렬 align-self, justify-self 

/*아이템을 그리드 안에서 세로로 정렬*/
.item {
	align-self: stretch;
	/* align-self: start; */
	/* align-self: center; */
	/* align-self: end; */
}


/*아이템을 그리드 안에서 가로로 정렬*/
.item {
	justify-self: stretch;
	/* justify-self: start; */
	/* justify-self: center; */
	/* justify-self: end; */
}

 

place-self 

align-self와 justify-self를 같이 쓸 수 있는 단축 속성

.item {
	place-self: start center;
}

 

배치 순서 order

.item:nth-child(1) { order: 3; } /* 1 */
.item:nth-child(2) { order: 1; } /* 2 */
.item:nth-child(3) { order: 2; } /* 3 */

 

 

반응형
LIST