CSS Grid Layout-1

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

 

오늘은 그리드 레이아웃에 대해 포스팅을 해볼 건데요.

저는 음 실무에 그나마 더 도움이 될만한 각각의 섹션을 그리드로 짜볼까 하는데요.

수업 중에는 하나의 섹션을 Flex로도 짜고, Grid로도 짜서 비교해 보긴하는데

포스팅을 그렇게 하면  너무 길어질 테니까 

각각의 속성을 알아보고 그리드로 짜는 템플릿을 좀 보여드릴까 해요.

 

 

그리드를 이용한 반응형 예제로

하단의 두 섹션을 작업한 포스팅을 올려볼까 해요 기대되죠?? ㅎㅎ

 

 

 

 

농협리츠운용 하단섹션

문화포털 하단섹션

 

자 일단 저런 걸 해보려면

그리드의 기본 속성들을 알아봐야 합니다.

 

아 참고로 우리나라 웹 사이트 레이아웃 형태상 전체를 그리드로 짜는 건 저는 비추..

그런 건 블로그 형태의 템플릿이나

웹진같이 좀 간단한 형태면 모를까 추천하지 않아요

그래서 연습도 그런 걸로 안 하는 거죠...?! 

 

그리드는 display: grid;를 사용하면 적용되는데

적용은 되지만 변화가 없는 게 특징입니다 ㅎㅎ

테이블처럼 row와 column의 개념을 가지고 있음 끝나요.

 

그리드 칸과 그리드 줄

 

테이블처럼 column과 row로 나눠지죠?

저렇게 나눠진 공간들을 다시 합치거나 분리할 수 있어요..

 

display: grid를 지정한 요소를 그리드 컨테이너라고 불러볼게요

그리드 컨테이너에 적용할 수 있는 속성을 만나봅시다.

 

1. grid-template속성

내가 지금 이 레이아웃을 세 칸으로 네 칸으로 나누겠다는 거죠

 grid-template-columns라는 속성을 사용하고, 그에 해당하는 여러 가지 형태의 값이 적용 가능합니다.

 

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

 

보면 auto라는 텍스트 보이죠? 테이블처럼 칸에 들어가는 콘텐츠 내용에 따라 늘어나요 

지금은 같은 크기들이라 같은 비율로 적용이 되는 거고 auto 개수가 하나씩 늘어날 때마다 네 칸 다섯 칸 늘어나는 거죠..

 

• grid-template
• grid-template-columns
• grid-template-rows
• grid-template-areas

그리드 템플릿 속성의 종류는 네 가지입니다.

저는 이중 grid-template-columns속성과 grid-templage-areas속성을 자주 사용하는 편이고

네 가지 속성 모두 각각 보여드릴게요~

 

grid-template는 그리드의 줄과 칸의 속성을 같이 변경할 때 사용합니다.

 

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

 

grid-template: 120px / auto auto auto auto;

 

앞에 120px는 높이값을 뜻하고 이후 auto값들은 열을 나눠주는 역할을 합니다.

반응형 작업을 하다 보면 높이값을 줄필요 없는 상황에서 주고 작업하는 게

얼마나 불편한지 아실 텐데요.

숫자 대신 auto작업도 가능합니다. 

auto를 주면 대신 콘텐츠 크기만큼 늘어나겠죠?

 

 

See the Pen grid-template-rows, column by 찐망고 (@nnwbliyz-the-styleful) on CodePen.

 

grid-template-columns는 위 보기처럼 열을 나눌 때 사용합니다.

auto대신 px나 % 단위, repeat() 함수도 가능합니다.

grid-template-rows는 줄을 나눌 때 사용합니다 단위는 columns와 동일합니다.

 

repeat() 함수에 들어간 fr이라는 단위는 유연한 단위로 그리드 컨테이너의 여유 공간을 비율로 나눠 설정합니다.

퍼센트(%) 단위와 유사해 보일 수 있으나, 퍼센트 값과 다르게 길이가 아닙니다.

그래서 calc() 함수에서 다른 값과 함께 처리할 수 없는데요

분수로 n분의 1만큼 나눈다는 개념으로 생각하시면 이해하기 쉬울 것 같아요.

repeat()을 이용하여 반복되는 값을 한 번에 처리해서 적어줄 수 있습니다.

 

grid-template-rows: repeat(2, 1fr);

 

열을 2분의 1로 나눠 가져간다는 뜻이겠죠?

 

 

마지막으로 grid-template-areas는 음 사용하기 쉽게 설명을 해드릴게요 

농협리츠운용 하단섹션

 

 

이 하단섹션이 grid-template-areas를 사용하여 만든 그리드 레이아웃인데요.

<div class="list-box">
    <div class="list01"></div>
    <div class="list02"></div>
    <div class="list03"></div>
    <div class="list04"></div>
    <div class="list05"></div>
    <div class="list06"></div>
</div>

.list-box { 
    display: grid;
    grid-template-columns: repeat(4, 25rem);
    grid-auto-rows: minmax(18rem, auto);
    grid-gap: 2rem;
    grid-template-areas:
        ". . . list01"
        ". . list02 list03"
        ". list04 list05 list06";
}

.list01 {
	grid-area: list01;
}
.list02 {
	grid-area: list02;
}
.list03 {
	grid-area: list03;
}
.list04 {
	grid-area: list04;
}
.list05 {
	grid-area: list05;
}
.list06 {
	grid-area: list06;
}

 

코드를 잘 보면  grid-template-areas 속성을 이용하여 일단 값을 지정해 줍니다.

그리드 레이아웃

 

 

각 섹션에 들어갈 위치에 맞춰 이름을 지어줍니다.

마침표가 찍혀있는 곳은 비어있는 곳이에요.

이후 각 요소에  grid-area라는 속성을 이용해서 지정해 주는 거죠

실제로는 저 네이비 박스만큼 공간을 차지한다고 생각하셔야 합니다.

그러니 저 그룹사 소개 쪽 박스는 absolute일 것이야...

 

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

 

 

grid-area라는 속성은 그리드가 적용된 컨테이너의 자식들에게 사용할 수 있는 속성인데요.

이건 다음 포스팅 때 또 자세하게 써볼게요~ 

 

 

 

2. gird-gap속성

그리드 갭은 여백을 지정하는 속성입니다.

• grid-row-gap
• grid-column-gap
• grid-gap

 

CSS3 Grid Gaps

 

grid-row-gap은 줄과 줄 사이의 여백을

grid-column-gap은 열과 열사이의 여백을

grid-gap은 줄과 열의 여백을 한꺼번에 줄 수 있고

 

grid-gap: grid-row-gap grid-column-gap;

 

보통 하나의 값을 지정하면 동시에 같은 값이, 두 개의 값을 주는 경우 줄 여백부터 적용이 됩니다.

 

 

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

 

 

참고로 gap속성은 flex를 적용한 요소에도 사용이 가능합니다.

다음 포스팅에서 다른 방법을 이용하여 문화포털 섹션을 완성해 보겠습니다 

 

 

 

 

 

 

출처 : https://www.w3schools.com/css/css_grid.asp

CSS Grid Layout

https://www.w3schools.com/cssref/playdemo.php?filename=playcss_grid-template

W3Schools CSS grid-template demonstration