grid 02

beanlove97·2022년 4월 25일
0

TIL

목록 보기
53/60
post-thumbnail

CSS Grid layout에서 그리드 항목을 배치할 때, 가로와 세로를 모두 사용되기 때문에 2차원 레이아웃이라 말합니다.

grid container 지정

grid 레이아웃을 지정할 때에는 가장 먼저 grid를 적용할 요소의 바깥 부분을 grid container로 지정해야 합니다.

column와 row 지정

grid-template-columns
grid-template-row

grid container 안에 항목을 배치할 때 column와 row의 크기와 개수를 지정하기 위해 사용됩니다.

grid-template-columns : grid children을 몇 개의 column으로 배치할 지, 각 칼럼의 너비를 얼마로 할지 지정합니다.

.wrapper {
  display: grid; // grid container 지정
  grid-template-column: 200px 200px 200px; // 너비가 200px인 칼럼 3개
  grid-template-rows: 100px; // 줄 높이 100px
}

상대적인 사이즈(비율): fr단위

픽셀은 항상 크기가 고정되기 때문에 반응형 웹 디자인에는 적합하지 않습니다.
그래서 grid layout에서는 상대적인 크기를 지정할 수 있도록 fr fraction 단위를 사용합니다.

  • 너비가 동일한 칼럼 3개 배치: grid-template-column: 1fr 1fr 1fr;
  • 칼럼 너비를 2:1:2로 배치: grid-template-column: 2fr 1fr 2fr;

동일한 값 반복: repeat()

px이나 fr단위를 사용하면 똑같은 값을 반복해야 하지만, grid layout에서는 내장된 repeat() 이라는 함수를 사용하면 반복하지 않고 간단하게 표현이 가능합니다.

  • 함수사용이전: grid-template-column: 1fr 1fr 1fr;
  • repeat()함수 활용: grid-template-column: repeat(3, 1fr);

최솟값 & 최댓값 지정: minmax()

.wrapper {
  width: 600px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: minmax(100px, auto); // 줄 높이는 최소 100px
}

자동으로 칼럼 개수 조절: auto-fill & auto-fit

grid-template-columns: repeat(3, 1fr); 에서 repeat()함수를 사용해서 크기가 동일한 column을 반복할 땐 칼럼의 개수를 지정했습니다.

이때 칼럼의 너비값과 함께 auto-fit이나 auto-fill을 지정하면 → 화면 너비에 따라 카럼 개수를 조절할 수 있습니다.

  • 너비가 200px인 칼럼을 화면 너비에 가득 찰 때까지 반복: grid-template-columns: repeat(auto-fit, 200px);

공통점

auto-fit이나 auto-fill 모두 column 개수를 자동으로 조절해 주기 때문에
grid-container이 넓어지면 칼럼 개수는 많아지고 반대로 좁아지면 칼럼재수가 줄어듭니다.

차이점

남는 공간을 채울지 말지 여부가 다릅니다.

  • auto-fit : 화면이 넓을 때에는 남는 공간 없이 꽉 채워서 칼럼을 표시합니다.
  • auto-fill : 칼럼의 최소 너비만 표시하고 남는 공간은 그대로 둡니다.
.wrapper1 {
  display: grid;
  grid-template-column: repeat(auto-fit, minmax(200px, 1fr));
  margin-botton: 20px;
}

.wrapper2 {
  display: grid;
  grid-template-column: repeat(auto-fill. minmax(200px, 1fr));
}

해당 레이아웃의 경우 최소 너비는 200px입니다.

grid children의 간격 지정

gap

그리고 항목과 항목 사이의 간격을 조절하려면 아래와 같은 속성을 지정하면 됩니다.

  • grid-column-gap : 칼럼과 칼럼 사이의 간격을 지정합니다. (가로여백)
  • grid-row-gap : 줄과 줄 사이의 간격을 지정합니다. (세로여백)
  • grid-gap : 칼럼과 줄 사이의 간격을 한꺼번에 지정합니다.
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-gap: 20px 30px; //  줄간격 20px(세로여백), 칼럼간격 30px(가로여백)
}

justify-content

주축에서 항목간의 정렬방법을 지정합니다.

cf. 기타 flex 정렬방법
align-items: cross축 방향의 정렬방법입니다.
align-self: 교차축에 있는 개별 항목의 정렬 방법입니다.

align-content

cross축에서 여러 줄로 표시된 항목의 정렬 방법입니다.
여러 줄일 때 교차 축의 정렬 방법을 지정합니다.
주축에서 줄 바꿈이 생겨서 flex항목을 여러 줄로 표시할 때 교차축에서 flex항목간의 간격을 지정할 수있습니다.

grid line을 이용한 배치

만약 column 3개와 row 3개로 이루어진 grid layout이 있다면,
column line은 앞에서부터 차례로 1,2,3,4 번호가 매겨지는 4개를 가집니다.
반대로 row line에서도 총 4개의 line을 가집니다.

이러한 grid line을 이용하여 grid 항목을 배치할 수 있습니다.

  • grid-column-start : 칼럼 시작의 라인번호를 지정합니다.

  • grid-column-end : 칼럼 마지막의 라인번호를 지정합니다.

  • grid-column : 칼럼 시작번호와 칼럼 끝번호 사이에 슬래스 /를 넣어 사용합니다.

  • grid-row-start : 줄 시작의 라인번호를 지정합니다.

  • grid-row-end : 줄 마지막의 라인번호를 지정합니다.

  • grid-row : 줄 시작 번호와 줄 끝번호 사이에 슬래시 /를 넣어 사용합니다.

.wrapper {
  width: 700px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.child1 {
  grid-column: 1/4;
}

.child2 {
  grid-row: 2/4;
}

.child3 {
  grid-column: 2/4;
  grid-row-start: 2;
}

.child4 {
  grid-column-start: 3;
  grid-row-start: 3;
}

template-area

탬플릿 영역으로 항목을 배치하면 그리드 레이아웃을 만드는 것보다 쉽습니다.

먼저 grid-area 속성을 사용해서 각 영역에 탬플릿 이름을 지정해줍니다.

.child1 {
  grid-area: box1;
}

.child2 {
  grid-area: box2;
}

.child3 {
  grid-area: box3;
}

.child4 {
  grid-area: box4;
}

이어서 grid container요소에 grid-template-areas 속성을 사용해 템플릿 영역을 어떻게 배치할지 지정합니다.
템플릿 영역을 비워두려면 그 자리에 마침표 .를 넣으면 됩니다.
한 줄에 들어갈 템플릿 영역을 큰따옴표 " "로 묶으면 됩니다.
한 줄마다 줄 바꿈을 하면 마치 눈으로 보듯 템플릿 영역을 나열할 수 있어 좀 더 쉽게 작성이 가능합니다.

.wrapper {
  width: 700px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(3, 100px);
  grid-template-areas:
    "box1 box1 box1"
    "box2 box2 box2"
    "box2 . box4";
}
profile
새로운 것을 도전하고 노력한다

0개의 댓글