[css] Grid 레이아웃에 대해 배워보자

지난 게시물에서는 flex box에 대해 알아봤는데요, 

flex box 역시 간편한 속성이지만 격자 무늬를 만들기 어려운 단점이 존재합니다

이렇게 또 쇼핑몰 홍보를

https://www.day-na.com/product/list.html?cate_no=60

 

이런 식으로의 게시판, 쇼핑몰을 꾸미기 어렵기 때문에

Grid 라는 속성을 사용하게 됩니다.

그렇다면 Grid의 기본 문법에 대해 알아보겠습니다~!!

 

 

목차
1. grid는 부모 컴포넌트에서만 선언해야한다.
2. grid-template 사용하기
3. gap 사용하기
4. auto란?
5. grid-template-areas 사용하기
6.grid-column/grid-row 사용하기
-span 사용하기
7.fr 사용하기

 

1. grid는 부모 컴포넌트에서만 선언해야한다.

/* App.css */
.father {
  /*부모에서만 선언된 grid*/
  display: grid; 
  
  grid-template-columns: 600px 300px 150px;
  column-gap: 20px;
  gap: 10px;
}

.child{
  display: flex;
  height: 200px;
  background-color: orange;
  color: white;
  font-size: 30px;
}

 

 

 

 

 

 

2. grid-template 사용하기

 

 

 

• grid-template-columns: 각 열의 넓이를 설정해준다
• grid-template-columns: 600px 300px 150px;
• 첫 번째 열은 600px, 두 번째는 300px, 세 번째는 150px 넓이로 설정된다.

 

 

 

grid-template-columns이면 높이를 설정해줘야하는 거 아니야???
컬럼(열)이잖아! 
땡~

사진과 같이 첫 번째 열의 넓이, 두 번째 열의 넓이, 세 번째 열의 넓이를 지정해준다고 생각하는 게 쉽습니다

반대로 grid-template-rows는 첫 번째 행의 넓이, 두 번째 행의 넓이를 지정해주겠죠?

 

 

 

 

만약 grid-template-columns와 grid-template-rows에서  같은 값 px가 반복되는 경우, 

ex) grid-template-columns : 600px 600px 600px;

 => grid-template-columns: repeat(3, 600px);

 

repeat(개수, 크기)을 사용하여 코드를 간결하게 작성할 수 있다!

 

 

 

 

 

 

  column-gap: 90px;
  row-gap: 10px;

column-gap: 열 사이의 간격

row-gap: 행 사이의 간격

gap:50px;

gap을 사용하면 행, 열의 간격을 통일할 수 있습니다

auto란?
최대 크기로 설정되는 자동값

-auto 200px

만약 column을 4개로 구성할 때  auto만 사용할 경우

공간을 가득 채우면서 각각의 블록이 동등하게 가져가지만,

auto 200px의 경우, 두 번째 블록은 200px의 공간을 가져가고

나머지 공간을 3개의 블록이 동등하게 나눠가진다.

 

즉, 두 번째 그리드만 200px 적용이고, 

나머지 그리드는 auto가 적용되어 auto 200px auto auto와 같다

만약 auto 200px 100px면

auto 200px 100px auto와 같다

 

 

 Grid -Template -Areas

 

https://sorto.me/docs/Web/CSS/grid-template-areas

다음과 같이 개발자가 레이아웃의 변수명을 지어

grid-template-areas 안에 선언한 모양 그대로의 그리드 레이아웃을 만들어준다

 

규칙

 

1. 자식의 grid-area와 부모의 grid-template-areas의 이름은 같아야된다.

(css 자체의 class 이름과는 달라도 무관) 

2. 같은 영역은 서로 이어져야 한다. 

3. 이어져 있더라도 'ㄱ', 'ㄴ' 모양은 안된다. 모양이  직사각형이/정사각형일 때만 display된다.

4.  . 을 쓰면  공백이 된다.

 

 

/* App.css */
.grid {
  /*부모에서 선언된 grid*/
  display: grid; 
  /*grid-template-columns: 200px 200px 200px 200px ;*/
  grid-template-columns:auto 200px;
  grid-template-rows: 100px repeat(4, 500px) 100px;
  grid-template-areas:
  "header header header header"
  "content content . nav"
  "footer footer footer footer";
}

.header{
  background-color: #2ecc71;
  grid-area: header;
}

.content{
  background-color: #3498db;
  grid-area: content;
}
.nav{
  background-color: #8e44ad;
  grid-area: nav;
  }
.footer{
  background-color: #f39c12;
  grid-area: footer;
}

grid-area를 사용한 css코드

 

 

 

실행화면

 

 

 

 

grid-rows/gird-column 사용하기

 

 

grid-rows/column은 line을 기준으로(칸이 아니다!) 시작줄과 끝줄을 선언해서 

이만큼까지 차지하세요~ 라고 알려준다

/* App.css */
.grid {
  /*부모에서 선언된 grid*/
  display: grid; 
  /*grid-template-columns: 200px 200px 200px 200px ;*/
  grid-template-columns: repeat(4,100px);
  grid-template-rows: repeat(4, 100px);
}
.header{
  background-color: #2ecc71;
  /*첫 번째 열부터 5번째 열까지 차지*/
  grid-column-start: 1;
  grid-column-end: 5;
}

