본문 바로가기
CSS

[CSS] Grid(1)

by 기리의 개발로그 2022. 3. 16.

grid

grid 속성은 2차원(행과 열)의 레아이웃 시스템을 제공하는 속성이다. flex 속성은 1차원 레이아웃을 위하는 속성이며, grid는 2차원으로써 좀 더 편한 레이아웃을 구성할 수 있도록 도와준다.

grid 레이아웃은 grid item이라는 자식 요소와 gird container라는 부모 요소 외에 track, line, cell, area와 같은 구성요소를 가지고 있다.

grid1

출처 : https://armadillo-dev.github.io/css/understanding-grid-layout/


  • grid container : 전체 그리드 레이아웃을 의미한다.
  • grid item : conatiner에 속해 있는 자식 요소들을 의미한다.
  • grid track : 행 또는 열을 의미한다.
  • grid line : grid track을 구분하는 선을 의미한다. 선의 번호는 1번부터 시작한다.
  • grid cell : 그리드 레이아웃의 가장 작은 요소이며, 한 개의 행과 한 개의 열로 이루어져 있다.
  • grid area : 다수의 cell로 이루어진 영역을 의미한다.

추가로 그리드에서 fr이라는 단위를 사용하는데 fr(fractional unit)는 사용 가능한 공간에 대한 비율을 의미한다.

.container {
    grid-template-rows: 2fr 3fr 50px 20%;
}

그리드 컬럼의 3번째 행은 50px를 사용하고 1번째 행은 남은 공간의 2/5, 2번째 행은 3/5 만큼을 사용하게 된다.


grid container

grid 레이아웃 중 부모 요소에 해당하며 grid item이라는 복수의 자식 요소들을 포함하고 있다.


속성 설명
display Grid Container를 정의
grid-template-rows 명시적 행(Track)을 정의
grid-template-columns 명시적 열(Track)을 정의
grid-template-areas 영역 이름을 참조하여 템플릿 생성
grid-template grid-template-의 축약
row-gap(grid-row-gap) 행과 행 사이의 간격을 정의
column-gap(grid-column-gap) 열과 열 사이의 간격을 정의
gap(grid-gap) -gap의 축약
grid-auto-rows 암시적 행(Track)을 정의
grid-auto-columns 암시적 열(Track)을 정의
grid-auto-flow 자동 배치 알고리즘 방식 정의
grid grid-template-grid-auto-의 축약
align-content 수직 방향(열 축)의 정렬 방법
justify-content 수평 방향(행 축)의 정렬 방법
place-content align-contentjustify-content의 축약
align-items 수직 방향(열 축)에서의 item 정렬 방법
justify-items 수평 방향(행 축)에서의 item 정렬 방법
place-items align-itemsjustify-items의 축약

display

display 속성은 grid 레이아웃을 설정하기 위해 필요한 속성이다.


의미
grid Block 특성의 Container 정의
inline-grid Inline 특성의 Container 정의

grid 로 지정된 Container는 Block 요소와 같은 성향을 가지며 inline-grid 로 지정된 Container는 Inline 요소와 같은 성향을 가진다.


grid-template-rows / grid-template-columns

grid-template-rows 속성은 명시적 행 크기를, grid-template-columns 속성은 명시적 열 크기를 정의하며 동시에 라인 이름도 정의할 수 있다.
fr 단위를 사용할 수 있다.

.container {
    display: grid;
    grid-template-rows: [선이름] 1행크기 [선이름] 2행크기 ...;
    grid-template-columns: [선이름] 1열크기 [선이름] 2열크기 ...;
}
<html>
    <head>
        <style>
            .container {
                display: grid;
                background-color: skyblue;
                grid-template-rows: 100px 200px 50px;
                grid-template-columns: [first-column] 100px [second-column] 200px [third-column] auto;
            }
            #item {
                border: 1px solid black;
                background-color: springgreen;
            }
        </style>
    </head>
    <body>
        <h1>grid-template-rows/columns</h1>
        <div class="container">
            <div class="item1" id="item">1</div>
            <div class="item2" id="item">2</div>
            <div class="item3" id="item">3</div>
            <div class="item4" id="item">4</div>
            <div class="item5" id="item">5</div>
            <div class="item6" id="item">6</div>
            <div class="item7" id="item">7</div>
            <div class="item8" id="item">8</div>
            <div class="item9" id="item">9</div>
        </divc>
    </body>
