CSS Grid

Cola Coca·2022년 7월 17일

CSS

목록 보기

11/13

CSS Grid

flex 는 레이아웃을 1차원으로 배치하는 반면, grid는 2차원으로 배치한다.
컨텐츠를 행과 열에 배치할 수 있다.

display : grid

정렬하고자 하는 아이템들을 감싸고 있는 컨테이너 박스에 지정한다.

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
    display : grid;

grid-template-colums, grid-template-rows

명시적 그리드 : 각 열과 행의 개수 및 너비와 높이 지정하여 직접 명시적으로 트랙을 생성한다.
입력한 값의 개수만큼 열과 행이 추가된다.
fr 단위를 사용하여 너비와 높이를 균등하게 분배 할 수 있다.
repeat(반복횟수, 크기) 을 통하여 일정 크기를 일정 횟수만큼 반복하여 추가할 수 있다.

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
    display : grid;
    width : 500px;
    height : 300px;
   
    grid-template-columns : 100px 100px 100px; /* 100px 너비의 열 3개 추가 */
    grid-template-rows : 30px 30px; /* 30px 높이의 행 2개 추가 */
    
    /* fr단위를 사용한 균등한 너비와 높이 분배*/
   	grid-template-columns : 1fr 1fr 1fr; /* 컨테이너 박스 너비의 1:1:1 비율의 열 3개 추가 */
    grid-template-rows : 1fr 2fr; /* 컨테이너 박스 높이의 2:1 비율의 행 2개 추가 */
    grid-template-rows : repeat(2, 100px); /* 100px 높이의 행 2번 반복하여 추가 */
}
.box {
	background: red;
    margin : 10px;
}

직접 해보기

grid-auto-colums, grid-auto-rows

암시적 그리드 : 각 열과 행 너비와 높이 지정하여 실제 아이템이 배치될 때 트랙이 생성된다.
아이템이 몇개가 배치될지 모를 때 사용한다.
minmax(최소 크기, 최대 크기) 를 사용하면 크기가 얼마일지 모를 컨텐츠가 들어와도 알맞은 크기의 트랙 생성이 가능하다.

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
    display : grid;
    width : 500px;
    height : 300px;
   
    grid-template-columns : repeat(3, 1fr); /* 1fr 비율의 열 3번 반복하여 추가 */
    grid-auto-rows : 50px; /* 50px 높이의 행 추가 자동 추가 */
    grid-auto-rows : minmax(100px, auto); /* 최소 높이 100px의 행 추가 */
}

.box {
	background : red;
    margin : 10px;
}

직접 해보기

auto-fill, auto-fit

repeat() 함수의 반복 횟수 값으로 사용된다.
auto-fill : 설정한 크기에 최대한 많은 열 혹은 행을 추가한다. 공간이 남으면 빈 셀을 추가한다. 남는 공간이 설정한 크기보다 작으면 여백으로 남긴다.
auto-fit : auto-fill과 동일하게 최대한 많은 열 혹은 행을 추가한다. 공간이 남으면 셀의 크기를 늘린다.

<h2>auto-fill</h2>
<div class="container fill">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<h2>auto-fill</h2>
<div class="container fit">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container.fill {
    display : grid;
    width : 500px;
    height : 300px;
    
   	 /* 최소 너비 20%의 열 허용하는 만큼 추가 => 10%니까 10만 허용, 남는 공간은 빈 셀 추가 */
    grid-template-columns : repeat(auto-fill, minmax(10%, auto)); 
    grid-auto-rows : minmax(100px, auto); /* 최소높이 100px 높이의 행 자동 추가 */
}

.container.fit {
    display : grid;
    width : 500px;
    height : 300px;
    
   	 /* 최소 너비 20%의 열 허용하는 만큼 추가 => 10%니까 10개만 허용, 남는 공간은 셀들에 균등하게 분배 */
    grid-template-columns : repeat(auto-fit, minmax(10%, auto)); 
    grid-auto-rows : minmax(100px, auto); /* 최소높이 100px 높이의 행 자동 추가 */
}

.box {
	background : red;
    margin : 10px;
}

직접 해보기

grid-column-start,grid-column-end,grid-row-start,grid-column-end

열과 행라인의 시작과 끝을 번호로 지정하여 아이템의 영역을 지정한다.
grid-column-start, grid-row-start : 열 혹은 행의 시작 라인을 지정한다.
grid-column-end, grid-row-end : 열 혹은 행의 끝 라인을 지정한다.
grid-column, grid-row : 열 혹은 행의 시작 라인과 끝 라인을 / 구분하여 한번에 지정하는 단축 속성.
grid-column, grid-row의 끝 라인 값 생략시 바로 다은 라인까지만 차지한다.

<div class="container">
  <header></header>
  <main></main>
  <aside></aside>
  <footer></footer>
</div>

.container {
    display : grid;
    width : 500px;
    height : 300px;
}

header {
	grid-column : 1 / 3; /* 열의 1번라인부터 3번라인까지 차지하는 열 생성 */
    grid-row : 1; /* 행의 1번라인부터 2번라인 까지 차지하는 행 생성 */
    
    /* 위와 동일하게 동작 */
    grid-column-start : 1;
    grid-column-end : 3;
    grid-row-start : 1;
    grid-row-end : 2;
    
    background-color : aqua;
}

