프론트엔드 개발/HTML CSS

CSS - Grid (그리드)

snowman95 2021. 9. 8. 18:52
728x90
반응형

그리드

2차원(행/열) 레이아웃 도구이자 CSS 모듈이다.

 

 

지원 브라우저 별 버전

can i use 사이트에서 확인 가능하다.

 

CSS Grid Layout (level 1) | Can I use... Support tables for HTML5, CSS3, etc

Method of using a grid concept to lay out content, providing a mechanism for authors to divide available space for layout into columns and rows using a set of predictable sizing behaviors. Includes support for all grid-* properties and the fr unit. See als

caniuse.com

 

용어

  1. Grid Container
    display : grid가 적용되는 요소로 Grid Item 들을 포함하는 부모가 된다.
  2. Grid Item
    Grid Container의 자식이다.
    <div class="container">
  <div class="item"> </div>
  <div class="item"> </div>
</div>​
  3. Grid Line
    그리드의 수직선/수평선을 뜻한다. 맨 좌측끝 부터 1,2,3... 카운트 된다.
    수직선 = 열 격자선, 수평선 = 행 격자선
  4. Gird Shell
    인접한 4개의 Grid Line 사이의 공간을 뜻한다. Grid의 단일 단위이다.
  5. Grid Track
    2개의 Grid Line 사이의 공간이다. 행 또는 열로 생각하면 된다.
    수평선 a번 ~ 수평선 b번 → 행 (row)
    수직선 c번 ~ 수직선 d번 → 열 (column)

  6. Grid Area
    4개의 Grid Line으로 둘러싸인 전체 공간이다. 여러 Grid Shell로 구성될 수 있다.
  7. Grid Gap
    Grid Shell 사이의 간격

Display (그리드 컨테이너 정의)

.container {
  display: grid | inline-grid;
}
  • grid (기본값) : grid 레이아웃 적용
  • inline-grid : grid 레이아웃 적용, container 영역이 item에 딱 맞춰짐

 

 

Display (그리드 컨테이너 정의)

.container {
  display: grid | inline-grid;
}
  • grid (기본값) : 블록-level grid 레이아웃 적용
  • inline-grid : 인라인-level grid 레이아웃 적용

