[CSS] Grid(1)

sujip·2023년 5월 13일

목록 보기

11/13

grid

grid도 flex와 마찬가지로 grid를 주고자 하는 자식 요소의 부모 요소에 display: grid; 를 주어야 한다.

grid-template-rows(columns)

gird의 row(column)를 정의할 때 사용하는 property.

grid-template-rows(columns) 에 원하는 만큼의 row(column)을 원하는 크기만큼 적는다.

grid-template-rows는 element의 height를, grid-template-columns는 element의 width를 나타낸다.

아래의 코드를 살펴보자.

ex)
<body>
  <div class="father">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
  </div>
</body>

ex) 
.father {
  display: grid;
  grid-template-columns: 20px 55px 80px 100px;
(->이때, column은 총 4개, width는 순서대로 20px 55px 80px 100px 이다.)

repeat() 함수

grid-template-rows(columns)에서 반복되는 동일한 크기의 행/열을 만들 때, 사용한다.

ex) 200px 크기의 column을 4개 만들 때,
grid-template-columns: repeat(4, 200px); 로 표현한다.
(= grid-template-columns: 200px 200px 200px 200px;)

만약, 2번째 3번째 column의 크기만 같다면,
grid-template-columns: 100px repeat(2, 200px) 100px; 로 표현한다.
(즉, 연속되는 row/column의 크기가 같을 때만, repeat()함수를 사용할 수 있다.)

column-gap

column-gap은 column간의 간격을 정하는 property이다.
(rolw-gap은 row간의 간격을 정한다.)

ex) column-gap: 10px; 이면, column간의 간격이 10px씩 벌어진다.

grid-template-areas

layout template을 만들 때, 사용한다.

ex)
<div class=“grid”>
   <div class=“header”></div>
   <div class=“content”></div>
   <div class=“nav”></div>
   <div class=“footer”></div>
</div>

.gird{
   display: grid;
   grid-template-columns: repeat(4, 200px);
   grid-template-rows: repeat(4, 200px); 
   grid-template-areas: 
         “header header header header”  
         /* 첫번째 row */
         “content content content nav”   
         /* 두번째 row */
         “content content content nav”   
         /* 세번째 row */
         “footer footer footer footer”;   
         /* 네번째 row */
}

위의 코드처럼 부모 요소에 grid-template-areas를 작성하여 layout template을 만드는 데, grid-template-areas에 작성된 area name을 정의해줘야 한다.

아래처럼 area name이 나타내는 각 요소에 area name을 정의해준다.
(이때, class 이름과 같지 않아도 되지만, grid-template-areas에 적힌 이름과 grid-area의 이름이 같아야한다.)

.header{
   grid-area: header;
}
.content{
   grid-area: content;
}
.nav{
   grid-area: nav;
}
.footer{
   grid-area: footer;
}

gird-row(column)-start, gird-row(column)-end

html 변경없이 element의 위치를 바꿀 때, 유용하다.

gird-row(column)-start, gird-row(column)-end도 해당하는 자식 요소에 작성해야하며, 뒤에 몇번째 줄에서 시작하고 끝날 건지를 입력해주면 된다.

이때, 뒤에 입력되는 숫자는 row나 column에 해당하는 게 아니라 line에 해당한다. (제대로 작동되려면, 시작과 끝이 모두 정의되어 있어야 한다.)
참고 강의 - CSS Layout 마스터 클래스 #2.4, 2:51

gird-row(column)-start, gird-row(column)-end를 더 간편하게 작성하는 법

gird-row(column): start line number / end line number;
-> 시작하는 줄과 끝나는 줄에 해당하는 숫자를 넣는다.

첫 줄에서 마지막 줄까지 요소를 위치하게 하고 싶을 때,
gird-row(column): 1 / -1; 라고 입력한다.
(이때, -1은 마지막 줄을 나타내며, 마지막 줄부터 -1, -2, -3, -4 ~로 센다.)

gird-row(coulmn): 1 / -1 ; 처럼, 첫 줄에서 마지막 줄까지 위치하게 할때,
span과 grid cell의 개수를 알면 더 간편하게 작성할 수 있다.
ex) grid cell이 4개 일때, 첫 줄부터 마지막 줄까지 위치하게 하려면,
= gird-row(coulmn): span 4; 라고 작성한다.

첫 줄이 아닌 두번째 줄부터 cell을 3칸 차지하게 하고 싶을 때,
ex) grid-row(column): 2 / span 3; 처럼 시작점을 작성해준다.

fr

=fraction(=부분)은 px이나 %와 같은 측정 단위이다.
(-> 사용가능한 공간을 뜻한다.)

gird container에서만 사용할 수 있는 측정 단위이다.

row와 column, 함께 디자인하기

column이 몇 개 있고, row의 height가 얼마나 되는 지 구체적으로 작성한다.
그리고 / 뒤에 각 column마다 width가 얼마나 되는 지 적어준다.

아래의 코드를 살펴보자.
ex)
<div class=“grid”>
   <div class=“header”></div>
   <div class=“content”></div>
   <div class=“nav”></div>
   <div class=“footer”></div>
</div>
.gird{
   display: grid;
   gird-template: 
        “header header header header” 1fr
        “content content content nav” 2fr 
        “footer footer footer footer” 1fr / 1fr 1fr 1fr 1fr  ;  
}
"" 안에 적힌 건 row이고, 그 옆에 1fr은 row의 height이다.

"" 의 개수가 column의 개수가 된다.(위의 코드에서 column은 총 3개)

마지막 / 뒤의 fr은 각 column의 width를 나타낸다.

grid-template에서는 repeat() 함수를 사용할 수 없다.