[패스트캠퍼스] 프로그래밍 기초. css grid 시스템

박세준·2022년 9월 21일

2주차 K디지털기초역량훈련 국비지원 국비지원교육 내일배움카드취업 패스트캠퍼스 프로그래밍기초

프로그래밍 첫걸음 시작하기

목록 보기

3/6

display:grid

그리드 시스템을 적용하려는 div(그리드 아이템들의 부모) 에 display : grid 를 적용시키면 해당 div는 그리드 시스템으로 디스플레이를 구성할 수 있게 된다.

grid-template-columns

내가 구성하려는 grid의 colums의 비율과 갯수를 지정하는 값이다.
스페이스 바로 구분해서 지정할 수 있다.

.wrapper{
    display: grid;
    grid-template-columns: 200px 1fr 2fr 100vmin ;
}

px, %, vh, vw, fr, rem, em 같은 단위들을 사용할 수 있다.
rem(root em) 기본 폰트 사이즈 기반 그리드 UI를 제작할 때 유용하게 이용할 수 있다.

grid-template-rows

grid-template-columns 와 같은 방식으로 행의 비율과 갯수를 지정하는 값이다.

위 두개에서 사용할 수 있는 repeat()

같은 크기의 것들을 여러번 넣을 때 값을 전부 매겨주는 것이 힘들다.
글러 경우 repeat을 사용해이런 일들을 쉽게 해줄 수 있다.

.wrapper {
	display:grid;
    grid-template-rows : repeat(3,1fr) //1fr을 3번 반복한다.
}
.wrapper {
	display:grid;
    grid-template-rows : repeat(3,1fr 2fr 3fr) //1fr 2fr 3fr을 3번 반복한다.
}

fr이 뭐니?

fr은 그리드 시스템이서 비율에 맞게 화면을 나누기 위해 사용하는 단위로, 현재 화면의 행,열을 작성한 fr의 비율에 맞게 지정한다.
아무런 높이, 너비가 지정이 안되어 있다면, 최소크기를 1fr로 삼아서 비율이 정해지고, 높이나 너비가 지정되어 있다면, 해당 높이, 너비에 맞게 비율로 나뉘게 된다.

그리드의 1칸에는 1개만 들어가는가?

그리드로 행과 열을 쪼개면 마치 표와 같은 형태가 나오게 된다.
이때 별다른 설정을 하지 않으면 기본적으로는 1개의 자식 요소가 1개의 칸에 들어가게되는데 css의 그리드 시스템은 자식요소가 해당 그리드 시스템에서 어디부터 어디까지 차지할지를 지정해 줄 수있다.

선(그리드가 의 모서리)을 기준으로 크기 지정

자식요소에 grid-column과 grid-row 요소를 이용해 모서리를 기준으로 크기를 지정해 줄 수 있다.

	grid-template-columns : repeat(3,1fr);
    grid-template-rows : repeat(4,1fr);

로 그리드를 만들면 아래와 같이 생성된다.

1	2	3
4	5	6
7	8	9
10	11	12

이 그리드는 열이 3개 있어서 모서리가 4개 존재하고, 행이 4개 있어서 모서리가 5개 존재한다.

어떤 자식 요소의 grid-column과 grid-row에 시작 모서리/끝 모서리 와 같은 방식으로 지정해 줌으로써 해당 자식요소가 그리드에서 어디를 차지하는지 지정해 줄 수 있다.

{
	grid-column : 1/2;
    grid-row : 1/4;
}

자식요소의 css를 이런식으로 지정해 주면
해당 요스는 열의 1번째 모서리에서 2번째 모서리, 행의 1번째 모서리에서 4번째 모서리까지 공간을 차지하게 된다.

1	2	3
1	5	6
1	8	9
1	11	12

그리드 아이템의 크기를 지정하는 또다른 방법(area)

애초에 부모 요소에 그리드를 생성할 때 area(grid-template-areas)로 이름을 지정해서 생성하고, 그 area 이름을 이용해 자식요소을 grid-area에 전달해 줌으로 아이템의 배치를 설정 할 수 있다.

.wrapper {
  grid-template-areas: 
    "red red red"
    "green blue blue"
    "green blue blue"
    "purple purple orange";
}

.wrapper > div:nth-child(1) {
  background-color: red;
  grid-area: red;
}