main {
  	grid-column: 2; /* 열의 2번라인부터 3번라인까지 차지하는 열 생성 */
  	grid-row: 2; /* 행의 2번라인부터 3번라인 까지 차지하는 행 생성 */
    
     /* 위와 동일하게 동작 */
    grid-column-start : 2;
    grid-column-end : 3;
    grid-row-start : 2;
    grid-row-end : 3;
    
    background-color : yellow;
}

aside {
  	grid-column: 1; /* 열의 1번라인부터 2번라인까지 차지하는 열 생성 */
  	grid-row: 2; /* 행의 2번라인부터 3번라인 까지 차지하는 행 생성 */
    
     /* 위와 동일하게 작동 */
    grid-column-start : 1;
    grid-column-end : 2;
    grid-row-start : 2;
    grid-row-end : 3;
    
    background-color : tomato;
}

footer {
  	grid-column: 1 / 3; /* 열의 1번라인부터 3번라인까지 차지하는 열 생성 */
  	grid-row: 3; /* 행의 3번라인부터 4번라인 까지 차지하는 행 생성 */
    
     /* 위와 동일하게 작동 */
    grid-column-start : 1;
    grid-column-end : 3;
    grid-row-start : 3;
    grid-row-end : 4;
    
    background-color : lightgreen;
}

직접 해보기

grid-template-areas

각 트랙에 영역의 이름을 지정하여 레이아웃 배치를 설정한다.
grid-template-areas : 배치하고자 하는 영역을 이름으로 설정하여 문자열의 형태로 지정한다.
=> 여러개의 문자열을 입력시 여러개의 행이 추가된다.
실제 영역을 설정하고자 하는 아이템에 grid-area값으로 영역이름을 지정한다.

<div class="container">
  <header></header>
  <main></main>
  <aside></aside>
  <footer></footer>
</div>

.container {
    display : grid;
    width : 500px;
    height : 300px;
    grid-template-areas: 
    	"header header"
        "sidebar main"
        "footer footer"
}

header {
	grid-area : header; /*  grid-template-areas의 header 영역을 차지 */
    
    background-color : aqua;
}

main {
  	grid-area : header; /*  grid-template-areas의 main 영역을 차지 */
    
    background-color : yellow;
}

aside {
  	grid-area : sidebar; /*  grid-template-areas의 sidebar 영역을 차지 */
    
    background-color : tomato;
}

footer {
  	grid-area : footer; /*  grid-template-areas의 footer 영역을 차지 */
    
    background-color : lightgreen;
}

직접 해보기

align-items, justify-items

아이템들을 세로축 혹은 가로축 방향으로 정렬한다.
입력되는 값은 align-items, justify-items 모두 동일하다.
단축 속성 place-items로 한번에 지정 가능하다.

값	설명
stretch	축 방향으로 늘린다.
start	축의 시작점에 정렬한다.
end	축의 끝 점에 정렬한다.
center	축의 가운데에 정렬한다.

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

.container {
  display : grid;
  height: 300px;
  grid-template-columns : repeat(3, 100px);
  grid-template-rows : repeat(2, 50px);
  
  justify-items: stretch;
  align-items : center;
  
  place-items : center, stretch; /* align-items와 justify-content의 단축 속성 */
}

.box {
  background : red;
  color : #fff;
}

직접 해보기

align-content, juftify-content

컨텐츠(모든셀)의 정렬 방법을 지정한다.
축에 여백이 남을 때 정렬된다.
단축속성 place-content로 한번에 지정 가능하다.

값	설명
stretch	크기가 auto인 경우 가로 혹은 세로 방향으로 늘린다.
start	시작 라인에 정렬한다.
end	끝 라인에 정렬한다.
center	가운데에 정렬한다
space-between	셀 사이에 여백을 균등하게 분배한다.
space-around	시작선 및 끝선과 셀 사이의 공간도 고려하여 여백을 분배한다.
space-envenly	여백을 시작선 및 끝선과 셀 사이의 공간과 아이템간의 사이 모두 균등하게 분대한다.

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  display : grid;
  width : 500px;
  height : 300px;
  grid-template-columns : repeat(3, 100px);
  grid-template-rows : repeat(2,auto);
  gap : 10px;
  
  border: 3px solid red;
  
  align-content : stretch; /* 셀을 세로 방향으로 늘린다. */
  justify-content : center; /* 모든 셀을 가로 방향의 가운데로 정렬한다. */
  
  place-content : stretch center; /* align-content와 justify-content의 단축 속성  */
}

.box {
  background : black;
}

직접 해보기

align-self, justify-self

각 셀 컨텐츠의 정렬 방식을 개별적으로 지정한다.
단축 속성 place-self로 한번에 지정 가능하다.

값	설명
stretch	셀을 가로 혹은 세로 방향으로 늘린다.
start	컨텐츠를 셀의 시작라인에 정렬한다.
end	컨텐츠를 셀의 끝 라인에 정렬한다.
center	컨텐츠를 셀의 가운데에 정렬한다.

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  display : grid;
  width : 500px;
  height : 300px;
  grid-template-columns : repeat(3, 100px);
  grid-template-rows : repeat(2,auto);
  gap : 10px;
  
  border: 3px solid red;
}

.box {
  background : black;
}

.box:nth-child(3) {
  align-self : center; /* 셀의 컨텐츠를 세로 방향으로 가운데 정렬한다. */
  justify-self : end; /* 셀의 컨텐츠를 가로 방향으로 셀의 끝 라인에 정렬한다. */
  
}

직접 해보기

Cola Coca

이전 포스트

CSS flex

다음 포스트

CSS Grid

CSS

CSS Grid

CSS flex

반응형 웹

0개의 댓글