grid-template-rows, colums (그리드 행/열 정의)

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

 

  • track-size : 길이(px, auto), 백분율(%), 여유공간(fr) 등이 올 수 있다. (공백 구분)
    예를 들어 1fr 4개면 4개의 행 또는 열이 생성된다.
    이때 똑같은 1fr이 반복되므로, repeat(반복횟수, 반복값)를 써서 깔끔하게 작성가능하다.

    ※ fr (fraction)은 숫자 비율대로 grid track 크기를 나누는 단위 (1fr 4개면 1:1:1:1)
    (예시1 - repeat)
    .container {
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
}

    또한 px, auto, fr 단위를 섞어서 써도 된다.
    만약 1열의 크기는 고정시키고 나머지 부분만 조절하고 싶다면, 아래와 같이 하나만 px로 고정.
    (얘시2 - 혼용)
    .container {
  grid-template-columns: 100px 1fr 1fr 1fr
}

    만약 특정 범위 안에서만 크기가 변경되게 만들고 싶다면, minmax(최소값, 최대값)를 사용한다.
    아래 예시는 모든 grid 들이 최소한 100px 크기를 유지하고, 내용이 커지면 auto(자동)으로 늘어나게된다.
    (예시3 - minmax)
    .container {
  grid-template-columns: minmax(100px, auto)
}


  • line-name : grid line(수평선)에 지정한 이름
    grid line마다 이름을 붙여놓고 크기 조절을 해줄 수 있다.

    이름 붙이는 방법은 아래와 같다.
    1. 라인명에 접미사(-start, -end) 를 붙여서 지정하면 접미사 뗀 "라인명" 이라는 grid area에 적용이 된다.
    ex) main-start, main-end는 main영역에 적용
    .container {
  grid-template-columns: [라인명-start] 크기 [라인명-end] ...;
}
     그런데 
    (예시4 - line-name)
    .container {
  grid-template-columns: [main-start] 40px [content-start] 50px [content-end] 40px [main-end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [row2-start] auto [row2-end];
}

.a {
  grid-area: main;
}
.b {
  grid-area: content;
}


    2. grid-template-areas 으로 이름 붙이기
    이어지는 아래 내용 참고바람.

grid-template-areas (그리드 영역 정의)

.container {
  grid-template-areas:
    "<grid-area-name> | . | none | ..."
    ...
    "<grid-area-name> | . | none | ...";
}
  • grid-area-name : 그리드 영역의 이름
  • . : 마침표는 empty grid shell을 나타냄
  • none : grid area가 정의되지 않음.

    아래와 같이 미리 레이아웃을 그리므로 한눈에 보기도 좋고, 반응형 디자인 만들때도 매우 유용하다.
    .container {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "hd hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main main"
    "ft ft ft ft ft ft ft ft ft";
}
.header {
  border: 4px solid red;
  grid-area: hd;
}
.footer {
  border: 4px solid ;
  grid-area: ft;
}
.content {
  border: 4px solid blue;
  grid-area: main;
}
.sidebar {
  border: 4px solid green;
  grid-area: sd;
}

/* html */
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
  </div>
</body>

     

    Layout using named grid lines - CSS: Cascading Style Sheets | MDN

    이전 가이드에선 그리드 트랙을 정의하면 생성되는 라인을 사용해서 아이템을 배치하는 법을 살펴보았으며, 또한 이름이 명명된 템플릿 영역을 가지고 어떻게 아이템들을 배치하는지도 알아

    developer.mozilla.org


    참고
    repeat(auto-fill, minmax(min-content, 250px)); 
    이런 식으로도 합쳐서 사용하기도 하는데

    auto-fill과 auto-fit은 차이점은 뭘까?
    그리드 컨테이너가 하나의 행/열(Track)에 모든 아이템을 수용하고 남는 공간이 있을 때 발생한다. auto-fill은 남는 공간(빈 트랙)을 그대로 유지하고, auto-fit은 남는 공간을 축소합니다.

    minmax는 창 크기변했을때 각 그리드 요소들의 최소크기/최대크기를 지정하는 것이다.

grid-template (grid-template-rows + columns + area)

.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

grid-template는 rows,columns,area 3가지를 한번에 작성하는 방법이다.

 

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

위의 구문은 아래와 동일하다.

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

아래와 같이 line-name없이 작성해도 된다.

.container {
  grid-template:
    "a a a" 40px
    "b c c" 40px
    "b c c" 40px / 1fr 1fr 1fr;
}

ㅊdge 16, Chrome66 이상 등... 에서 지원됨.

2021/09/08 기준

 

"column-gap" | Can I use... Support tables for HTML5, CSS3, etc

gap property for Flexbox `gap` for flexbox containers to create gaps/gutters between flex items

caniuse.com

예를 들어 2x4 그리드에 gap을 추가해주면 아래와 같이 gap이 생긴다.

.container {
  list-style: none;
  display: inline-grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 5px;
  row-gap: 5px;
}

정렬

정렬 부분을 시작하기 전에 개인적으로 헷갈린 부분 짚고 넘어가려 한다.
-content 가 붙은 것은 블록단위가 컨테이너인 정렬
-items 가 붙은 것은블록단위가 각 item인 정렬

 

Flexbox

  • justify-content : 메인 축 정렬 (블록단위 : 컨테이너)
  • align-items : 크로스 축 정렬 (블록단위 : 각 item)
  • align-content : 크로스 축 정렬 (flex-wrap : wrap 에서만 동작) (블록단위 : 컨테이너)

Grid

  • justify-items : 가로 방향 정렬 (블록단위 : 각 item)
  • align-items : 세로 방향 정렬 (블록단위 : 각 item)
  • justify-content : 가로 방향 정렬 (블록단위 : 컨테이너)
  • align-content : 세로 방향 정렬 (블록단위 : 컨테이너)

 

justify-items (가로 방향 정렬,  블록단위 : 각 item)

.container {
  justify-items: start | end | center | stretch;
}
  • stretch (기본값) : 늘리기 (item의 width: auto 일 때만 적용됨)
  • start : 시작 가장자리로 정렬
  • end : 끝 가장자리로 정렬
  • center : 중앙으로 정렬

align-items (세로 방향 정렬,  블록단위 : 각 item)

.container {
  align-items: start | end | center | stretch;
}

flexbox에서는 justify-content(메인 축 정렬), align-items(크로스 축 정렬), justify-items(wrap된 요소들의 정렬)

grid에서는 justify-items(가로 방향 정렬), align-items(세로 방향 정렬)

  • stretch (기본값) : 늘리기 (item의 height: auto 일 때만 적용됨)
  • start : 시작 가장자리로 정렬
  • end : 끝 가장자리로 정렬
  • center : 중앙으로 정렬

justify-content (가로 방향 정렬,  블록단위 : 컨테이너)

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}
  1. stretch (기본값) : 끝까지 늘림 (grid-template-colums 값이 고정 단위면 적용안됨)
  2. start : 컨테이너의 시작 부분으로 배치됨
  3. end : 컨테이너 끝 부분으로 배치됨
  4. center : 컨테이너 중앙에 배치됨
  5. space-around : item 주변에 동일한 여백으로 배치
  6. space-between : 양끝 부분을 밀착시키고 중간 item들을 동일 간격 배치
  7. space-evnely : 양끝을 포함한 모든 여백을 동일하게


align-content (세로 방향 정렬,  블록단위 : 컨테이너)

