본문 바로가기
Languages/CSS3

[CSS] grid 정복기

dev-ini 2023. 5. 6. 16:52
728x90

   목차 

1. grid
2. 행과 열의 개념 
3. 2행 3열을 grid로 어떻게 표현하는지 알아보기
4. 위의 코드와 같은 표현법 알아보기 (2행 3열)
5. 각 셀의 영역을 지정하는 법
6. grid를 이용해서 시안대로 배치하기
7. grid-template-areas (아주 직관적인 방법)

 

 

 grid 

 

grid를 알면 flex나 position보다 훨씬 쉽게 배치가 가능해진다
grid도 파고들면 복잡하긴 하지만... 복잡한 건 싫으니까 최대한 쉽게쉽게 알아보자.

 

 

 

 

행과 열의 개념

 

행(가로) row 행거는 가로로 걸고  →
                                                 →

 

열(세로) column 열은 세로줄에 맞춘다  ↓ ↓ ↓

 

 

 

2행(가로2줄) 3열(세로 3줄)

 

 

 

 

 

2행 3열을 grid로 어떻게 표현하는지 알아보기

 

HTML

<div class=container>
 <div class=group1>1 </div>
 <div class=group2>2</div>
 <div class=group3>3</div>
 <div class=group4>4</div>
 <div class=group5>5</div>
 <div class=group6>6</div>
</div>

 

CSS

.container {
  width: 600px;
  height: 100px;
  display: grid; 
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}

.group1 {background: gold;}
.group2 {background: pink;}
.group3 {background: lightgreen;}
.group4 {background: skyblue;}
.group5 {background: salmon;}
.group6 {background: violet;}

grid-template-rows: 1fr 1fr (2행) / grid-template-columns: 1fr 1fr 1fr (3열)

 

 

 

 

위의 코드와 같은 표현법 알아보기 (2행 3열)

 

2행
grid-template-rows: 1fr 1fr;
grid-template-rows: repeat(2, 1fr);    // 1fr을 2번 반복하겠다
grid-template-rows: auto auto;   // auto로 설정도 가능하다
grid-template-rows: 50px 50px;   // 단위 지정도 가능하다 (height: 100px이면 50px씩 2칸으로 나뉨)
grid-template-rows: 50px auto;   // auto와 섞어서 쓸 수도 있다
grid-template-rows: 50px 1fr;   // 1fr와 섞어서 쓸 수도 있다

 

columns도 마찬가지이다.

 

3열
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);    // 1fr을 3번 반복하겠다
grid-template-columns: auto auto auto;   // auto로 설정도 가능하다
grid-template-columns: 200px 200px 200px ;   // 단위 지정도 가능하다(width:600px이면 200px씩 3칸으로 나뉨)
grid-template-columns: 200px auto auto;   // auto와 섞어서 쓸 수도 있다
grid-template-columns: 200px 1fr 1fr;   // 1fr와 섞어서 쓸 수도 있다

 

 

 

각 셀의 영역을 지정하는 법

 

grid-row-start: 행(가로)의 출발점
grid-row-end: 행(가로)의 도착점
grid-column-start: 열(세로)의 출발점
grid-column-end: 열(세로)의 도착점

.container {
  width: 600px;
  height: 100px;
  display: grid; 
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}

.group1 {background: silver;  border: 1px solid black;}
.group2 {background: silver;  border: 1px solid black;}
.group3 {background: silver;  border: 1px solid black;}
.group4 {background: silver;  border: 1px solid black;}
.group5 {background: silver;  border: 1px solid black;}
.group6 {background: silver;  border: 1px solid black;}

grid-template-rows: 1fr 1fr 1fr / grid-template-columns: 1fr 1fr 1fr (3행 3열)

 

 

지점은 다음과 같이 형성된다

 

 

만약  group1 박스에

.group1 {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 3;
}

이라고 적는다면,


아래와 같이 영역을 넓히겠다고 설정하는 것과 같다.

 

실제로 입력하면 다음과 같이 group1의 영역이 넓어진다 (빨간색으로 설정해봤다)

.container {
  width: 600px;
  height: 100px;
  display: grid; 
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}

.group1 {
  background: red;
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 3;
}

.group2 {background: silver;}
.group3 {background: silver;}
.group4 {background: silver;}
.group5 {background: silver;}
.group6 {background: silver;}

 