</html>
grid2

repeat() 함수를 이용하여 동일한 크기의 행/열을 간단하게 만들 수 있다.

 .container {
    display: grid;
    background-color: skyblue;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
}
grid3

grid-template-areas

grid-template-areas 속성은 item에 지정된 영역 이름(grid-area 속성)을 참조하여 템플릿을 생성하며 .(마침표)는 빈 영역을 의미한다.

<html>
    <head>
        <style>
            .container {
                display: grid;
                width: 300px;
                grid-template-rows: repeat(3, 100px);
                grid-template-columns: repeat(3, 100px);
                grid-template-areas: 
                    "header header header"
                    "nav . main"
                    "footer footer footer";
            }
            .header {
                grid-area: header;
                background-color: red;
            }
            .main {
                grid-area: main;
                background-color: chartreuse;
            }
            .nav {
                grid-area: nav;
                background-color: orange;
            }
            .footer {
                grid-area: footer;
                background-color: orchid;
            }
            div {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <h1>grid-template-areas</h1>
        <div class="container">
            <div class="header">header</div>
            <div class="main">main</div>
            <div class="nav">nav</div>
            <div class="footer">footer</div>
        </divc>
    </body>
</html>
grid4

grid-template

grid-template속성은 grid-template-rows, grid-template-column, grid-template-areas의 축약 속성이다.

.container {
    grid-template: grid-template-rows / grid-template-columns;
    grid-template: grid-template-areas;
}

.container {
    grid-template:
        "areas" 1행너비
        "areas" 2행너비
        / grid-template-columns;
}
.container {
  display: grid;
  grid-template:
    "header header header" 80px
    "main main aside" 350px
    "footer footer footer" 130px
    / 200px 100px auto;
}

.container {
  display: grid;
  grid-template-rows: 80px 350px 130px;
  grid-template-columns: 200px 100px auto;
  grid-template-areas:
    "header header header"
    "main main aside"
    "footer footer footer";
}

grid-row-gap / grid-column-gap

grid-row-gap 속성은 각 행과 행 사이의 간격, grid-column-gap 속성은 각 열과 열 사이의 간격을 지정한다.

.container {
    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    grid-row-gap: 5px;
    grid-column-gap: 15px;
}
grid5

gap

gap 속성은 grid-row-gapgrid-column-gap의 축약 속성으로 각 행과 행, 열과 열 사이의 간격을 지정한다.

.container {
    gap: <grid-row-gap> <grid-column-gap>;
}
.container {
    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    gap: 20px 10px;
    /*
    gap: 10px;    grid-row-gap: 10px + grid-column-gap: 10px
    gap: 10px 0;   grid-row-gap
    gap: 0 10px;    grid-column-gap
    */
}
grid6

grid-auto-rows

grid-auto-rows 속성은 암시적 행의 크기를 정의하며 item이 grid-template-rows로 정의한 명시적 행을 벗어난 범위에 있을 경우 적용된다.

.container {
    display: grid;
    height: 300px;
    width: 300px;
    background-color: skyblue;
    grid-template-rows: repeat(2, 150px);
    grid-template-columns: repeat(2, 150px);
    grid-auto-rows: 50px;
}
.item2 {
    grid-row: 5 / 6;
    grid-column: 1 / 2;
}
grid7

grid-auto-column

grid-auto-column 속성은 암시적 열의 크기를 정의하며 item이 grid-template-columns로 정의한 명시적 열을 벗어난 범위에 있을 경우 적용된다.

.container {
    display: grid;
    height: 300px;
    width: 300px;
    background-color: skyblue;
    grid-template-rows: repeat(2, 150px);
    grid-template-columns: repeat(2, 150px);
    grid-auto-columns: 60px;
}
.item2 {
    grid-row: 2 / 3;
    grid-column: 4 / 5;
}
grid8
.container {
    display: grid;
    height: 300px;
    width: 300px;
    background-color: skyblue;
    grid-template-rows: repeat(2, 150px);
    grid-template-columns: repeat(2, 150px);
    grid-auto-columns: 60px;
    grid-auto-rows: 50px;
}
.item2 {
    grid-row: 5 / 6;
    grid-column: 4 / 5;
}
grid9

grid-auto-flow

grid-auto-flow 속성은 위치를 지정하지 않은 item을 '자동 배치 알고리즘'을 통해 배치한다.


의미 기본값
row 각 행 축을 따라 차례로 배치 row
column 각 열 축을 따라 차례로 배치
row dense 각 행 축을 따라 빈 영역을 채우면서 차례로 배치
column dense 각 열 축을 따라 빈 영역을 채우면서 차례로 배치

row

  • 각 행 축을 따라 차례로 배치한다.(기본값)
.container {
    display: grid;
    height: 300px;
    width: 300px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    grid-auto-flow: row;
}
.item2 {
    grid-column: span 3; 
}
grid10

row dense

  • 각 행 축을 따라 빈 영역을 채우면서 차례로 배치한다.
.container {
    display: grid;
    height: 300px;
    width: 300px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    grid-auto-flow: row dense;
}
.item2 {
    grid-column: span 3; 
}
grid11

column

  • 각 열 축을 따라 차례로 배치한다.
.container {
    display: grid;
    height: 300px;
    width: 300px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    grid-auto-flow: column;
}
.item1 {
    grid-column: 2 / span 2;
}
.item2 {
    grid-column: span 3; 
}
grid12

column dense

  • 각 열 축을 따라 빈 영역을 채우면서 차례로 배치한다.
.container {
    display: grid;
    height: 300px;
    width: 300px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    grid-auto-flow: column dense;
}
.item1 {
    grid-column: 2 / span 2;
}
.item2 {
    grid-column: span 3; 
}
grid13

grid

grid속성은 grid-template-grid-auto-의 축약 속성이다.

.container {
    grid: <grid-template>;
    grid: <grid-template-rows> / <grid-template-columns>;
    grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;
    grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;
}
.container {
  grid:
    "header header header" 80px
    "main main aside" 100px
    "footer footer footer" 130px
    / 200px 100px 1fr;
}

.container {
  grid-template:
    "header header header" 80px
    "main main aside" 100px
    "footer footer footer" 130px
    / 200px 100px 1fr;
}
.container {
  grid: 100px 200px / 100px 200px;
}

.container {
  grid-template-rows: 100px 200px;
  grid-template-columns: 100px 200px;
}

grid-auto-flow 작성 시에는 auto-flow 키워드를 사용하며 dense 값은 auto-flow 키워드 뒤에 작성한다.

.container {
  grid: auto-flow 150px / 100px 100px;
}

.container {
  grid-template-columns: 100px 100px;
  grid-auto-flow: row;
  grid-auto-rows: 150px;
}
.container {
  grid: auto-flow dense 150px / 100px 100px;
}

.container {
  grid-template-columns: 100px 100px;
  grid-auto-flow: row dense;
  grid-auto-rows: 150px;
}
.container {
  grid: 150px 150px / auto-flow 150px;
}
.container {
  grid-template-row: 150px 150px;
  grid-auto-flow: column;
  grid-auto-columns: 150px;
}

align-content

align-content 속성은 그리드 콘텐츠를 수직 방향(열 축) 기준으로 정렬한다.
그리드 콘텐츠의 높이가 container 높이보다 작아야 한다.


의미 기본값
normal stretch와 동일 normal
start 시작점으로 정렬
end 끝점으로 정렬
center 수직 방향 가운데 정렬
stretch 열 축을 container 공간에 채우기 위해 그리드 콘텐츠를 늘림
space-between 첫 행은 시작점, 마지막 행은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
space-around 각 행 위아래에 여백을 고르게 정렬
space-evenly 모든 여백을 고르게 정렬

start

  • 시작점을 기준으로 정렬한다.
.container {
    display: grid;
    height: 500px;
    width: 480px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    gap: 10px;
    align-content: start;
}
grid14

end

  • 끝점을 기준으로 정렬한다.
.container {
    display: grid;
    height: 500px;
    width: 480px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    gap: 10px;
    align-content: end;
}
grid15

center

  • 수직 방향 기준으로 container 중앙에 정렬한다.
.container {
    display: grid;
    height: 500px;
    width: 480px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    gap: 10px;
    align-content: center;
}
grid16

stretch

  • 열 축을 container 공간에 채우기 위해 그리드 콘텐츠를 늘린다.(기본값)
.container {
    display: grid;
    height: 500px;
    width: 480px;
    background-color: skyblue;
    grid-template-columns: repeat(3, 100px);
    gap: 10px;
    align-content: stretch;
}
grid17

space-between

  • 첫 행은 시작점에, 마지막 행은 끝점에 정렬되고 나머지 여백을 균등한 간격으로 정렬한다.
.container {
    display: grid;
    height: 500px;
    width: 480px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    gap: 10px;
    align-content: space-between;
}
grid18

space-around

  • 각 행 위아래 여백을 고르게 정렬한다.
.container {
    display: grid;
    height: 500px;
    width: 480px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    gap: 10px;
    align-content: space-around;
}
grid19

space-evenly

  • 모든 여백을 고르게 정렬한다.
.container {
    display: grid;
    height: 500px;
    width: 480px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    gap: 10px;
    align-content: space-evenly;
}
grid20

justify-content

justify-content 속성은 그리드 콘텐츠를 수평 방향(행 축) 기준으로 정렬한다.
그리드 콘텐츠의 너비가 container 너비보다 작아야 한다.


의미 기본값
normal stretch와 동일 normal
start 시작점으로 정렬
end 끝점으로 정렬
center 수평 방향 가운데 정렬
stretch 행 축을 container 공간에 채우기 위해 그리드 콘텐츠를 늘림
space-between 첫 열은 시작점, 마지막 열은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
space-around 각 열 좌우에 여백을 고르게 정렬
space-evenly 모든 여백을 고르게 정렬

start

  • 시작점을 기준으로 정렬한다.
.container {
    display: grid;
    height: 500px;
    width: 480px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    gap: 10px;
    justify-content: start;
}
grid21

end

  • 끝점을 기준으로 정렬한다.
.container {
    display: grid;
    height: 500px;
    width: 480px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    gap: 10px;
    justify-content: end;
}
grid22

center

  • 수평 방향 기준으로 container 중앙에 정렬한다.
.container {
    display: grid;
    height: 500px;
    width: 480px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    gap: 10px;
    justify-content: center;
}
grid23

stretch

  • 행 축을 container 공간에 채우기 위해 그리드 콘텐츠를 늘린다.(기본값)
.container {
    display: grid;
    height: 500px;
    width: 480px;
    background-color: skyblue;
    grid-template-columns: repeat(3, 100px);
    gap: 10px;
    justify-content: stretch;
}

space-between

  • 첫 열은 시작점에, 마지막 열은 끝점에 정렬되고 나머지 여백을 균등한 간격으로 정렬한다.
.container {
    display: grid;
    height: 500px;
    width: 480px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    gap: 10px;
    justify-content: space-between;
}
grid25

space-around

  • 각 열 좌우 여백을 고르게 정렬한다.
.container {
    display: grid;
    height: 500px;
    width: 480px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    gap: 10px;
    justify-content: space-around;
}
grid26

space-evenly

  • 모든 여백을 고르게 정렬한다.
.container {
    display: grid;
    height: 500px;
    width: 480px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    gap: 10px;
    justify-content: space-evenly;
}
grid27

place-content

place-content 속성은 align-contentjustify-content를 설정하기 위한 축약 속성이다.

.container {
    place-content: <align-content> <justify-content>;
}
.container {
  place-content: start space-evenly;
}
.container {
  align-content: start;
  justify-content: space-evenly;
}
.container {
  place-content: space-around;
}
.container {
  align-content: space-around;
  justify-content: space-around;
}

align-items

align-items 속성은 그리드 item들을 수직 방향(열 축) 기준으로 정렬한다.
그리드 item의 높이가 자신이 속한 그리드 셀의 높이보다 작아야 한다.


의미 기본값
normal stretch와 동일 normal
start 시작점으로 정렬
end 끝점으로 정렬
center 수직 방향 가운데 정렬
stretch 열 축을 채우기 위해 item을 늘림

start

  • 시작점을 기준으로 정렬한다.
.container {
    display: grid;
    width: 450px;
    height: 450px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
}
#item {
    border: 1px solid black;
    width: 100px;       
    height: 100px;    
    background-color: springgreen;
}
grid29

