Grid 뿌시기

Grid 기본구조

flex는 1차원(한방향)
Grid는 (가로-세로) 2차원 레이아웃 시스템
따라서, Flex보다 더 복합적인 레이아웃 표현할 수 있다.

• 전체 페이지 레이아웃 :grid
• 부분적 레이아웃: flex
  섞어서 사용해줄 수 있음.

Grid 레이아웃을 만들기 위한 기본적인 HTML 구조는 다음과 같습니다.
Flex와 마찬가지로, 컨테이너와 아이템이 있으면 됩니다.

<div class="container">
	<div class="item">A</div>
	<div class="item">B</div>
	<div class="item">C</div>
	<div class="item">D</div>
	<div class="item">E</div>
	<div class="item">F</div>
	<div class="item">G</div>
	<div class="item">H</div>
	<div class="item">I</div>
</div>

• Grid컨테이너에 .container{ display : grid} 를 지정하면 그리드 아이템은 그리드의 제어를 받음.
• Grid아이템은 grid적용시 block아이템이면->변화없음, inline아이템이면-> 컨텐츠영역만 차지한다.

cf) block요소 특성

기본 너비값이 100%를 차지한다.(폼 엘리먼트 제외)

너비값이 100%를 차지하기 때문에 각 요소가 수직으로 쌓인다.

그리드의 기본 형태(template-rows&columns)

grid-templage-columns

grid-template-columns : 1fr 1fr;

• 그리드 컨테이너에 지정해주는 속성

• 칼럼(열)의 가로폭을 지정한다

• fr:상대적인 비율만큼 가로폭을 나눈다 ex) 1fr 2fr 500px(고정칼럼)
  //fr은 꽉 채울 수 있는 (여백)공간이 있으면 그것을 다 채우는 특성이 있다.
  //뷰포트의 고정칼럼을 제외한 나머지를 1:2 비율로 나눈다.

• 띄어쓰기는 나눠진 열 갯수의 기준이 된다.

• repeat( n:반복횟수 , 반복 패턴)
  ex) grid-template-columns: repeat( 3, 1fr, 2fr ,3fr)
  // 1fr 2fr 3fr 패턴이 3번 반복된다(9줄 컬럼 형성)

• 따로 크기를 지정하지 않은 칼럼에 대해서는 자동으로 auto가 지정된다.
  // 200px 200px 지정후 남는 아이템은 Auto 여백을 모두 차지

grid-template-rows

grid-template-rows: 1fr 2fr 300px

• 가로행의 세로폭 크기 지정한다.

• 200px 200px (auto);
  //배치할 아이템이 더 남는경우 auto가 암묵적으로 지정된다.

• repeat(3,1fr) // 컨테이너 높이가 지정되지 않는다면 높이가 늘어나지않음
  // 컨테이너 height를 지정해준다면 그 때 아이템 높이가 늘어난다.

.container {
	grid-template-columns: 200px 200px 500px;
	/* grid-template-columns: 1fr 1fr 1fr */
///... 1:1:1비율로 3줄 
	/* grid-template-columns: repeat(3, 1fr) */
///... 위와동일
	/* grid-template-columns: 200px 1fr */
///... 200px, fr:남은여백을flex-grow처럼 전체차지 
	/* 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 */
}

자동으로 채우기

최대,최솟값 설정하기 minmax()

grid-template-columns: repeat(3, minmax(100px,auto));

grid-template-columns(세로열가로폭): repeat(3, 1fr);
// 그리드 세로열 가로폭을 1:1:1 공간 비율로 나누기
grid-template-rows(가로행세로폭): repeat(3, minmax(100px, auto));
// 그리드 가로행 세로폭을 최소 100px은 차지하면서 컨텐츠 높이에 따라 늘어나도록(auto) 3줄 만들기
// flex basis처럼 기본크기를 정하고 컨텐츠 사이즈에 따라 박스가 유연하게 늘어나는 것과 같음.

auto-fill과 auto-fit

repeat()함수 안에서 사용 가능한 특별한 속성

auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채웁니다.

auto-fill

• 너비를 기준으로 갯수를 자동으로 채우기

