CSS) Grid Layout(display : grid)

geun·2023년 12월 31일

CSS display grid

CSS

목록 보기

6/12

CSS

Grid Layout

Grid Layout의 구성요소

Grid Container
grid layout의 전체 영역을 말한다.
Grid Line
Grid 셀을 구분하는 라인(가로, 세로 선)
Grid Track
Grid 라인의 각 행 혹은 열을 나타낸다.
Grid Cell
Grid 라인의 하나의 셀(칸)을 나타낸다.
Grid Area
Grid 라인으로 둘러싸인 영역으로, Grid Cell의 집합을 나타낸다.

Grid Layout 형태 정의

grid-template

grid-template-rows : Gird Track의 row(행)의 배치를 결정한다.
grid-template-columns : Gird Track의 columns(열)의 배치를 결정한다.
repeat 함수 : repeat(반복횟수, 반복값) 을 이용하여, 반복되는 값을 자동으로 처리할 수 있다.
minmax 함수 : minmax(최소크기, 최대크기) 함수를 이용해 최소 크기와 최대 크기를 지정할 수 있다.
grid-gap : Grid Cell 간의 간격을 설정하기 위해 사용한다.

auto-fit과 auto-fill

auto-fill, auto-fit은 repeat함수와 함께 사용되며, column의 개수를 미리 정하지 않고, 설정된 크기가 허용되는 한 최대한 Grid-Cell을 채운다.

auto-fill : 설정된 너비가 허용하는 한 최대한 셀을 채우게 되며, 공간이 남아도 크기가 변하지 않는다.
auto-fit : Grid Container 내부에 공간이 남을 경우, 그 공간을 각 셀들이 나눠가진다.

.cf) Grid Track 의 이름은 사용자가 임의로 설정한 Linename([name])을 사용할 수도 있다.
ex)

.container {
	grid-template-rows: [row-1] 100px [rows-1-end row-2-start] 30% [row-2-end];
}

Grid Layout에서 각 셀의 영역 지정

grid-column-start : n
grid-column-end : m
grid-column : n
grid-row-start : m 을 이용하여 각 셀의 영역을 지정할 수 있다.
각각을 grid-column : n/m, grid-row : n/m 으로 한번에 적용할 수도 있다.

정렬 관련

Justify Content, Align Items, Order 관련 내용은 flexbox와 거의 동일하니

https://velog.io/@geun99/CSS-Flexbox CSS FLEX 박스

글을 참조하자.

Grid-template-area와 Grid-area

Grid-template-area와 Grid-area를 이용해서 그리드를 정의할 수 있다.
ex)

다음과 같은 Grid 레이아웃을 만들기 위해서는

.container {
  background: rgb(34, 34, 34);
  padding: 20px;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(5, 100px);
  grid-template-rows: repeat(5, 100px);
  grid-gap: 10px;
  grid-template-areas:
    "h h h h"
    "m m m m"
    "m m m m"
    "s s . a"
    "f f f f";
}
header {
  grid-area : h
}

main {
  grid-area : m
}

section {
  grid-area : s
}

aside {
  grid-area : a
}

header {
  grid-area : h
}