end

  • 끝점을 기준으로 정렬한다.
.container {
    display: grid;
    width: 450px;
    height: 450px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
}
#item {
    border: 1px solid black;
    width: 100px;       
    height: 100px;    
    background-color: springgreen;
}
grid30

center

  • 수직 방향 기준으로 가운데 정렬한다.
.container {
    display: grid;
    width: 450px;
    height: 450px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
}
#item {
    border: 1px solid black;
    width: 100px;       
    height: 100px;    
    background-color: springgreen;
}
grid31

stretch

  • 열 축을 채우기 위해 item을 늘린다.(기본값)
.container {
    display: grid;
    width: 450px;
    height: 450px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
}
#item {
    border: 1px solid black;
    width: 100px;           
    background-color: springgreen;
}
grid32

justify-items

justify-items 속성은 그리드 item들을 수평 방향(행 축) 기준으로 정렬한다.
그리드 item의 너비가 자신이 속한 그리드 셀의 너비보다 작아야 한다.


의미 기본값
normal stretch와 동일 normal
start 시작점으로 정렬
end 끝점으로 정렬
center 수평 방향 가운데 정렬
stretch 행 축을 채우기 위해 item을 늘림

start

: 시작점을 기준으로 정렬한다.

.container {
    display: grid;
    width: 450px;
    height: 450px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    justify-items: start;
}
#item {
    border: 1px solid black;
    width: 100px;       
    height: 100px;    
    background-color: springgreen;
}
grid33