참고로, 


  grid-row-start: 1; 
  grid-row-end: 3; 
  grid-column-start: 1; 
  grid-column-end: 3; 

는 


 grid-row: 1 / 3;    (grid-row-start / grid-row-end) 
 grid-column: 1 / 3; (grid-column-start / grid-column-end)

와 같은 말이고,

 grid-area: 1 / 1 / 3  / 3;    (row-start / column-start / row-end / column-end)

으로 적는 것과 똑같은 의미다. 보통 코드는 이런식으로 줄여서 작성한다.

 

 

 

grid를 이용해서 시안대로 배치하기

 

이제 실전으로 들어가서, 아래의 시안을 grid로 배치해볼 것이다.

 

 

시안을 어떻게 쪼갤지 분석해본다.

 

행은 3열 (빨간색) 
열은 추천서적과 게시판 사이의 여백(5번칸) 기준으로 쪼개니 12열로 나눠진다. (파란색)

 

HTML

<div class=container>
<div class=추천서적> 추천서적</div>
<div class=새소식> 새소식</div>
<div class=게시판> 게시판</div>
<div class=트위터> 트위터</div>
<div class=인기사이트> 인기사이트 </div>
</div>

 

CSS

.container {
  border: 2px solid black;
  display: grid; 
  grid-template-rows: repeat(3,200px);
  grid-template-columns: repeat(12, 1fr)
}

.추천서적 {
  background: gold;
}

.새소식 {
  background: pink; 
}
  
.게시판 {
  background: lightgreen;
}

.트위터 {
  background: skyblue;
}

.인기사이트 {
  background: salmon;
}

 


분홍색(새소식) 부분을 1~2번 행(row), 1~13번 열(column)에 배치한다.

.container {
  border: 2px solid black;
  display: grid; 
  grid-template-rows: repeat(3,200px);
  grid-template-columns: repeat(12, 1fr)
}

.추천서적 {
  background: gold;
}

.새소식 {
  background: pink; 
  grid-row: 1 / 2;
  grid-column: 1 / 13;
  }
  
.게시판 {
  background: lightgreen;
}

.트위터 {
  background: skyblue;
}

.인기사이트 {
  background: salmon;
}

 

새소식에 grid-row: 1 / 2; grid-column: 1 / 13;

 

 

 

노란색(추천서적) 부분을 2~4번 행(row), 1~5번 열(column)에 배치한다.

.container {
  border: 2px solid black;
  display: grid; 
  grid-template-rows: repeat(3,200px);
  grid-template-columns: repeat(12, 1fr)
}

.추천서적 {
  background: gold;
  grid-row: 2 / 4;
  grid-column: 1 / 5;
}

.새소식 {
  background: pink; 
  grid-row: 1 / 2;
  grid-column: 1 / 13;

  }
  
.게시판 {
  background: lightgreen;
}

.트위터 {
  background: skyblue;
}

.인기사이트 {
  background: salmon;
}

추천서적에 grid-row: 2 / 4; grid-column: 1 / 5;


 

 

초록색(게시판) 부분을 3~4번 행(row), 6~13번 열(column)에 배치한다.

grid-area: 3 / 6 / 4 / 13;    (row-start / column-start / row-end / column-end)

.container {
  border: 2px solid black;
  display: grid; 
  grid-template-rows: repeat(3,200px);
  grid-template-columns: repeat(12, 1fr)
}

.추천서적 {
  background: gold;
  grid-row: 2 / 4;
  grid-column: 1 / 5;
 
}

.새소식 {
  background: pink; 
  grid-row: 1 / 2;
  grid-column: 1 / 13;

  }
  
.게시판 {
  background: lightgreen;
  grid-area: 3 / 6 / 4 / 13;
}

.트위터 {
  background: skyblue;
}

.인기사이트 {
  background: salmon;
}

게시판에 grid-area: 3 / 6 / 4 / 13;

 

 

 

파란색(트위터) 부분을 2-3번 행(row), 5~10번 열(column)에 배치한다.

grid-area: 2 / 5 / 3 / 10;    (row-start / column-start / row-end / column-end)

.container {
  border: 2px solid black;
  display: grid; 
  grid-template-rows: repeat(3,200px);
  grid-template-columns: repeat(12, 1fr)
}

