🎨 CSS 5 | 그리드(with 드림코드 by 앨리) 1탄

CSS

🎨 CSS 5 | 그리드(with 드림코드 by 앨리) 1탄

grasinnong 2022. 9. 9. 14:45

Step 1 : Grid vs Flexbox

CSS Layout 을 배치할 수 있는 도구로는 Flexbox와 grid 두 가지가 있다.

Flexbox의 경우 가로를 기준으로, 세로를 기준으로 1차원적으로 CSS 레이아웃을 배치할 수 있다.

가로로 묶거나

세로로 묶거나

Grid의 경우 가로축과 세로축을 기준으로 2차원적으로 CSS 레이아웃을 배치할 수 있다.

Step 2 : Grid

Grid는 container(부모)에 주는 속성과 grid cell(자식)에 주는 속성으로 나뉜다.

container 에 꾸며줄 수 있는 속성들

- display

- grid-template-columns

- grid-template-rows

- grid-template-areas

- grid-gap

grid cell에 꾸며줄 수 있는 속성들

- grid-column-start

- grid-column-end

- grid-row-start

- grid-row--end

- grid-area

index.html

<body>
  <div class="container">
    <div class="item color1">Item1</div>
    <div class="item color2">Item2</div>
    <div class="item color3">Item3</div>
    <div class="item color4">Item4</div>
    <div class="item color5">Item5</div>
    <div class="item color1">Item6</div>
    <div class="item color2">Item7</div>
    <div class="item color3">Item8</div>
    <div class="item color4">Item9</div>
    <div class="item color5">Item10</div>
  </div>
</body>

style.css

*{
      margin : 0;
      padding : 0;
      box-sizing : border-box;
    }
    body{
      width : 100vw;
      height : 100vh;
    }
    .container{
      background-color : beige;
      height: 100vh;
    }
    .item{
     display : flex;
     justify-content: center;
     align-items: center;
     border  :1px solid #181818;
     font-size :1.2rem;
     font-weight : bold;
    }
    .color1 {
        background-color: rgb(247, 114, 114);
    }
    .color2 {
        background-color: rgb(250, 134, 153);
    }
    .color3 {
        background-color: rgb(165, 100, 250);
    }
    .color4 {
        background-color: rgb(129, 103, 255);
    }
    .color5 {
        background-color: rgb(83, 178, 255);
    }

Step 3 : Grid 부모에게 줄 수 있는 속성들(container)

- display : grid

Grid 레이아웃을 사용할 것이라고 알려주기 : 부모컨테이너에 display : grid

.container{
     background-color : beige;
      height: 100vh;
      display :grid;
}

grid를 선언함과 동시에 각 자식 아이템들은 grid cell이 된다.

- grid-template-columns

column에 아이템을 어떻게 배치할 지 정의

.container{
      background-color : beige;
      height: 100vh;
      display :grid;
      /*100px씩 3개의 아이템을 column에 배치*/
      /*repeat 함수를 사용해서 간단하게 작성할 수 있다.
       repeat(몇 번 반복, 값)
      */
      grid-template-columns : 100px 100px 100px;
}

- grid-template-rows

rows에 아이템을 어떻게 배치할 지 정의

.container{
      background-color : beige;
      height: 100vh;
      display :grid;
      grid-template-columns : 100px 100px 100px;
      /*1열은 100px, 2열은 200px, 3열은 300px*/
      grid-template-rows : 100px 200px 300px;
}

- grid-auto-rows

rows 개수에 상관없이 일괄적으로 적용

모든 rows는 150px씩 차지

.container{
      background-color : beige;
      height: 100vh;
      display :grid;
      grid-template-columns : 100px 100px 100px;
      grid-auto-rows : 150px;
}

minmax 함수를 이용하면 150px씩 차지하되 컨텐츠의 크기가 150px을 넘을 경우 컨텐츠만큼 크기 차지함.

다른 rows는 150px 차지

.container{
      background-color : beige;
      height: 100vh;
      display :grid;
      grid-template-columns : 100px 100px 100px;
      grid-auto-rows : minmax(150px, auto);
}

- grid-column-gap

column들 사이 gap 지정

.container{
      background-color : beige;
      height: 100vh;
      display :grid;
      grid-template-columns : 100px 100px 100px;
      grid-auto-rows : minmax(150px, auto);
      grid-column-gap : 10px;
}

- grid- row-gap

row들 사이 gap 지정

.container{
      background-color : beige;
      height: 100vh;
      display :grid;
      grid-template-columns : 100px 100px 100px;
      grid-auto-rows : minmax(150px, auto);
      grid-row-gap : 10px;
}

- grid-gap

row, column gap 동시 지정

.container{
      background-color : beige;
      height: 100vh;
      display :grid;
      grid-template-columns : 100px 100px 100px;
      grid-auto-rows : minmax(150px, auto);
      grid-gap : 10px;
}

저작자표시 비영리 변경금지 (새창열림)