CSS 플렉스 / 그리드 레이아웃

B_Tae 2022. 1. 31. 23:37

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다.
또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다.

플렉스 박스 레이아웃

플렉스 박스를 알기 전 알아야 할 용어

플렉스 컨테이너 - 부모 박스로 플렉스 박스 레이아웃대상을 묶는 요소
플렉스 항목 - 자식 박스로 플렉스 레이아웃을 적용할 대상
주축 - 항목을 배치하는 기본 방향으로 왼쪽에서 오른쪽 수평 방향으로 배치
교차축 - 주축과 교차하는 방향이며 기본적으로 위에서 아래로 배치한다.

플렉스 박스에는 많은 속성이 있다.

플렉스 컨테이너를 지정하는 속성
배치할 요소가 있다면 그 요소를 감싸는 부모 요소를 만들어야 한다. 그리고 그 부모 요소를 플렉스 컨테이너로 만들어야 하는데 그때 사용하는 속성이 display속성이다.
부모 요소에 display 속성을 플렉스로 지정하여 플렉스 컨테이너를 만들면 된다.

display 속성값

종류	설명
flex	컨테이너 안의 플렉스 항목을 불록 레벨 요소로 배치
inline-flex	컨테이너 안의 플렉스 항목을 인라인 레벨 요소로 배치

플렉스 방향을 지정하는 flex-direction 속성
플렉스 항목을 배치하는 주축과 방향을 지정하는 속성

flex-direction 속성값

종류	설명
row	주축을 가로로 왼쪽에서 오른쪽으로 배치 (기본값)
row-reverse	주축을 가로로 오른쪽에서 왼쪽으로 배치
column	주축을 세로로 위쪽에서 아래쪽으로 배치
colum-reverse	주축을 세로로 아래쪽에서 위쪽으로 배치

플렉스 항목의 줄을 바꾸는 flex-wrap 속성
플렉스 컨테이너(부모 박스)의 너비 보다 플렉스 항목이 많이 있을 경우 줄바꿈의 여부를 지정한다.

flex-wrap 속성값

종류	설명
nowrap	한 줄에 표시(기본 값)
wrap	여러 줄에 표시
wrap-reverse	여러 줄에 표시하되, 시작과 끝점이 바뀜

방향과 줄 바꿈을 한번에 지정하는 flex-flow 속성
flex-wrap과 flex-direction 속성을 한번에 지정할 수 있다.
ex)

#opt { flex-direction: row;
        flex-wrap: wrap;
}
 =   
#opt { flex-flow : row wrap;}

앞서 봤던 속성은 배치를 어떻게 할 것인지에 관련된 속성이였다면 아래 속성은 정렬을 어떻게 할 것인지에 관련된 속성이다. 주축 정렬 방법을 지정하는 justify-content 속성 플렉스 항목(자식 박스)간에 주축 정렬 방법을 지정하는 속성이다.

justify-content 속성값

종류	설명
flex-start	주축의 시작점에 맞춰 배치
flex-end	끝점에 맞춰 배치
center	중앙에 맞춰 배치
space-between	시작점과 끝점에 항목을 하나씩 배치한 후 나머지 항목은 그 사이에 같은 가격으로 배치
space-around	같은 간격으로 배치

교차축 정렬 방법을 지정하는 align-item 속성
플렉스 항목(자식 박스)간에 교차축 정렬 방법을 지정하는 속성이다.

align-item 속성값

종류	설명
flex-start	주축의 시작점에 맞춰 배치
flex-end	끝점에 맞춰 배치
center	중앙에 맞춰 배치
baseline	문자 기준선에 맞춰 배치
stretch	항목을 늘려 교차축에 가득 채우게 배치

교차축 정렬 방법을 특정 항목만 지정하는 align-self 속성
특정 항목에 대해 교차축 정렬 방법을 지정하고 싶다면 align-self 속성을 사용한다. 속성 값은 align-item과 동일하다.
align-item의 경우 플렉스 컨테이너(부모 박스)에서 지정하고 align-self 속성의 경우 항목 요소에서 지정한다.

교차축 정렬 방법 ( 여러줄 일 때) 지정하는 align-content 속성
justify-content 속성 값과 동일 값을 사용한다.

그리드 레이아웃

그리드 레이아웃은 플렉스 박스 레이아웃과는 다르게
주축이 없고 가로와 세로 row와 column으로 구분한다.
마찬가지로 그리드 레이아웃을 지정할 때 적용할 요소에 바깥 부분을 그리드 컨테이너로 지정해야한다.

그리드 컨테이너를 지정하는 속성 display

display 속성 값

종류	설명
grid	컨테이너 안의 항목을 블록 레벨로 지정
inline-grid	컨테이너 안의 항목을 인라인 레벨로 지정

