그리드 레이아웃 시스템

Notice

Recent Posts

Recent Comments

Link

« 2025/06 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Tags more

Archives

Today

Total

관리 메뉴

코딩하는 김딸기

그리드 레이아웃 시스템 본문

카테고리 없음

그리드 레이아웃 시스템

김딸기* 2024. 8. 20. 18:57

그리드-> 부모 요소에서 템플릿을 지정하는 것

auto ->column기준에서, 내부컨텐츠 너비+stretch(컨텐츠 제외하고 가용공간을 n등분)

1fr -> 그리드 커테이너 너비 기준에서 내부 컨텐츠 관계없이 비율로 책정( 컨텐츠 포함해 무조건 n등분)

1. grid-template-columns

역할: 그리드의 열의 크기와 개수를 명시적으로 정의합니다.

.container {

display: grid;

grid-template-columns: 100px 200px 1fr;

}

해석:

이 예제에서 .container는 3개의 열을 가진 그리드 컨테이너입니다.
첫 번째 열의 너비는 100px로 고정되어 있습니다.
두 번째 열의 너비는 200px로 고정되어 있습니다.
세 번째 열은 1fr로 설정되어 있으며, 이는 가용 가능한 나머지 공간을 차지하도록 합니다.

2. grid-template-rows

역할: 그리드의 행의 크기와 개수를 명시적으로 정의합니다.

.container {

display: grid;

grid-template-rows: 50px auto 1fr;

}

해석:

이 예제에서 .container는 3개의 행을 가진 그리드 컨테이너입니다.
첫 번째 행의 높이는 50px로 고정되어 있습니다.
두 번째 행의 높이는 auto로 설정되어, 그 행에 포함된 콘텐츠의 높이에 따라 크기가 자동으로 결정됩니다.
세 번째 행은 1fr로 설정되어 있으며, 이는 가용 가능한 나머지 공간을 차지하도록 합니다.

3. grid-auto-columns

역할: 그리드 템플릿에서 명시되지 않은 열이 자동으로 생성될 때 그 열의 크기를 정의합니다.

.container {

display: grid;

grid-template-columns: 100px;

grid-auto-columns: 150px;

}

해석:

이 예제에서 .container는 최소 하나의 열을 가지고 있으며, 첫 번째 열의 너비는 100px입니다.
만약 그리드 항목이 두 번째 열에 배치되지만, grid-template-columns에서 두 번째 열의 크기가 명시되지 않았다면, grid-auto-columns 속성이 적용됩니다.
이 경우, 자동으로 생성되는 두 번째 열의 크기는 150px로 설정됩니다.

예시에서의 동작:

만약 .container에 자식 요소가 세 개라면, 첫 번째 요소는 100px 너비의 첫 번째 열에, 두 번째 요소는 150px 너비의 자동 생성된 두 번째 열에 배치됩니다. 세 번째 요소도 추가적으로 150px 너비의 자동 생성된 열에 배치됩니다.

4. grid-auto-rows

역할: 그리드 템플릿에서 명시되지 않은 행이 자동으로 생성될 때 그 행의 크기를 정의합니다.

.container {

display: grid;

grid-template-rows: 50px;

grid-auto-rows: auto;

}

해석:

이 예제에서 .container는 최소 하나의 행을 가지고 있으며, 첫 번째 행의 높이는 50px로 설정되어 있습니다.
만약 그리드 항목이 두 번째 행에 배치되지만, grid-template-rows에서 두 번째 행의 크기가 명시되지 않았다면, grid-auto-rows 속성이 적용됩니다.
이 경우, 자동으로 생성되는 두 번째 행의 크기는 auto로 설정되어, 그 행에 포함된 콘텐츠의 높이에 따라 크기가 결정됩니다.

예시에서의 동작:

만약 첫 번째 행 아래에 더 많은 그리드 항목이 배치되어 추가적인 행이 필요하다면, 이 추가 행의 높이는 콘텐츠의 높이에 따라 결정됩니다. 예를 들어, 추가 행의 내용물이 80px 높이라면, 그 행의 높이는 80px이 됩니다.

종합 예시

다음은 위의 속성들을 모두 사용한 종합 예시입니다:

.container {

display: grid;

grid-template-columns: 100px 1fr;

grid-template-rows: 50px;

grid-auto-columns: 150px;

grid-auto-rows: auto;

}

해석:

이 .container는 기본적으로 2개의 열과 1개의 행을 가지고 있습니다.
- 첫 번째 열은 100px 너비를 가집니다.
- 두 번째 열은 가용 가능한 나머지 공간을 차지합니다.
- 첫 번째 행의 높이는 50px로 고정되어 있습니다.
만약 그리드 항목이 두 번째 열 또는 추가적인 행에 배치되어야 할 경우:
- 새로운 열이 필요하면, 그 열은 150px 너비로 자동 생성됩니다.
- 새로운 행이 필요하면, 그 행의 높이는 auto로 설정되어 콘텐츠에 맞게 조정됩니다.

이러한 방식으로 grid-template-columns, grid-template-rows, grid-auto-columns, grid-auto-rows 속성을 조합하여, 그리드 레이아웃에서 열과 행을 유연하게 정의하고 관리할 수 있습니다.

예제)

display: grid;

grid-template-columns: 1fr 1fr 1fr;/*열 개수만큼 추가가능*/

grid-template-rows: none;

/*정렬 초기값*/

justify-items: stretch;/*가로축(너비)*/

align-items: stretch;/*세로축(높이)*/

grid-auto-columns: auto;/*내부 컨텐츠 너비+ justify-items 에 의해 stretch되는 값*/

grid-auto-rows: auto;/*내부 컨텐츠 높이 + align-items 에 의해 stretch되는 값*/

display: grid;
- 이 속성은 요소를 CSS Grid 컨테이너로 만듭니다. 그리드는 행과 열로 구성된 레이아웃 시스템을 정의하며, 그 안의 자식 요소들을 그리드 아이템으로 취급합니다.
grid-template-columns: 1fr 1fr 1fr;
- 이 속성은 그리드 컨테이너 안에 3개의 열(column)을 정의합니다. 각각의 열은 1fr이라는 단위를 가지며, fr은 "fraction"의 약자로, 사용 가능한 공간의 비율을 의미합니다.
- 여기서 1fr 1fr 1fr은 전체 가용 너비를 3등분하여 각 열이 동일한 비율을 차지하도록 설정합니다.
- 열의 개수를 더 추가하고 싶다면 1fr을 원하는 개수만큼 추가하면 됩니다.
grid-template-rows: none;
- 이 속성은 그리드의 행(row)을 정의하는 데 사용됩니다. 그러나 여기서 none으로 설정되어 있으므로 명시적으로 행을 정의하지 않습니다.
- 행의 크기는 자동으로 결정되거나, 그리드 아이템이 채워지는 방식에 따라 동적으로 설정됩니다.
justify-items: stretch;
- 이 속성은 그리드 아이템을 가로축(수평 방향)에서 어떻게 정렬할지를 정의합니다.
- stretch는 그리드 아이템이 해당 열의 너비에 맞도록 늘어남을 의미합니다. 따라서, 그리드 아이템의 너비는 열의 너비와 동일하게 됩니다.
align-items: stretch;
- 이 속성은 그리드 아이템을 세로축(수직 방향)에서 어떻게 정렬할지를 정의합니다.
- stretch는 그리드 아이템이 해당 행의 높이에 맞도록 늘어남을 의미합니다. 따라서, 그리드 아이템의 높이는 행의 높이와 동일하게 됩니다.
grid-auto-columns: auto;
- 이 속성은 그리드 컨테이너에 새로운 열이 자동으로 추가될 때 그 열의 너비를 결정합니다.
- auto로 설정되었으므로, 그리드 아이템의 내용에 따라 열의 너비가 자동으로 결정됩니다.
grid-auto-rows: auto;
- 이 속성은 그리드 컨테이너에 새로운 행이 자동으로 추가될 때 그 행의 높이를 결정합니다.
- auto로 설정되었으므로, 그리드 아이템의 내용에 따라 행의 높이가 자동으로 결정됩니다.

