본문 바로가기
디자인/HTML, CSS, JS

CSS[5] 반응 형 그리드 생성

by 코코리★ 2018. 12. 20.
728x90

그리드에는 고정 된 크기의 그리드 아이템이 뷰포트 크기에 따라 위치를 이동할 수있는 "응답 성"기능이 있습니다. 그리드를 미디어 쿼리와 결합하여 더 작은 뷰포트에 다른 그리드를 제공 할 수도 있습니다.

그리드 레이아웃은 컨테이너에 맞는 특정 크기의 트랙을 많은 수로 그리드를 생성 할 수있게 해주는 auto-fill및 auto-fit키워드를 제공합니다 . 그리드 항목은 브라우저의 크기를 조정할 때 위치가 바뀌는 반응 형 그리드가 될 수 있습니다.

auto-fill키워드

사용 예 auto-fill:

 
 Editor Preview
<!doctype html>
<title>Example</title>
<style>
#grid { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 2vw;
  }
#grid > div {
  font-size: 5vw;
  padding: .5em;
  background: gold;
  text-align: center;
}
</style>
<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Preview더 큰 뷰포트에서 예제를 보려면 클릭 한 다음 브라우저의 크기를 조정하십시오. 현재 소형 장치를 사용하고있는 경우 데스크톱이나 랩톱에서 다시 시도하십시오.

관련 코드는 다음과 같습니다.

grid-template-columns : repeat ( auto-fill , minmax ( 150px , 1fr ));

이렇게하면 열을 최소 크기 인 150 픽셀과 최대 남은 공간으로 설정합니다. 트랙은 컨테이너에 넣기 위해 필요한만큼 반복됩니다.

이 repeat()함수는 첫 번째 매개 변수가 제공 한 횟수만큼 트랙 정의를 반복합니다. Using을 사용 auto-fill하면 컨테이너에 맞는 트랙을 반복 할 수 있습니다.

이러한 트랙의 크기는 두 번째 매개 변수에 의해 지정됩니다. 이 경우 minmax(150px, 1fr)최소 열 크기가 150px최대 열 크기임을 지정하는 데 사용 됩니다 1fr.

auto-fit키워드

auto-fit키워드는 거의 동일하게 작동합니다 auto-fill. 차이점은 auto-fit게재 위치 끝에있는 빈 트랙 을 모두 축소 한다는 점 auto-fill입니다.

이를 증명하는 가장 좋은 방법은 두 가지를 함께 비교하는 것입니다.

 
 Editor Preview
<!doctype html>
<title>Example</title>
<style>
.grid { 
  display: grid;
  grid-gap: 2vw;
  border: 1px solid black;
  margin: 10px;
  }
.grid > div {
  font-size: 5vw;
  padding: .5em;
  background: gold;
  text-align: center;
}
.auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
</style>
<div class="grid auto-fill">
  <div>1</div>
  <div>2</div>
</div>
<div class="grid auto-fit">
  <div>1</div>
  <div>2</div>
</div>

두 개의 작은 그리드 항목 만 사용하면이 개념을 입증하는 데 도움이됩니다. auto-fill그리드는 지정된 크기의 끝에 빈 트랙을 유지합니다. 그러나 auto-fit빈 트랙을 축소하여 공간을 채우기 위해 채워진 트랙이 늘어납니다.

미디어 쿼리가있는 그리드

그리드 레이아웃의 강력한 기능 중 하나는 이전에 보았던 것처럼 몇 초 내에 다른 레이아웃을 만들 수 있다는 것 입니다.

그리드 레이아웃은 미디어 쿼리에 이상적입니다. ASCII 아트의 값을 간단히 재정렬하고 미디어 쿼리에 결과를 래핑 할 수 있습니다.

다음은 그 예입니다.

 
 편집자 시사
<! doctype html>
< title > Example </ title >
< style >
body {
  display : gird ;
  grid-template-areas :
    "header header header"
    "nav article ads"
    "footer footer footer" ;
  grid-template-rows : 80px  1fr  70px ;  
  grid-template-columns : 20%  1fr  15% ;
  grid-row-gap : 10px ;
  grid-column-gap : 10px ;
  height : 100vh ;
  margin : 0 ;
  }  
/ * (Stack the layout on small devices/viewports.) 작은 장치 / 뷰포트에 레이아웃을 쌓습니다. * /
@media  all  and ( max-width : 575px ) {
  body {
    grid-template-areas :
      "header"
      "article"
      "ads"
      "nav"
      "footer" ;
    grid-template-rows : 80px  1fr  70px  1fr  70px ;  
    grid-template-columns : 1fr ;

이 뷰는 큰 뷰포트의 3 열 레이아웃이며 작은 뷰의 단일 열로 축소됩니다. 이 예제는 화면의 크기에 따라 다르게 보일 것입니다. 대부분의 경우 편집기 위젯의 뷰포트가 작기 때문에 축소됩니다.

Preview버튼을 클릭 하면 더 넓은 뷰포트에서 볼 수 있습니다 (화면 크기가 허용하는 경우). 575px중단 점을 통과하면 레이아웃 변경 사항을 보려면 브라우저 창 크기를 조정하십시오 .

어쨌든 다음은 3 열 레이아웃 관련 코드입니다 (더 넓은 뷰포트 용).

​

다음은 '모바일'버전 관련 코드입니다.

grid-template-area :
  "header"
  "article"
  "ads"
  "nav"
  "footer" ;

그래서 grid-template-areas재산 의 가치를 재 배열하는 것입니다 .

이 경우 미디어 쿼리에 "모바일"버전을 다음과 같이 포장합니다.

​

우리는 또한 새로운 레이아웃을 허용하기 위해 grid-template-rowsand 의 값을 조정해야한다는 것을 기억하십시오 grid-template-columns. 특히 하나의 열만 있어야하며 사용 가능한 모든 공간을 차지해야합니다. 모든 그리드 항목이 스택 될 것이기 때문에 5 행과 높이를 명시 적으로 정의합니다.

Grid와 Block의 결합

레이아웃 요구 사항에 따라 모바일 버전을 변경하지 않아도됩니다 display: block. 이렇게 :

@media  all  and ( max-width : 575px ) {
  body {
    display : block ;
 }
}

위의 예와 비슷하게 작동하지만 기본적으로 항목은 소스 순서대로 스택됩니다. 위의 예에서 모바일 버전은 nav아래 ads에 있지만 display: block, 사용했다면 위의 버전을 사용 nav했을 것입니다 ads.

또한이 방법을 사용하는 경우 그리드 버전에 포함 된 거터 부족을 보완하기 위해 여백 등을 추가해야 할 수도 있습니다.

728x90
저작자표시 동일조건

'디자인 > HTML, CSS, JS' 카테고리의 다른 글

CSS[9] 자동 배치가있는 양식 레이아웃  (0) 2018.12.21
CSS[8] 그리드 항목 배치  (0) 2018.12.21
CSS[7] Explicit vs Implicit Grid  (0) 2018.12.21
CSS[6] 그리드안에 그리드 넣기  (0) 2018.12.21
CSS[4] 그리드로 웹 사이트 레이아웃 만들기  (0) 2018.12.20
CSS[3] 그리드 레이아웃 소개  (0) 2018.12.19
CSS[2] 그리드 만들기  (0) 2018.12.19
CSS[1] 그리드 튜토리얼  (0) 2018.12.19

관련글

댓글

티스토리툴바