.contatiner{

grid-template-columns: repeat(auto-fill,minmax(20%, auto));

//열의 가로폭이 20%을 최소한으로 갖고 , 자동으로 뷰포트를 채우게 (media query안쓰고도 반응형으로 만들어줌) 20% x 5개 열 생성

auto-fit

• 컨테이너를 폭을 전부 채우도록 너비를 자동 세팅
  아이템 갯수가 모자랄때 auto-fill대신 사용한다.
  auto-fill과 전부 같지만, 아이템 갯수가 모자란 경우에도알아서 가로뷰포트를 꽉 채워준다.

.contatiner{

grid-template-columns: repeat(auto-fit,minmax(200px, auto));

//어떻게든 뷰포트를 200px이상의 크기로 꽉 채워준다.

복습
grid-template-columns&rows: repeat(반복수, 반복패턴);
grid-template-columns: repeat(auto-fill&fit, minmax(20%,auto);

## 셀 간격 만들기

gap

그리드 셀 사이의 간격을 설정합니다.

• row-gap: 가로간격만 지정
• column-gap: 세로간격만 지정

그리드 형태를 자동(auto)으로 정의

• grid-auto-columns
• grid-auto-rows
  // 그리드 아이템의 열,행(자동세팅) 갯수가 아닌 폭만을 정해준다.

grid-template 속성의 통제를 벗어난 위치에 있는
트랙의 크기를 지정하는 속성입니다.
template자리에 auto가 들어간다고 생각하세요.

.container {
	grid-template-columns: repeat(3,1fr);
	grid-auto-rows: minmax(100px, auto);
	gap: 1rem; 
}

css해설) 1:1:1 비율의 가로폭을 가지는 컬럼 3개를 생성하고,
세로폭은 최소100px, 컨텐츠 크기에 따라 늘어나게 배치.
rows개수는 grid-auto-rows 속성으로 자동으로
생겨나게 설정해준다.(생겨나는 rows를 확정할 수 없을 때 사용)

• 예시: 계속 로드되서 추가되는 post같은 곳(무한스크롤)에 적용해줄 수 있다.

각 셀의 영역 지정하기

**셀의 시작과 끝 라인넘버를 직접 지정해주기

• grid-column-start : 1
• grid-column-end : -2
• grid-row-start : 3
• grid-row-end : 2

**`start-end 넘버를`를 축약으로 지정하기** - grid-column: 1 / 3 - grid-column: 1 / span2 - grid-row: 1 / 4 - grid-row: 2 / span2

** 그리드영역의 그리드라인은 -(마이너스)도 지정 가능함
grid-row: 3 / -1(끝라인),
grid-column: 3 / -2(끝에서 두 번째 라인)

grid-column: 3
//기본이 1칸이므로 grid-column: 3 / 4 와 동일하다.

grid는 겹칠 수 있다.
//그리드 영역을 조절하면 셀D가 셀C를 덮을 수 있고 그리드는 이것이 가능하다
//겹쳐진 아이템의 투명도(opacity:)를 조정해서 창조적인 디자인을 만들어 낼 수도 있다.

통제,미통제 영역을 지정해주기

grid-auto-columns는 grid-template-columns의 통제를 받지 않는 column들의 배치를 결정하는 규칙

.container {
	grid-template-columns: 50px;  ///...처음 열의 폭만 50px 강제지정
	grid-auto-columns: 1fr 2fr; ///...나머지 통제받지 않는 영역을 세팅
}
.item:nth-child(1) { grid-column: 2 ; } ///... 2 / 3
.item:nth-child(2) { grid-column: 3 ; } ///... 3 / 4
.item:nth-child(3) { grid-column: 4; }
.item:nth-child(4) { grid-column: 5; }
.item:nth-child(5) { grid-column: 6; }
.item:nth-child(6) { grid-column: 7; }
///... end를 생략하면 그냥 한 칸임

그리드사진1 (6강)

'이름'으로 그리드 영역을 정의하기

grid-template-areas: (컨테이너속성)

@@@그리드사진2 (7강)

1_컨테이너에 각 영역 이름 명시해주기

.container { 
grid-template-areas:
	"header header header" ///...grid-columns: 1 / 4
	" a main b" 
	" . . . "  ///... "none none none"
	"footer footer footer" ///...grid-columns: 1 / 4
}
/// 구분은 띄어쓰기로 가능하므로 줄은 굳이 안맞춰도 됨

**2_각 영역에 명시한 이름 매칭해주기**

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

///... 이름 값에 따옴표가 없는것에 주의!

<head>
<style>
.grid-container{
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 3fr 1fr; ///...각 셀의 폭 지정하기
  grid-template-areas:  ///...이름으로 각 셀의 배치영역 지정해주기(밑에 지정되므로 설정이 우선된다)
	'header header header' ///... 1 / 4
	'sidebar-a main sidebar-b' ///... 1: 3: 1
	'footer footer footer';  ///... 1 / 4
}
.header { grid-area: header;}
.sidebar-a { grid-area: sidebar-a;}
.sidebar-b { grid-area: sidebar-b;}
.main { grid-area: main;}
.footer{ grid-area: footer}
</style>
</head>
<body>
	<div class="grid-container">
		<div class="header grid-item">Header</div>
		<div class="sidebar-a grid-item">Sidebar A</div>
		<div class="sidebar-b grid-item">Sidebar B</div>
	</div>

자동 배치 알고리즘

grid-auto-flow(컨테이너에 지정)

• 아이템의 자동 배치 알고리즘을 정하는 속성입니다.

.container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(25%, auto));
	grid-template-rows: repeat(5, minmax(50px,auto));
	grid-auto-flow: dense;
}
item:nth-child(2) { grid-column: auto / span 3; } ///... 어디서 시작할지 모름(auto) / 셀 3칸 차지     
item:nth-child(5) { grid-column: auto / span 3; }
item:nth-child(7) { grid-column: auto / span 2; }

