CSS 레이아웃 - Grid, Flex 차이 및기본 개념

 웹에는 "웹 레이아웃"이라는 개념이 존재합니다.

 우리는 아래 보이는 그림처럼 필요에 따라서 우리만의 레이아웃을 만들어 내용을 배치할 수 있습니다.

 

 

레이아웃하면 가장 많이 사용되어지는 것이 Flex,Grid입니다.

둘의 차이는 Flex는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있습니다.

그에 비해 Grid는 2차원으로 수평 수직을 동시에 영역을 나눌 수 있습니다.

 

 

 

 

Grid

 Grid는 2차원으로 수평 수직을 동시에 영역을 나눌 수 있다고 했죠? 이때 grid-template-columns속성을 이용하여 행을, grid-template-rows속성을 이용하여 열을 바꿀 수 있어요.

<!-- Grid는 행과  열 동시에 다룸 -->
    <div style="display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;"> 
        <div style="background-color: rgb(226, 110, 43);">a</div>
        <div style="background-color: rgb(198, 231, 154);">a</div>
        <div style="background-color: rgb(238, 136, 136);">a</div>
        <div style="background-color: rgb(161, 184, 228);">a</div>

    </div>

 

get-templates-columns/rows를 줄 때 fr을 이용해서 비율형태로 줄 수도 있고,

px를 이용해 단위 형태로 줄 수도 있습니다.

 

flex

- Flex 컨테이너 안(태그 안)에 있는 item들의 방향을 결정하는데, 기본적으로는 row로 형성되어 있습니다.

 <!-- Flex는 행 또는 열을 다룸 -->
    <div style="display:flex;">
       <div style="background-color: rgb(226, 110, 43);">a</div>
        <div style="background-color: rgb(198, 231, 154);">a</div>
        <div style="background-color: rgb(238, 136, 136);">a</div>
        <div style="background-color: rgb(161, 184, 228);">a</div>
    </div>

 

flex-direction을 통해서 축을 바꿀 수 있습니다.

즉, 기본적으로 되어있는 row 방향을 column으로 바꿀 수 있는거죠.

<div style="display:flex;flex-direction:column;">
    <div style="background-color: rgb(226, 110, 43);">a</div>
    <div style="background-color: rgb(198, 231, 154);">a</div>
</div>

flex를 비율로 나누려면 item부분에 flex를, px로 나누려면 flex-basis를 이용하면 됩니다.

 

flex 이용

<div style="display:flex;">
    <div style="background-color: rgb(226, 110, 43);flex:1;">a</div>
    <div style="background-color: rgb(198, 231, 154); flex:1;">a</div>
</div>

flex-basis

```html
<div style="display:flex;flex-direction:column;">
    <div style="background-color: rgb(226, 110, 43);">a</div>
    <div style="background-color: rgb(198, 231, 154);">a</div>
</div>
```