퍼블리셔로 근무할때나 최근 작업을 하는 경우에도 정렬을 위해 flex 속성 위주로 사용을 했었고 그게 너무 편했다. 너무 flex 속성만 사용하다 보니 grid를 알아봐야지 하면서 나중으로 미뤘었다. 그러다 최근 grid 사용할 일이 생겼는데 머리가 하얘졌다... 이 계기로 grid를 정리하고 알아볼겸 flex와 함께 정리해보고자 한다.
flex
는 1차원의 행 혹은 열의 레이아웃을 위해 설계되었고 ,grid
는 행과 열 모두를 위한 2차원 레이아웃을 위해 설계되었다.
위 그림을 보면 오렌지 색 박스 요소는 grid로 구현했고 빨간색 박스 요소는 flex로 구현했다.
이는 flex는 행 또는 열 방향으로 1차원적 나열을 구현하지만 grid는 행과 열 모두를 조절한 2차원 나열을 구현한다는 의미다.
Flex는 콘텐츠 위주의 정렬, Grid는 레이아웃 위주의 정렬 ???
플랙스박스는 좀 더 콘텐츠에 초점이 맞춰져 있습니다. 플랙스박스의 이상적인 사용 사례는 여러 아이템을 컨테이너에 고르게 배치하려는 경우입니다. 여기서 콘텐츠의 크기가 각 아이템이 차지하는 공간을 결정합니다. 아이템이 새로운 줄로 줄 바꿈 되면, 아이템의 크기와 해당 줄의 사용 가능한 공간에 따라 간격이 조정됩니다.
그리드는 레이아웃을 먼저 고려하게 됩니다. CSS 그리드 레이아웃을 사용할 때는 우선 레이아웃을 작성한 다음 그 위에 아이템을 배치하거나, 자동 배치 규칙을 통해 견고하게 짜인 그리드 위에 놓인 그리드 셀에 아이템을 배치하게 됩니다.
<div class="flex-container">
<div class="flex-item">F</div>
<div class="flex-item">L</div>
<div class="flex-item">E</div>
<div class="flex-item">X</div>
<div class="flex-item">B</div>
<div class="flex-item">O</div>
<div class="flex-item">X</div>
</div>
.flex-container {
display: flex;
flex-direction: row; /* 기본값 */
/* flex-direction: row | row-reverse | column | column-reverse */
justify-content: flex-start; /* 기본값 */
/* justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly */
}
Flex 는 각각의 요소를 정렬할 수 있는 효율적인 방법을 제공한다. Flex는 Container 와 items로 나뉘는데 Container는 items를 감싸는 부모 요소이고, 각 item을 정렬하기 위해서는 container가 필수이다. container 와 items 에는 적용하는 속성이 각각 다르다.
Container : display
, flex-flow
, justify-content
등
Items : order
, flex
, align-self
등
flex-direction
플렉스 항목들은 행을 기준으로 배치되며 ,
flex-direction
속성을 이용해 변경 가능하다. 기본값은row
이다.
➡
⬅
⬇
⬆
flex-wrap
플렉스 항목들이 Container 보다 클 경우 줄바꿈을 할지 안할지 결정한다.
justify-content
메인 축 방향 정렬, 기본 가로방향
align-content
justify-content 가 메인 축을 기준으로 배치한다면 align-content는 교차축에 대한 정렬 배치를 하게 된다.
justify-content
와 동작이 같은데 교차축 기준으로 정렬 배치align-items
플렉스 항목의 교차축에 대한 정렬을 각각의 항목들과 연관시켜서 제어, 배치
flex-bais
플렉스 아이템의 너비를 지정할 때 사용 가능하다.
flex-basis
속성은 너비 값을 정의하고 플렉스 항목의 초기 크기를 설정한다.
flex-grow
플렉스 아이템의 너비를 늘어나도록 정희해 줄 수 있는 속성
flex-grow : 1 : 자동으로 플렉스 아이템들의 너비가 컨테이너의 너비를 기준으로 알맞게 균등 배분하여 늘어난다.
flex-grow : 0 : 기본값, 플렉스 컨테이너의 너비에 맞춰 늘어나지 않는다는 의미
flex-shrink
flex-grow
의 반대의미 , 아이템의 너비를 줄어들도록 정의해 줄 수 있는 속성
flex-shrink : 1 : 기본값
flex-shrink : 0 : 아이템의 너비가 flex-basis보다 작아지지 않는다.
Grid 의 행과 열은 grid-template-columns 와 grid-template-rows 프로퍼티로 정의한다. 그리고 Grid에서 비율로는 fr단위를 사용할 수 있다. 일반적인 px 단위와는 달리, fr 단위를 사용해서 행과 열을 가변적으로 조정할 수 있다.
flex와 마찬가지로 Cotainer에 적용하는 속성과 Items에 적용하는 속성이 각각 있다.
grid-template-rows/columns
n 행(열) 크기
grid-template-areas
.container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"header header header"
"main main aside"
"footer footer footer";
}
header { grid-area: header; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
grid-template
grid-template-rows, grid-template-columns, grid-template-areas 를 합친 속성
ex)
.container {
display: grid;
grid-template:
"header header header" 100px
"main main aside" 100px
"footer footer footer" 100px
/ 1fr 1fr 1fr;
}
row-gap / column-gap / gap
셀 사이의 간격을 정할 때 사용
grid-auto-rows / grid-auto-columns
명시적으로 크기가 지정되지 않은 행(열)에 배치되면 이를 유지하기 위해 암시적 그리드 트랙이 생기는데 그 크기를 지정할 때 사용
grid-auto-flow
grid
grid-template-xxx, grid-auto-xxx의 단축 속성이다.
align-content
그리드 컨텐츠를 수직(열) 정렬할 때 사용한다.
justify-content
그리드 컨텐츠를 수평(행) 정렬할 때 사용한다.
place-content
align-content justify-content
align-items
셀내의 아이템을 수직 정렬할 때 사용한다.
justify-items
셀내의 아이템을 수평 정렬할 때 사용한다.
place-items
align-items justify-items
.item:nth-child(1) {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 2;
}
.item:nth-child(1) {
grid-row: 1/2 | 1/span 2;
grid-column: 1/2;
}