이론 설명

CSS Grid 레이아웃:
- CSS Grid는 웹 레이아웃을 행과 열로 구성할 수 있는 강력한 도구입니다. 그리드를 사용하면 페이지의 레이아웃을 보다 정교하게 구성할 수 있습니다.
- grid-template-columns와 grid-template-rows는 각각 그리드의 열과 행을 정의하는 속성입니다. 이를 통해 그리드 컨테이너가 얼마나 많은 열과 행을 가질지, 그 크기는 어떻게 설정될지 결정합니다.
fr 단위:
- fr은 Grid 레이아웃에서 사용되는 단위로, 가용 공간의 비율을 나타냅니다. 예를 들어, 1fr은 가용 공간의 1등분을 의미합니다.
justify-items 및 align-items:
- 이 두 속성은 그리드 아이템의 정렬 방식을 결정합니다. stretch 값은 그리드 아이템이 그리드 셀의 크기에 맞게 늘어나도록 합니다. 이 값은 그리드 셀의 크기에 따라 자동으로 아이템의 크기가 결정되므로, 일관된 레이아웃을 유지할 수 있습니다.
grid-auto-columns 및 grid-auto-rows:
- 이 속성들은 그리드에 새로운 열이나 행이 자동으로 추가될 때 그 크기를 정의합니다. auto로 설정된 경우, 그리드 아이템의 내용에 따라 크기가 자동으로 결정됩니다.

이 코드는 기본적으로 3열의 그리드 레이아웃을 정의하고, 그리드 아이템들이 그리드 셀의 크기에 맞게 자동으로 늘어나도록 설정하고 있습니다. 추가적인 열과 행은 자동으로 생성될 수 있으며, 이때 그 크기는 내용에 따라 결정됩니다.

height: 400px;

width: 980px;

gap: 10px;

grid-template-columns:1fr 1fr;/*열 개수만큼 추가가능*/

grid-template-rows: 1fr 1fr;

/*정렬 초기값*/

justify-items: stretch;/*가로축(너비)*/

align-items: stretch;/*세로축(높이)*/

grid-auto-columns: auto;/*내부 컨텐츠 너비*/

grid-auto-rows: auto;/*내부 컨텐츠 높이*/

그리드 컨테이너의 높이를 400픽셀, 너비를 980픽셀로 설정.
그리드 아이템들 사이의 간격을 10픽셀로 설정.
2개의 열과 2개의 행을 각각 동일한 비율(1fr)로 설정.
그리드 아이템을 가로와 세로로 셀의 크기에 맞게 늘어지도록 설정. ->정렬 초기값이 stretch
자동으로 추가되는 열과 행의 크기를 내용에 따라 자동으로 설정.->내부 컨텐츠 크기(너비, 높이)만큼 stretch됨

내부 컨텐츠에 너비가 조정되길 원하지 않는다면 1fr (그냥 n등분) / 아니라면 auto (가용공간 n등분)

그리드 컨테이너 집중식 레이아웃 관리

그리드 레이아웃 시스템은 그리드 컨테이너(부모 요소)에서 대부분의 레이아웃 작업이 이루어지며, 자식 요소들에 추가적인 레이아웃 관련 작업이 최소화될 수 있게 설계 되었습니다.