.추천서적 {
  background: gold;
  grid-row: 2 / 4;
  grid-column: 1 / 5;
}

.새소식 {
  background: pink; 
  grid-row: 1 / 2;
  grid-column: 1 / 13;

  }
  
.게시판 {
  background: lightgreen;
  grid-area: 3 / 6 / 4 / 13;
}

.트위터 {
  background: skyblue;
  grid-area: 2 / 5 / 3 / 10;
}

.인기사이트 {
  background: salmon;
}

트위터에 grid-area: 2 / 5 / 3 / 10;

 

 

 

살몬색(인기사이트) 부분을 2-3번 행(row), 10~13번 열(column)에 배치한다.

grid-area: 2 / 10 / 3 / 13;    (row-start / column-start / row-end / column-end)

.container {
  border: 2px solid black;
  display: grid; 
  grid-template-rows: repeat(3,200px);
  grid-template-columns: repeat(12, 1fr)
}

.추천서적 {
  background: gold;
  grid-row: 2 / 4;
  grid-column: 1 / 5;
 
}

.새소식 {
  background: pink; 
  grid-row: 1 / 2;
  grid-column: 1 / 13;

  }
  
.게시판 {
  background: lightgreen;
  grid-area: 3 / 6 / 4 / 13;
}

.트위터 {
  background: skyblue;
  grid-area: 2 / 5 / 3 / 10;
}

.인기사이트 {
  background: salmon;
  grid-area: 2 / 10 / 3 / 13;
}

인기사이트에 grid-area: 2 / 10 / 3 / 13;

 

 

시안과 완성본 비교

 

 

grid-template-areas (아주 직관적인 방법)

 

위에처럼 단계별로 안해도 되는 아주아주 간단한 방법 (dog-honey-tip) 

 

1. container에 해당하는 영역을 차지하는 만큼 이름을 적어준다 (개수에 주의하기)
2. 빈영역은 . (마침표)나 none 으로 채운다.

 grid-template-areas:
"새소식 새소식 새소식 새소식 새소식 새소식 새소식 새소식 새소식 새소식 새소식 새소식"
"추천서적 추천서적 추천서적 추천서적 트위터 트위터 트위터 트위터 트위터 인기사이트 인기사이트 인기사이트"
"추천서적 추천서적 추천서적 추천서적 . 게시판 게시판 게시판 게시판 게시판 게시판 게시판";
}

 

3. grid item들에게 grid-area (그리드 영역 이름)을 지정해준다.

.추천서적 {
  grid-area:추천서적;
}

.새소식 {
 grid-area:새소식;
}
  
.게시판 {
 grid-area:게시판;
}

.트위터 {
 grid-area:트위터;
}

.인기사이트 {
 grid-area:인기사이트;
}

 

아래와 같이 작성한다.

.container {
  border: 2px solid black;
  display: grid; 
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3,200px);
  grid-template-areas:
"새소식 새소식 새소식 새소식 새소식 새소식 새소식 새소식 새소식 새소식 새소식 새소식"
"추천서적 추천서적 추천서적 추천서적 트위터 트위터 트위터 트위터 트위터 인기사이트 인기사이트 인기사이트"
"추천서적 추천서적 추천서적 추천서적 . 게시판 게시판 게시판 게시판 게시판 게시판 게시판";
}

.추천서적 {
  background: gold;
  grid-area:추천서적;
}

.새소식 {
  background: pink; 
  grid-area:새소식;
}
  
.게시판 {
  background: lightgreen;
  grid-area:게시판;
}

.트위터 {
  background: skyblue;
  grid-area:트위터;
}

.인기사이트 {
  background: salmon;
  grid-area:인기사이트;
}

아까와 같은 결과가 나온다!!!

 

 

참고 사이트
https://heropy.blog/2019/08/17/css-grid/
https://developer.mozilla.org/ko/docs/Web/CSS/grid
https://studiomeal.com/archives/533

 

 

728x90
저작자표시

'Languages > CSS3' 카테고리의 다른 글

[CSS] 마우스 hover 시에 붕 뜨는 효과 넣기 (JS 사용X)  (0) 2023.07.30
[CSS] position 정복기  (0) 2023.04.27
[CSS] flex 정복기  (0) 2023.04.27
[CSS] box-sizing (박스 사이징)  (1) 2023.04.27

'Languages/CSS3' Related Articles

티스토리툴바