.container {
  align-items: start | end | center | stretch;
}
  1. stretch (기본값) : 끝까지 늘림 (item값이 height: auto여야 적용됨)
  2. start : 컨테이너의 시작 부분으로 배치됨
  3. end : 컨테이너 끝 부분으로 배치됨
  4. center : 컨테이너 중앙에 배치됨
  5. space-around
  6. space-between
  7. space-evnely

place-content (align-content + justify-content, 블록단위 : 컨테이너)

.container {
  place-content: <align-content> / <justify-content>
}
.container {
  place-content: start / center
}

 

 

grid-auto-columns, rows (암시적 grid track 크기 설정)

.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}
  • track-size : 암시적 그리드 트렉의 크기.
    기본적으로 암시적 grid track 크기는 grid-template-columns/rows에 설정된 값을 따라가는데 크기를 따로 설정해주고 싶을 때 사용한다.

auto-fill과 auto-fit은 차이점은 그리드 컨테이너가 하나의 행/열(Track)에 모든 아이템을 수용하고 남는 공간이 있을 때 발생합니다.
다음과 같이 auto-fill은 남는 공간(빈 트랙)을 그대로 유지하고, auto-fit은 남는 공간을 축소합니다.

 

 

※ 암시적 grid track (자동 생성된 grid track) : 사용자가 설정하지 않은 임의의 트렉이 만들어지는 것.
예를 들어 grid-template로 설정된 레이아웃 크기를 벗어나는 값을 grid-row, grid-column 를 통해 가리키면 임의의 트렉이 추가된다. 이를 암시적 grid track이라 함. 

 

grid-auto-flow (미배치된 grid-area를 포함한 item을 배치하는 알고리즘 작동 방식 제어)

.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}
  • row (기본값) : 각 행을 차례로 채우고, 필요에 따라 새 행을 추가
  • column : 각 열을 차례로 채우고, 필요에 따라 새 행을 추가
  • row dense (dense) : (빈영역을 최대한 채우며) 각 행을 차례로 채우는데, 필요에 따라 새 행을 추가
  • column dense : (빈영역을 최대한 채우며) 각 열을 차례로 채우고, 필요에 따라 새 열을 추가

 

grid (grid-template-rows, columns, areas +  grid-auto-rows, columns, flow)

.container {
  grid: <grid-template>;
  grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;
  grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;
}
.container {
  grid: auto-flow dense 100px / 1fr 2fr;
}
/* 위와 동일한 구문임*/
.container {
  grid-auto-flow: row dense;
  grid-auto-rows: 100px;
  grid-template-columns: 1fr 2fr;
}
  • none : 모든 하위 속성을 초기값 설정
  • grid-template
  • grid-template-rows / [auto-flow && dense?] grid-auto-columns
  • [auto-flow && dense?] grid-auto-rows? / grid-template-columns

 

grid-column-start, end / grid-row-start, end (grid item 위치 결정)

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}
  • line : grid line 번호 또는 line을 참조하는 이름
    a번 부터 b번 까지 라는 뜻.
    .item {
  grid-column-start:1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
  • span number : number 만큼 line을 확장 (default : 1)
    a번 부터 +number 만큼 이라는 뜻
  • span name : 라인을 참조하는 이름을 사용함. 동작은 위와 동일
    .item {
  grid-column-start:1;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 1;
}
    물론  -로 확장도 가능함. (끝이 3이고 3-2=1까지)
  • .item { grid-column-start: span 2; grid-column-end: 3; }
  • auto : 자동 배치, 자동 범위 or 기본 범위

grid-column (grid-column-start + end)
grid-row (grid-row-start + end)

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

start 와 end를 한꺼번에 작성하는 방식이다.

 

grid-area (grid-template-areas 에서 참조하도록 item에 이름 붙이기)

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

container에 grid-template-areas에서 참조하는 이름이다.
원하는 item에 grid-area: header; 이런 식으로 붙이면 된다.

  • name : 선택한 이름
  • row-start / column-start / row-end / column-end (숫자 또는 이름) : 
    .item-d {
  grid-area: 1 / col4-start / last-line / 6;
}


justify-self (가로 방향 정렬, 블록 단위 : 단일 item)

.item {
  justify-self: start | end | center | stretch;
}
  • stretch (기본값) : 늘리기
  • start : 시작점으로 정렬
  • end : 끝점으로 정렬
  • center : 중앙 정렬

align-self (세로 방향 정렬, 블록 단위 : 단일 item)

.item {
  align-self: start | end | center | stretch;
}
  • stretch (기본값) : 늘리기
  • start : 시작점으로 정렬
  • end : 끝점으로 정렬
  • center : 중앙 정렬

place-self (align-self + justify-self, 블록 단위 : 단일 item)

.item {
  align-self: <align-self> / <justify-self>
}

 

반응형
저작자표시 비영리 동일조건 (새창열림)