inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

CSS Flex와 Grid 제대로 익히기

Grid 활용예제 #1 - 카테고리 정렬하기

개수에 따른 궁금증

204

newbie

작성한 질문수 6

0

지금은 4개씩 총 16개가 있는데요.
 
만약 개수가 랜덤인 경우에도 CSS만으로
이러한 작업을 할 수 있나요?

HTML/CSS flex

답변 1

1

1분코딩

네 정렬 자체는 가능합니다. 어차피 한 줄에 배치시키는게 포인트니까요~
단, 개수가 다르면 폭도 달라지기 때문에 개수에 따라 보기좋게 만들려면 스크립트나 그리드 설정 외의 CSS를 사용해야 합니다. 예제처럼 헤더가 따로 있는 경우도 헤더의 컬럼 개수에 맞춰 스크립트로 숫자를 조정해주는 작업이 필요할 거고요.
현재 상태에서 개수를 조정하면,
ㅁㅁㅁㅁㅁㅁㅁㅁㅁ
ㅁㅁㅁㅁ
ㅁㅁㅁㅁ
ㅁㅁㅁㅁㅁ
ㅁㅁ
이런 느낌으로 배치가 바뀔거예요. 개수가 많은 행은 폭도 줄어들거고요~

0

newbie

아 그렇군요. 그렇다면

A 타입

1 2 3 4
5 6 7 8 

B 타입 
1 2 3 4 

C 타입 
1 2 3 

이렇게는 안되는 것이죠?

0

1분코딩

아 네 그런 경우에는 그냥 스크립트로 하시는게 좋을 것 같습니다~

가로스크롤 과 margin: 0 -1rem 질문 있습니다

0

131

1

수업자료 다운로드

0

135

1

VS코드에 클래스 이름만 넣으셨는데 선생님이 뭘 누르면 바로 태그로 변하던데...

1

151

1

css grid repeat() 에서 autofit 사용시

0

195

1

menu 아이템 반응형 변경

0

112

1

질문은 아니고.. 오타 발견..

0

127

1

웹에서 위치?값

0

229

1

px, em ,rem을 어떻게 감각적으로 쓸 수 있을까요?

0

526

2

강의에 나오는 html 자동으로 만들어주는 편집기에 대해 알 수 있을까요?

0

316

1

flex-basis auto, 0 차이

0

727

2

padding 대신 gap을 쓰는게 더 편하지 않나요?

2

614

1

animation forwards 관련 질문

0

499

2

auto-fill, auto-fill이 적용되지 않는것 에 대해 질문드립니다.

0

567

1

flex-grow IE 질문드립니다.

0

634

2

Flex-grow가 적용되는 영역에 대해 질문드립니다.

0

441

1

Grid 수직정렬 문의

0

1081

1

card__item에 display:flex를 했을 때..

0

515

1

11vmin

0

427

1

header class 안에 div와 h2

0

582

1

grid 반응형 페이지 step1 질문있습니다~

0

287

1

반응형 페이지 step4 order

0

362

1

미디어쿼리 사이즈

1

293

1

figure + div

0

308

1

CSS Grid를 통한 정렬의 장점

0

256

1