CSS Grid Layout-2

안녕하세요 찐망고입니다.

 

오늘도 그리드 레이아웃을 이용한 포스팅을 해볼 건데요.

 

일단 grid에 관련된 이전글 하나 보시고

2023.12.29 - [WEB/CSS] - CSS Grid Layout-1

CSS Grid Layout-1

 

 

바로 시작해봅시다!!

 

문화포털 하단섹션

 

 

컬러들이 많죠? 지금 저 레이아웃 같은 경우엔

줄은 세줄

칸은 네 칸으로 나눌 수 있겠죠?

 

문화포털 그리드섹션 PC

문화포털 그리드섹션 테블릿

 

문화포털 그리드섹션 모바일

 

저번 포스팅에서 area에 이름을 지정해서 작업해 봤으니까

오늘은 display: grid가 적용된 그리드 컨테이너의 각 자식들에게

start와 end를 이용한 속성을 이용해서 코드를 짜보겠습니다~

<div class="grid-container">
    <div class="grid01">문화TV</div>
    <div class="grid02">전통문양</div>
    <div class="grid03">문화공간단체</div>
    <div class="grid04">공감마당</div>
    <div class="grid05">예술용어사전</div>
    <div class="grid06">문화이벤트</div>
    <div class="grid07">채용</div>
</div>

/* 1920 */
.grid-container {
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: 1fr 0.5fr 0.5fr 1fr;
}

/* 1280 */
.grid-container {
    grid-template-rows: auto;
    grid-template-columns: 1fr 0.5fr 0.5fr;
}


/* 768 */
.grid-container {
    grid-template-rows: auto;
    grid-template-columns: repeat(2, 1fr);
}

 

반응형은 함부로 px값을 주지 않는 것이 정신건강에 좋습니다.

물론 아예 주지 말라는 소리는 아니..;;

 

각 캡처그림과 비교해서 코드를 확인해 보면 좋을 것 같아요.

처음엔 3줄에 4칸이 필요했고, 태블릿버전에선 rows를 auto처리했어요

column에서 공간이 부족하면 아래로 자동으로 떨어지게 처리한 거죠

column은 공감마당과 예술용어사전이 나눠지면서 3열로 수정했고

모바일로 넘어오면서 rows는 유지하고

2열로 변경됩니다. 2열로 변경되고 나머지는 자동으로 떨어지는 거죠..

 

전체적으로 그리드만 세팅하면 저런 결과물이 나오지 않고, 각각의 요소들을 수정해야 해요

문화포털 그리드섹션 PC

/* 1920 */
.grid01 {
    grid-row: 1 / 3;    
    grid-column: 1 / 2;
}

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

.grid03 {
    grid-row: 1 / 3; 
    grid-column: 4 / 5;
}

 

grid-row속성과

grid-column속성은 그리드 줄의 시작과 끝, 그리드 열의 시작과 끝을 이야기합니다.

요소에 그리드를 적용시키면 각 요소에 맞춰 그리드 숫자가 표시가 되는데요.

그 숫자를 기준으로 해당 자식 요소가 어디에서 어디까지 가지고 갈 건지 지정할 수 있죠.

 

 

grid01은 문화 tv영역이에요 처음 그리드의 열을 네 개로 나누었지만

우리는 문화 tv영역과 전통문양영역 문화공간단체영역 세 개만 들어가면 되는 거죠

그래서 번호에 맞춰 넣어줍니다.

문화 tv는 1~2 전통문양은 2~4 문화공간은 4~5가 되겠죠

 

문화티브이와 문화공간 단체는 두줄을 차지하고

전통문양 아래로 공감마당과 예술용어사전이 생겼으므로 전통문양은 rows가 1~2까지만 차지하면 되겠죠?

 

태블릿버전에서 섹션이 바뀌는데요

문화 tv섹션, 전통문양섹션, 공감마당+예술용어사전섹션과, 문화공간단체섹션이 아래로 내려가요

그거에 맞춰 해당 줄과 칸의 영역을 수정해 주면 됩니다.

 

문화포털 그리드섹션 태블릿

/* 1280 */
.grid03 {
    grid-row: 3 / 6; 
    grid-column: 1 / 2;
}

.grid04 {
    grid-column: 2 / 3;
}

 

 

문화포털 그리드섹션 모바일

 

/* 768 */
.grid01 {
    grid-row: auto;    
    grid-column: 1 / 3;
}

.grid02 {
    grid-column: 1 / 3;
}

.grid03 {
    grid-row: 4 / 5; 
    grid-column: 1 / 3;
}

.grid04 {
    grid-column: 1 / 2;
}

 

 

 

반응형으로 작업된 코드를 확인해 보세요 :)

 

See the Pen Untitled by 찐망고 (@nnwbliyz-the-styleful) on CodePen.