칼럼과 줄의 크기와 갯수를 지정하는 속성

그리드 컨테이너에서 줄과 칼럼의 갯수와 크기를 지정해야한다. 칼럼을 지정할 때는 grid-template-columns, 줄을 지정할 때는 grid-template-rows 속성을 사용한다.

#rapper {
    display: grid;
    grid-template-columns : 300px, 300px, 300px ; /* 너비가 300px인 칼럼 3개*/
    grid-template-rows : 100px ;  /* 줄 높이가 100px */
}

크기의 단위 fr
칼럼의 크기를 px로 지정할 경우 크기가 고정되어 반응형 웹으로 제작하기 적합하지 않다. 그래서 그리드 레이아웃에서는fr 단위를 사용한다.
fr 단위는 비율을 나타내는 것으로 같은 너비의 칼럼이라면

grid-template-columns: 1fr 1fr 1fr ;

2:1:1로 배치한다면

grid-template-columns : 2fr 1fr 1fr;

또한 같은 값이 반복 될 때에는 줄여서 repeat()함수를 통해 작성 할 수 있다.

    grid-template-columns: 1fr 1fr 1fr ;
=   grid-template-columns: repeat(3, 1fr)

함수 minmax()

grid-template-rows를 통해 줄 높이를 px로 고정을 한다면 내용이 많아졌을 때 뒷 부분이 보이지 않는다.
이때 최솟값이나 최댓값을 지정하는 minmax() 함수를 사용하면 유연하게 지정할 수 있다.
최솟값을 100px으로 지정한다면 내용이 없을 때는 100px 높이 값을 갖고, 내용이 많아지면 그 양만큼 줄 값이 높아진다.

자동으로 칼럼 개수를 조절하는 속성

앞서 사용한 repeat()함수를 통해 개수를 자동으로 조절 할 수 있다.
예를 들어 같은 너비 100px 칼럼을 화면 너비에 가득 채울 때까지 배치한다면

grid-template-columns: repeat(auto-fit, 100px);

auto-fit 대신 auto-fill 값을 지정할 수도 있다.

auto-fill	VS	auto-fit
너비를 넓혀 남은 공간 없이 꽉 채운다.		남은 공간을 그대로 납두고 최소 너비만 표시한다.

항목에 간격을 지정하는 속성

종류	설명
grid-column-gap	각 칼럼 사이에 간격을 지정
grid-row-gap	각 줄 사이에 간격을 지정
grid-gap	위 두 가지 속성을 한번에 지정

외의 플렉스 박스 레이아웃에서 배운 justify-content, align-content 속성을 사용하여 항목을 정렬할 수 있다.

그리드 라인과 템플릿 영역

그리드 라인을 통해 요소를 배치 할 수 있다.
그리드에서 칼럼과 줄의 번호를 매길 수 있는데 아래 그림에서 빨간색 부분이 1번, 파란색 부분이 2번, 보라색 부분이 3번, 검은색 부분이 4번이다.

이 번호를 사용하여 요소를 배치할 수 있다.

종류	설명	예시
grid-column-start	칼럼 시작의 라인 번호 지정	<속성> : 1
grid-column-end	칼럼 마지막의 라인 번호 지정	<속성> : 4
grid-column	시작 번호와 마지막 번호 사이에 슬래시(/)를 넣어 한 번에 지정	<속성>: 1/4
grid-row-start	줄 시작의 라인 번호 지정	<속성> : 2
grid-row-end	줄 마지막의 라인 번호 지정	<속성> : 3
grid-row	줄 시작과 마지막 번호 사이에 슬레시(/)를 넣어 한 번에 지정	<속성> : 2/3

예시 소스

#wrapper{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:repeat(3, 100px);
}
.box{
    background-color:#f00;
    grid-column:1/4;
}
(생략)
<div id="wrapper">
    <div class="box">1</div>
</div>

템플릿 영역을 만들어 그리드를 배치 할 수 있다.

필요한 속성은 grid-area와 gird-template-area가 있다.
grid-area 속성을 이용해 해당 요소에 이름을 정해주고 gird-template-area를 통해 영역을 설정해 준다.

예시 소스

#wrapper{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:repeat(3, 100px);
    grid-template-areas:
     "box0 box0 box0"
     "box0 box1 box1"
     ". . box1"
}

.box0{
    background-color: red;
    grid-area:box0 ;
}
.box1{
    background-color: blue;
    grid-area:box1 ;
}
(생략)

<div id="wrapper">
    <div class="box0">1</div>
    <div class="box1">2</div>
</div>

실행하게 될 경우 아래 그림 처럼 나온다.

빈 공간은 점(.)으로 표시하고 한 줄에 들어갈 영역을 큰따옴표(")로 묶는다.

저작자표시 (새창열림)