CSS3 : Grid 레이아웃 1부 개념, 행/열 크기, repeat(), minmax() 함수

Grid란? 개념 정리

* 그리드는 반응형웹에 특화된 레이아웃입니다.

* FireFox 브라우저에서 테스트 시 쉽게 확인할 수 있습니다.(FF 개발자도구(F12) 활용)

* Flex는 1차원 웹디자인이 가능하며 Grid는 2차원 레이아웃을 사용합니다.

 

Flex 와 Grid 1차원/2차원 레이아웃 비교

Flex Layout : 1차원 (한 방향)	Grid Layout  : 2차원 (가로 세로 2 방향)

 

 

▼ 그리드를 활용한 우수 웹사이트 30개 모음 

https://www.awwwards.com/30-grid-based-websites.html

30 Grid-Based Websites

 

 

 

 

---

 

ⓒ 표시는 container 적용 속성입니다.

ⓘ 표시는 item 적용 속성입니다.

 

 

 

 

ⓒ Grid 선언과 적용 형태

* Grid는 display 속성을 사용합니다. (Flex와 동일)

* 블록(Block) 그리드와 인라인(inline) 그리드로 종류가 나뉩니다.

selector { display:flex; } /*flex의 경우*/
selector { display:inline-flex; } /*flex의 경우*/

selector ( display:grid; } /*grid의 경우*/
selector ( display:inline-grid; } /*grid의 경우*/

* grid가 선언된 부모(container) 기준으로 자식(item)까지만 item으로 인식합니다.

grid layout 구조

 

 

 

ⓒ Grid 템플릿 행/열

속성	값
grid-template-rows	track-size  사용 단위 : px, rem, em, %, fr  등
grid-template-columns

▼ 그리드 라인 사이 공간을 그리드 트랙이라고 합니다.

* 방향에 따라 row track 또는 column track 으로 나눠지게 됩니다.

* 아래 표에서 강조된 트랙은 row 3 / 4 그리드 라인 사이에 위치한 트랙입니다.

이미지출처 : https://yamoo9.gitbook.io/css-grid/css-grid-term

 

 

* (아래) 2행 3열의 grid 박스가 있습니다.

* grid는 행/열의 개수에 따라 2차원 구조로 원하는 값을 입력할 수 있다는 특징이 있습니다.

 

 

 

 

1. ⓒ Grid 행열 활용 예시 - 행(row) 크기 적용

row1, 2 사이에 위치한 row1 track / row 2, 3 사이에 위치한 row2 track

<div id="grid-container">
  <div class="grid-item item1">a</div>
  <div class="grid-item item2">b</div>
</div>

#grid-container {
  display:grid;
  grid-template-rows:50px 50px; /*1행 50, 2행 50*/
}

* 배치된 행의 개수에 따라 위->아래 row track 순서로 값을 입력합니다.

* 입력하지 않은 row track은 auto와 동일하게 인식합니다.

 

* 일정 값을 row track에 반복하고 싶다면 Repeat() 함수를 사용할 수 있습니다.

/*50px을 2개의 행에 반복한다*/
grid-template-rows:repeat(2,50px);

 

* 최소 제한너비와 최대 제한 너비를 minmax() 함수를 이용하여 작성할 수 있습니다.

* 모든 셀 최소 제한 너비 200px / 모든 셀 최대 제한 너비 자동(container의 나머지 공간 모두)

/*50px을 2개의 행에 반복한다*/
grid-template-rows:repeat(2, minmax(200px, auto));

 

 

* 작성 편의를 위해 각 행에 이름을 의미있게 지정하여 값을 설정할 수 있습니다.

/*row1 track 50px, row2 track 100px 적용*/
grid-template-rows:[row1 track] 50px [row2 track] 100px;

 

 

 

2. ⓒ Grid 행열 활용 예시 - 열(column) 크기 적용

column1, 2 사이에 위치한 column track 등

<div id="grid-container">
  <div class="grid-item item1">a</div>
  <div class="grid-item item2">b</div>
  <div class="grid-item item3"c</div>
</div>

#grid-container {
  display:grid;
  grid-template-columns:70px 100px auto;
}

* 배치된 열의 개수에 따라 왼쪽->오른쪽 순서로 값을 입력합니다.

▼ auto 처리 시 grid의 (block) or (inline)에 따라 결과 처리가 달라집니다.

▽ display:grid 적용 에서 column track 3을 auto 경우

▽ display:inline-grid 적용 에서 column track 3을 auto  경우

 

▼ auto를 입력하지 않으면 줄바꿈이 이루어지고 같은 수직 방향 column track과 크기를 동일하게 인식합니다.

▽ display:gird 적용 후 grid-template-columns:70px 100px; 경우

 

 

 

* 일정 값을 column track 반복하고 싶다면 Repeat() 함수를 사용할 수 있습니다.

/*50px을 3개의 열에 반복한다*/
grid-template-columns:repeat(3,50px);

 

* 최소 제한너비와 최대 제한 너비를 minmax() 함수를 이용하여 작성할 수 있습니다.

* 모든 셀 최소 제한 너비 100px / 모든 셀 최대 제한 너비 200px (그 이상 키우면 container의 빈 공간 처리)

/*50px을 3개의 열에 반복한다*/
grid-template-columns:repeat(3, minmax(100px, 200px));

 

 

* 작성 편의를 위해 각 열에 이름을 의미있게 지정하여 값을 설정할 수 있습니다.

/*name1 열에 50px, name2 열에 100px 적용*/
grid-template-columns:[name1] 50px [name2] 100px;

 

 

 

ⓒ Grid 행+열 동시 입력하기

< grid-template-columns > < grid-template-rows >

 

=> 열의 개수와 같은 개수로 값을 입력 시

grid-template-columns:50px 100px 150px;
grid-template-rows:100px;

 

 

 

ⓒ

=> 열의 개수보다 적은 개수로 값을 입력 시 

grid-template-columns:50px 50px;
grid-template-rows:repeat(2, 100px);

 

 

 

 

---

 

3. ⓒ Grid fr 단위 

* item 의 크기를 지정 시 고정 값이라면 px을 사용합니다.

* item 의 크기를 지정 시 그리드의 남은 공간을 일부 설정하고 싶다면 fr 단위를 사용합니다.

 

 

Grid container 안 item의 비율을 일정하게 설정하고 싶은 경우

grid-template-columns:repeat(3, 1fr);

▽ grid-template-columns:repeat(2, 100px) 설정의 경우

 

▽ grid-template-columns:repeat(2, 1fr) 설정의 경우

 

 

 

 

 

grid-template-columns:1fr 2fr;

 

 

 

* 필요에 따라 fr 단위와 px, % 등의 단위를 함께 활용할 수 있습니다.

grid-template-columns:1fr 100px;

 

 

 

Grid 2부  ▼

https://webty.tistory.com/154?category=880488 

CSS3 : Grid 레이아웃 2부 그리드 템플릿 + 속기형 속성 작성법