end

  • 끝점을 기준으로 정렬한다.
.container {
    display: grid;
    width: 450px;
    height: 450px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    justify-items: end;
}
#item {
    border: 1px solid black;
    width: 100px;       
    height: 100px;    
    background-color: springgreen;
}
grid34

center

  • 수평 방향 기준으로 가운데 정렬한다.
.container {
    display: grid;
    width: 450px;
    height: 450px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
}
#item {
    border: 1px solid black;
    width: 100px;       
    height: 100px;    
    background-color: springgreen;
}
grid35

stretch

  • 행 축을 채우기 위해 item을 늘린다.(기본값)
.container {
    display: grid;
    width: 450px;
    height: 450px;
    background-color: skyblue;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    justify-items: stretch;
}
#item {
    border: 1px solid black;
    height: 100px;           
    background-color: springgreen;
}
grid36

place-items

place-items 속성은 align-itemsjustify-items를 설정하기 위한 축약 속성이다.

.container {
    place-items: <align-items> <justify-items>;
}
.container {
    place-items: start end;
}

.container {
    align-items: start;
    justify-items: end;
}
.container {
    place-items: center;
}

.container {
    align-items: center;
    justify-items: center;
}
반응형

'CSS' 카테고리의 다른 글

[CSS] 애니메이션(Animation)  (52) 2022.03.18
[CSS] Grid(2)  (39) 2022.03.17
[CSS] Flexbox(2)  (61) 2022.03.15
[CSS] Flexbox(1)  (81) 2022.03.14
[CSS] Transform  (65) 2022.03.13

댓글