그리드 컨테이너 (부모 요소) 집중식 레이아웃 관리: 그리드 컨테이너가 레이아웃의 중심이 됩니다. 대부분의 레이아웃 정의와 조정이 그리드 컨테이너 (부모 요소) 수준에서 이루어집니다.
자식 요소의 단순화: 개별 그리드 아이템(자식 요소)에 대한 직접적인 레이아웃 조작이 크게 줄어듭니다.
마크업 간소화: 레이아웃을 위한 추가적인 마크업 요소나 복잡한 중첩 구조가 필요 없어집니다. 결과적으로 HTML 구조가 더 간결하게 구성 될 수 있습니다.

위와 같은 내용이 언제나 장점으로 발현되는 것은 아닙니다. 기존 방식대로, 개별 하위 아이템 위주로 레이아웃을 구성하는 것이 더욱 효과적일 때도 있습니다.

justify/align-content와 justify/align-item의 차이

justify-content가 stretch일 경우 원룸(컨테이닝 블럭) 자체의 너비를 최대치로 설정된 것이고 justify-item이 stretch일 경우 원룸내부에서늬 컨텐츠 너비를 최대치로 설정한 것이다.

즉 justify/ align -content는 전체 부모 컨테이너(원룸 자체)에서의 정렬을 설정하고 justify/align-items는각 컨테이닝 블럭내부(원룸내부)에서의 정렬을 설정한다

-grid-template-rows에서의 값이 1fr일 경우, 모든 아이템이 다 1fr단위로 되어있으므로 x-content 정렬은 의미가 없어짐

하위 요소가 배치될 가상의 컨테이닝 블록을 만들어 낸다

<div class="grid-container">
  <!-- 비어 있음 -->
</div>

.grid-container {
  width: 980px;
  margin: 0 auto;
  border-radius: 20px;
  background-color: #84FFB7;
  padding: 10px;
  display: grid;
  aspect-ratio: 1/1; /* 1:1 비율의 div요소를 만듦 */ 
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

그리드 컨테이너(부모 요소)의 grid-template-*속성에 의해, 3 * 3, 총 9개의 컨테이닝 블록이 만들어지게 됩니다. 이 컨테이닝 블록은 실제 요소가 배치되는 기준이 되는 컨테이닝 블록 입니다. 요소 검사 기능을 통해 실제 하위 요소 마크업 없이 만들어진 컨테이닝 블록을 확인 할 수 있습니다.
이제 .grid-container하위에 추가될 요소는 이 가상의 컨테이닝 블록 기준으로 크기와 위치가 결정 됩니다.

<div class="grid-container">
  <!-- 9개의 실제 그리드 아이템 추가 -->
  <div class="component">Item</div>
  <div class="component">Item</div>
  <div class="component">Item</div>
  <div class="component">Item</div>
  <div class="component">Item</div>
  <div class="component">Item</div>
  <div class="component">Item</div>
  <div class="component">Item</div>
  <div class="component">Item</div>
</div>

.component {
    background-color: #FFF955;
    color: #DF7C0C;
    font-size: 40px;
    border: 6px solid #FFAE58;
    border-radius: 10px;
    box-sizing: border-box;
    /* 해당 요소의 크기가 어떤 기준으로 만들어지는지 관찰 */
    width: 50%;
    height: 50%;  
}

이제 실제 하위 요소를 추가 해보도록 하겠습니다.
그리드 컨테이너 (부모 요소)에 지정 할 수 있는 justify-items, align-items 속성이 있습니다. 해당 속성의 초기값은 normal이고 stretch로 계산되어 집니다. 즉, 최초의 이 하위 요소는 모두 각각의 컨테이닝 블록 기준으로 가득 찬 상태가 됩니다.

.grid-container {
  width: 980px;
  margin: 0 auto;
  border-radius: 20px;
  background-color: #84FFB7;
  padding: 10px;
  display: grid;
  aspect-ratio: 1/1; /* 1:1 비율의 div요소를 만듦 */ 
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  /* 각각의 컨테이닝 블록 기준에서 하위 요소 정렬 */
  justify-items: center;
  align-items: center;
}