• row(기본값배치)
• column
• dense(배치간 여백을 꽉 채워 배치)
• row dense
• column dense

정렬하기~ flex와 거의비슷

flex에서는 flex-direction이 존재하여 가로-세로가 유동적으로 바뀌지만, Grid는 축이 존재하지 않으므로 가로-세로 개념임.

align-items:

아이템들을 (셀 단위에서) 세로(column축)방향으로 정렬합니다.

• stretch (기본값,컨테이너 높이에 따라 알아서 끝까지 늘어난다)
• start
• center
• end

justify-items:

아이템들을 가로(row축)방향으로 정렬합니다.

• stretch (기본값,컨테이너 높이에 따라 알아서 끝까지 늘어난다)
• start
• center
• end

place-items

align-items & justify-items 함께 쓰는 축약속성

• align(세로) jutify(가로) 순서로 작성한다.

 place-items: center start; ///...순서: 세로 가로  

그리드사진 3

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

• 아이템을 (컨테이너 단위)에서 그룹으로 묶어서 세로 정렬합니다.
• Grid아이템들의 높이를 모두 합한 값이 Grid컨테이너 높이보다 작을 때 Grid 아이템들을 통째로 정렬합니다.
• stretch
• start
• center
• end
• space-between(양끝 배치 후, 사이 공간을 동등히)
• space-around(각 아이템별 좌우 마진을 동등히 부여, 각각의 마진을 보장한다(겹치지않음)
• space-evenly(전체 공간에서 모든 여백을 동등히 나눠갖는다(마진공유)

아이템그룹 가로정렬(justify-conent)

• 아이템을 (컨테이너 단위)에서 그룹으로 묶어서 가로 정렬합니다.
• stretch
• start
• center
• end
• space-between(양끝 배치 후, 사이 공간을 동등히)
• space-around(각 아이템별 좌우 마진을 동등히 부여, 각각의 마진을 보장한다(겹치지않음)
• space-evenly(전체 공간에서 모든 여백을 동등히 나눠갖는다(마진공유)

축약속성 place-content(세로,가로순서)

place-content: space-between center; (컨테이너속성, align세로&justify가로)

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

• 특정 아이템에만 적용하는 속성이다.
• 특정 아이템 하나만 셀 영역에서 세로 정렬을 위치를 지정한다.
• stretch(기본)
• start
• center
• end

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

• 특정 아이템에만 적용하는 속성이다.
• 특정 아이템 하나만 셀 영역에서 가로 정렬을 위치를 지정한다.
• stretch(기본)
• start
• center
• end

축약 place-self

.아이템{ place-self: (align) (justify)}

아이템 배치 순서 order

• 시각적인 순서만 바꿀 뿐이지 html구조를 바꾸진 않으므로 접근성측면 고려가 필요하다.

Z축 정렬 z-index

숫자가 클수록 위로 올라온다

• 기본값은 0이므로 1만 설정해도 다른 아이템보다 올라온다.
• position: abosulte와 같은 설정이 필요 없음 (flex&grid가 자체로 배치해줌)

출처: 1분코딩-CSS Flex와 Grid 제대로 익히기