Grid (2)

primav·2024년 8월 20일

CSS

목록 보기

7/12

grid items

.frog {
	width: 200px;
    height: 200px;
    margin: auto; // 가용공간 취함
}

❗️ grid-item은 무조건 정해진 위치(grid-container) 안에서만 움직인다. (flexbox와 다름)
❗️ 독립적으로 원룸 내에서의 일

➡️ parent와 children은 독립적이고 children을 감싸는 눈에 안보이는 컨테이닝 블록(원룸)이 있는 것이다.

minmax

아이템에 직접 min(0, * )하는 것 말고 컨테이너 기준에서 안정성을 확보한다.
➡️ 자식에게 해주지 않고 부모에게 하는 것이 minmax

// minmax( 0, 너비 ) 개념으로, min-width : 0 초기화 해주는 기법 --> 그리드 컨테이너에서 안정성 확보
grid-template-columns: minxmax( 0, 1fr ) minmax( 0, 1fr )

➡️ min-width: auto라는 기본값 때문에 자식 요소가 부모 요소의 크기를 변화시킨다. (부모 너비를 늘림)

flexbox처럼 해당 요소에게만 min-width: 0 해줄 수 있지만 모든 columns에게 적용되는 것이 더 좋다.

➡️ minmax

auto가 되면 이미지의 고유의 크기 때문에 부모의 크기가 커지니까 이것을 막고자 0을 넣는 것이다.

❗️ auto가 아닌 것을 넣으려고 0을 넣는 것이지, 유의미하게 특정한 0을 넣는 것은 아니다!

repeat

반복적으로 들어갈 값을 repeat함수를 이용하여 쉽게 표현할 수 있다.

grid-template-columns: repeat(2, 1fr) // 1fr 1fr
grid-template-columns: repeat(2, minmax(0,1fr)) // minmax(0, 1fr) minmax(0, 1fr)

justify-items : stretch
align-items : stretch

justify-items : center
align-items : center

❗️repeat(auto-fit, 200px)
: 200px을 기준으로 컨테이닝 블록에 들어갈 수 있는 만큼 repeat 해서 띄움
➡️ 창 크기에 따라 한 줄에 들어가는 개수가 다름

grid의 초기값

💡 그리드의 초기값 (normal = stretch)
모든 그리드 아이템이 그리드 컨테이너 기준으로 가득 찼으면 하는 바램으로 만들어진 초기값

content vs items

justify-content
align-content
➡️ 그리드 컨테이너 기준에서 모든 그리드 아이템의 정렬을 담당

justify-items
align-items
➡️ 그리드 컨테이너가 만든 컨테이닝 블록 내부에서 그리드 아이템 정렬을 담당

grid line

.child:first-child {
	grid-column-start: 1;
    grid-column-end: 3;
}

➡️ 그리드 아이템의 시작점과 끝 지점을 정하여 맘대로 그리드 아이템을 늘릴 수 있음 (비율을 유지하며)
❗️ 자유도가 높다 (침범도 가능)

`›grid-auto-flow`

기본값 : grid-auto-flow: row 이다.

✔️ grid-auto-flow: column

auto-fit vs auto-fill

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

셀의 개수가 5개보다 모자라면, 공간이 남는다.

auto-fill은 설정된 너비에서 가능한 많은 셀들을 만들어 내려고 한다.
겉으로 보기에는 빈 공간이 있더라도 셀의 길이를 늘리지 않는다.

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

auto-fit 은 내부의 공간이 남은 경우, 그 공간을 각 셀들이 나눠 가져 셀이 공간에 fit하게 맞도록 한다. (남은 공간 채움)
겉으로 보기에는 셀의 길이를 전체 너비에 맞게 늘린다.

grid-line

✔️ grid-column-start: 2
✔️ grid-row-start: auto

.items.active {
	grid-column-start: 3;
}

➡️ 원래 이 아이템은 grid-column-start: 2가 초기 값이다.

하지만 내가 임의로 3으로 바꾸었기 때문에 원래 자리는 비우고 한칸씩 밀리게 된다.

✔️ grid-column-start: 1
✔️ grid-row-start: auto

.items.active {
	grid-column-start: 1;
    grid-row-start: auto;
}

그렇다면 이건 또 왜 이렇게 많이 밀리는 것일까?

이건 내가 시키는 대로 해주면서 5와 6의 마크업 순서가 바뀌지 않고 유지되게 하기 위해 이런 순서가 된 것이다.

✔️ grid-column-start: 1
✔️ grid-row-start: 2

만약 컬럼과 로우 모두 정확한 지점을 명시하였다면 어떻게 될까?

정확히 명시한 지점 부터 위치 지정
나머지 요소들을 마크업 기준으로 배치

❗️ 마크업 순서를 최대한 유지하려고 노력하는 것

✔️ grid-column-start: auto
✔️ grid-row-start: 3

column 값이 기본값인 auto이고 row값만 지정되어 있다면 무조건! col=1로 간다!
➡️ 빈칸 안생김

만약 7이 위의 사진이 아닌 11번의 위치로 갔다면 너무 복잡하고 꼬이기 때문에 column은 auto 이고 row만 값이 지정 되었다면 무조건 컬럼을 1로 보낸다.

마크업 순서 유지하려고 하는데 복잡해지니까 커럼을 1로 보내면 항상 마크업이 유지되어 간단하므로 1로 보내는 것

✔️ grid-column-start: 5
✔️ grid-row-start: auto

템플릿은은 4x4인데 컬럼 시작을 강제적으로 5를 하므로 5에서 시작하도록 하면서 마크업 순서를 유지하기 위해 칸을 비우고 배치한 뒤 나머지를 마크업 순서대로 배치하는 것이다.

💡 단축 속성
grid-column-start: 1 && grid-column-end: 3
= grid-column: 1 / 3 ( 시작점 / 끝점 )
= grid-column: 1 / span 2 ( 시작점 / 두칸 차지 )

💡 상황 정리
1. 둘 다 auto (➡️ 알아서 위치 조정하여 자연스러운 흐름으로 배치)
2. 둘 중 하나만 auto & 하나는 명시 (➡️ 브라우저가 임의 판단)
➡️ griddcolumn-start: auto 일 때 :
➡️ row가 auto 일 때 :
3. 둘 다 명시
브라우저가 마크업 순서를 최대한 유지하려고 애쓰기 때문에 생기는 일