인프런 커뮤니티 질문&답변

z.y

작성한 질문수

CSS Flex와 Grid 제대로 익히기

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

.page-header 영역에 grid-row 추가하면??

작성

324

.page-header에 grid-row: 2/3을 추가하면 아래와 같이 이미지가 깨지고 있어서요..

이전에 레이아웃 수업들을때는 header에도 각 셀에 맞춰서 grid-row값을 추가했던거 같은데, 이번에는 추가하면 아래와 같이 깨지는데, 그 이유를 알 수 있을까요??

그리구, 레이아웃 작업하실때 header, footer 와 같이 페이지 전체를 차지하는 요소들에 대해서는 grid-row를 사용안하시는지도 궁금합니다.

도통 모르겠어서요..ㅠ

HTML/CSS flex

퀴즈

The main approach is to use CSS pseudo-classes like `:checked` (typically with radio buttons or checkboxes for category selection) and sibling selectors (`~`) to control the visibility or display of items based on their category class or data attribute.

Dynamically change the order property of CSS Flexbox.

CSS controls Grid item position based on hidden radio button checked state.

Move items by group using CSS animations.

Separate category-specific layouts using media queries.

답변 1

1분코딩

지식공유자

딱 격자 형태로 이루어지지 않은 형태라면, 아래 그림과 같이 하시면 편리해요~
일단 전체 틀(검은색)을 그리드로 짜고,
각 그리드 셀들은 필요한대로 그리드 또는 플렉스로 다시 만드는거죠~
그림은 그리드 셀 안에 플렉스 컨테이너를 따로 만든 예시이고요.
아주 단순한 형태가 아니라면, 보통 이런식으로 작업하시는게 편합니다.

z.y

작성한 질문수

전체 Q&A

질문하기