.content{
  background-color: #3498db;
}
.nav{
  background-color: #8e44ad;
  }
.footer{
  background-color: #f39c12;
}

첫번째 줄에서 5번째 줄까지 display

실행화면처럼 첫번째줄부터 5번째 줄까지 display된 모습을 볼 수 있다

/* App.css */
.grid {
  /*부모에서 선언된 grid*/
  display: grid; 
  /*grid-template-columns: 200px 200px 200px 200px ;*/
  grid-template-columns: repeat(4,100px);
  grid-template-rows: repeat(4, 100px);
  gap: 10px;
}
.header{
  background-color: #2ecc71;
  /*첫 번째 열(라인)부터 5번째 열(라인)까지 차지*/
  grid-column-start: 1;
  grid-column-end: 5;
}

.content{
  background-color: #3498db;
    /*첫 번째 행(라인)부터 3번째 행(라인)까지 차지*/
  grid-row-start: 1;
  grid-row-end: 3;
}
.nav{
  background-color: #8e44ad;
  }
.footer{
  background-color: #f39c12;
}

 

코드를 좀 더 간결하게 쓸 수 없을까??

 

 

 

 grid-column: 1/5;

를 사용하면 1번째 라인부터 5번째 라인까지 차지하게 된다

 

 

 

 

 

 

아 근데 줄 수 세는 것도 너무 어렵고.... 그냥 끝까지 만들고 싶은데..

 grid-column: 1 / -1;

-1은 끝이라는 의미로 끝까지 작성된다

 

 

 grid-column에서 span 사용하기

 

시작점/끝점을 작성하는 것 대신 span을 사용할 수 있다

span은 첫째줄부터 마지번째줄까지 지정해~! 라고 알려주는 게 아니고

cell  4개 차지해~ 라고 알려주는 것

 

.content {
  background-color: #3498db;
  /*첫 번째 행(라인)부터3개의 sell 차지*/
  grid-row: 2 / span 2;
    /*3개의 sell 차지*/
  grid-column:span 3;
}

사진과 같이 두번째 행부터 2개의 cell, 첫번째 열부터 3개의 cell을 차지한 content의 모습을 볼 수 있다 

 

fr 사용하기

fr은 fraction(부분)을 의미. pixel이나 %와 같은 측정 단위이다

/* App.css */
.grid {
  display: grid;
  
  /*1fr을 사용한 grid*/
  grid-template-columns: repeat(4, 1fr);
  
  
  grid-template-rows: repeat(4, 100px);
  gap: 10px;
}
.header {
  background-color: #2ecc71;
  grid-column: span 4;
}

.content {
  background-color: #3498db;
  grid-row: 2 / span 2;
  grid-column:span 3;
}
.nav {
  background-color: #8e44ad;
  grid-row:2/span 2;
}
.footer {
  background-color: #f39c12;
  grid-column: span 4;
}

fr는 grid에서 차지 가능한만큼 차지하게 된다.

만약, grid의 크기 자체가 작으면 그만큼만 차지하게된다.

/* App.css */
.grid {
  /*부모에서 선언된 grid*/
  display: grid;
    /*넓이가 500일 때의 그리드*/
  width: 500px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 100px);
  gap: 10px;
}

 

사진과 같이 500px에 꽉 차게 4등분 한 모습을 볼 수 있다

크기를 pixcel로 주게 되면,  화면이 작은 스마트폰 등에서는 갭이 더 크게

만들어지기 때문에 지양해야하며, 유연하게 바뀌는 문법들을 사용하는 것이 좋다.

/* App.css */
.grid {
  /*부모에서 선언된 grid*/
  display: grid;
    /*4배 1배 1배 1배 */
  grid-template-columns: 4fr 1fr 1fr 1fr;
  grid-template-rows: repeat(4, 100px);
  gap: 10px;
}
.header {
  background-color: #2ecc71;
  /*첫 번째 열(라인)부터 5번째 열(라인)까지 차지*/
}

.content {
  background-color: #3498db;
  /*첫 번째 행(라인)부터 3번째 행(라인)까지 차지*/
}
.nav {
  background-color: #8e44ad;
}
.footer {
  background-color: #f39c12;
}

fr을 이용하면 grid의 차지 비율을 설정할 수 있다

 

 

 

grid-template-rows에서 fr이 적용되지 않는 이유

 

/* App.css */
.grid {
  /*부모에서 선언된 grid*/
  display: grid;
    /*4배 1배 1배 1배 */
  grid-template-columns: 4fr 1fr 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
}

grid-template-rows: repeat(4, 1fr)이 적용되지 않은 모습

다음과 같이 행에 fr이 적용이 되지 않은 모습을 볼 수 있다. 왜일까?

height를 적용하지 않았기 때문이다!

gird-template-rows에서 height는 0이기 때문에 높이를 꼭 지정해줘야한다.

 

.grid {
  /*부모에서 선언된 grid*/
  display: grid;
    /*4배 1배 1배 1배 */
  grid-template-columns: 4fr 1fr 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  height: 50vh;
  gap: 10px;
}

gird의 높이를 화면의 절반으로 적용한 모습

그리드가 화면의 절반을 차지하게됐다.