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

CSS Grid로 반응형 레이아웃 만들기

by 코코리★ 2019. 1. 1.
728x90
없는

CSS 그리드 레이아웃 은 매일 브라우저 지원에서 성장하고 있으며 CSS 그리드를 프로덕션에 제공 할 수 있습니다. CSS Grid의 신속한 채택은 정말 주목할 가치가 있습니다.

CSS Grid를 사용하여 반응 형 포트폴리오 사이트 레이아웃을 작성하기 전에 몇 가지 사항을 정리해 보겠습니다 . CSS Grid는 Flexbox를 대체하지 않습니다 그것은 부유물을 대체하지 않습니다. 실제로 CSS Grid가 훨씬 더 잘하는 일을하기 위해 Flexbox를 사용하고 있다는 것을 알 수 있습니다. 그러나 교체의 관점에서 생각하는 대신, 우리는 조합의 관점에서 생각할 수 있습니다.

땅콩 버터와 젤리 샌드위치를 ​​상상해보십시오. 땅콩 버터와 젤리는 그 자체만으로도 굉장히 훌륭합니다. 그러나 그들이 함께 할 때, 새로운 것이 태어나고 마술이 일어납니다.

이것은 웹 사이트 레이아웃 도구와 같습니다. 그들은 개별적으로하는 일에 뛰어나지 만 결합되면 마술이 일어나고 새롭고 흥미 진진한 레이아웃을 만들 수 있습니다. 이 예에서는 CSS Grid 및 Flexbox를 사용하여 웹 개발 PB & J를 만듭니다.


01. 마크 업 설정

우리의 레이아웃은별로 좋아 보이지 않지만, 우리의 여섯 가지 항목이있는 골격은 제자리에 있습니다.

이 튜토리얼에서는 CSS Grid와 Flexbox를 함께 사용하여 반응 형 포트폴리오 레이아웃을 작성합니다. 각 상자는 크기가 다르며 일부는 행에 걸쳐 있으며 각 상자에는 제목이 있습니다. 우리는 Flexbox와 함께 제공되는 위대한 정렬 도구 중 일부를 사용하여이를 실현합니다.

마크 업을 설정해 보겠습니다.

<ul class=”boxes”>
  <li>
    <div class=”boxes__text-wrapper”>
      <h2>Case Study Title</h2>
      <p>A catchy description for our case study. We worked hard.</p>
    </div>
  </li>
</ul>

우리는 그 목록 항목과 그 안에있는 모든 것을 6 번 복제 할 것이고 따라서 우리는 함께 할 항목이 있습니다. 궁금한 점이 있으시면 ul 요소는 항목 목록이므로 여기 에서 사용하기로 결정했습니다 자신에게 맞는 느낌을 자유롭게 사용하십시오.

목록 항목 안에는 사례 연구의 제목과 그에 대한 설명이 포함될 .boxes__ 텍스트 래퍼클래스 가 포함 된 div 가 있습니다.


02. 기본 스타일 작성

글꼴을 조금 더 멋지게 설정하고 머리글과 단락의 기본 여백을 제거했습니다.

이제 작업 할 기본 스타일을 설정해 보겠습니다.

body {
  font-family: Avenir, sans-serif;
  margin: 2rem auto;
  width: 95%;
}
h2,
p {
  margin: 0;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.boxes > * {
  padding: .5rem;
  background-color: #333;
  color: white;
}

글꼴을 Avenir로 변경했습니다. 우리는 제목과 단락에서 마진을 제거하고 정렬되지 않은 목록을 재설정합니다. 또한 각 목록 항목에 기본 스타일을 지정하여 각각의 기본 스타일을 알려줍니다.

03. 그리드 설정

세 줄만 있으면 그리드 아이템 사이에 간격이 생기고 조금 더 커지게됩니다.

모바일 용 레이아웃을 먼저 구축하고 싶습니다. 작은 화면에 그리드를 설정하는 것은 다음과 같이 쉽습니다.

.boxes {
  display: grid;
  grid-auto-rows: minmax(125px, auto);
  grid-gap: .5rem;
}


Grid는 기본적으로 하나의 열만 있기 때문에 서로 위에 항목을 쌓을 것입니다. 그리드 간격 을 사용하여 각 사례 연구 사이에 약간의 간격을 만들 것입니다. 이렇게하면 행과 열 사이에 거터를 추가 할 수 있습니다. 


복잡한 n 번째 자식 선택자를 필요로하는 경우에만 열에 여백을 추가하는 것을 잊어 버리십시오 거 터는 열이나 행 사이에만 나타나고 열이나 행의 앞이나 뒤에는 나타나지 않습니다 ..grid-gap 은 grid-column-gap 및 grid-row-gap 의 줄임말입니다 
 보통은 길이를 사용 하겠지만, 브라우저가 커질수록 두 가지를 모두 덮어 쓸 것이므로 속기를 사용합니다.

다음으로 grid-auto-rows 를 사용하여 그리드 컨테이너에 새로운 행의 높이를 알려줍니다. 그리드는 모든 콘텐츠를 배치 할 새로운 행을 생성합니다. grid-auto-rows 속성을 사용하여 이러한 자동 생성 행의 크기를 제어 할 수 있습니다 우리는 새로운 함수 minmax ()를 사용하고 있습니다. 함께 MINMAX () 우리는 최소 크기와 최대 크기를 지정할 수 있습니다. 

코드를 통해 행의 최소 크기는 120px이고 최대 값은 auto가되도록 말합니다. 콘텐츠가 보장되면 행이 커지기를 원하기 때문에 여기서 auto를 사용하고 있습니다.



04. 큰 브라우저 호환성 설정

우리 그리드는 모양을하고있다! 우리는 6 개의 기둥을 가지고 작업 할 수 있으며 그리드 항목 사이의 간격을 좁힐 수 있습니다.

브라우저가 40em 이상일 때 우리 그리드 컨테이너가 한 부분으로 6 개의 컬럼을 갖도록 페이지를 설정합시다.

@media screen and (min-width: 40em) {
  .boxes {
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 2px;
  }
}


grid-template-columns 는 그리드에 존재해야하는 컬럼의 수를 알려주는 속성입니다. rem , em , px , 백분율, 
 vw , vh 및 fr 과 같이 우리가 알고 사랑하는 모든 길이 단위를 허용합니다.


FR은 우리가 CSS 그리드 레이아웃으로 얻을 새로운 단위입니다. 그것으로 우리는 브라우저 대신 우리 대신 수학을 수행하도록 말할 수 있습니다. 

브라우저가 한 부분의 6 개 열을 생성하도록 지시함으로써 브라우저는 그리드 컨테이너의 너비를 계산하고 6 개의 동일한 열로 분할합니다. 또한 그리드는 똑똑하기 때문에 지정된 거터를 계산 한 후에 남은 공간 만 나누어줍니다.


05. 개별 항목 스타일 지정

커피가 모든 것을 멋지게 보이게합니까? 또한 미묘한 그래디언트로 인해 우리의 제목과 설명이 돋보입니다.

우리의 사례 연구는 단지 회색 상자로 약간 칙칙한 것처럼 보입니다. 배경 이미지를 추가하고, 제목을이 상자의 맨 아래에 표시하고, 그라데이션을 추가하여 제목이 돋보이게하십시오.


.boxes li {
  background-image:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8)),
    url(path/to/image);
  background-size: cover;
  display: flex;
  align-items: flex-end;
}


이 배경 이미지는 Unsplash 의 무료 이미지 였지만 원하는 이미지를 자유롭게 사용할 수 있습니다. 또한 Flexbox를 믹스에 가져 와서 텍스트를 상자의 맨 아래에 맞 춥니 다. 아직 보지 못 하겠지만 각기 다른 상자를 놓으면 결국 작동하는 것을 볼 수 있습니다.

06. 그리드에 항목 놓기


그리드를 사용하면 그리드 항목의 크기를 쉽게 지정할 수 있습니다. 그러나 이것은 시작에 불과합니다.

안타깝게도 Grid는 처음에 본 그리드 레이아웃에 항목을 자동으로 배치하는 방법이 없습니다. 다행히도 우리를 위해 그리드는 수동으로 매우 쉽게 할 수있는 도구를 제공합니다. 이 튜토리얼에서는 nth-child를 사용하여 각 목록 항목을 배치합니다. 프로덕션 웹 사이트에서 적절한 계획을 수립하면 콘텐츠가 많은 사이트에서 이와 같은 레이아웃을 자동화 할 수있는 클래스를 사용하는 것이 좋습니다.

첫 번째 항목부터 시작해 보겠습니다.

@media screen and (min-width: 40em) {
  .boxes li:nth-child(1) {
    grid-column: 1 / -1;
    grid-row: span 3;
  }
}


앞에서 작성한 미디어 쿼리의 내부에 모든 배치 스타일을 넣을 예정입니다. 왜냐하면 브라우저가 40em 이상이되면이 레이아웃을 사용하기를 원하기 때문입니다. nth-child를 사용 하여 첫 번째 목록 항목을 타겟팅합니다. CSS Grid를 사용하면 항목을 그리드 - 열 및 그리드 - 행으로 쉽게 배치 할 수 있습니다. 항목이 있어야하는 위치를 지정하는 방법에는 여러 가지가 있지만 여기서는 항목을 열 첫 행에서 시작하고 전체 컨테이너를 -1로 확장하라고 지시합니다.

그런 다음 grid-row를 사용하여 항목을 3 행으로 확장합니다. 3 열이 우리가 원하는 크기가 될 것이라는 것을 어떻게 알 수 있습니까? 글쎄, 몇 분 전에 그리드 자동 행을 사용하여이 행의 크기를 지정했습니다. 우리가 만족스럽지 않으면 최소 크기를 변경할 수 있습니다.

나머지 항목을 배치 해 봅시다.


@media screen and (min-width: 40em) {
  .boxes li:nth-child(2) {
    grid-column: span 2;
    grid-row: span 7;
  }

  .boxes li:nth-child(3) {
    grid-column: span 4;
    grid-row: span 3;
  }

  .boxes li:nth-child(4) {
    grid-column: span 2;
    grid-row: span 4;
  }

  .boxes li:nth-child(5),
  .boxes li:nth-child(6) {
    grid-column: span 2;
    grid-row: span 2;
  }
}


그리드 레이아웃이 얼마나 많은 컨트롤을 제공하는지 놀랍지 않습니까? 몇 줄의 코드만으로도 더 많은 항목이 추가되면 중단되지 않는 완전히 반응하는 레이아웃을 만들 수 있습니다. 

오래된 브라우저에 대한 간략한 설명

이제는 코끼리가 방안에 도착할 때입니다. '오래된 브라우저는 어떨까요?' 이 질문에 대한 답은 CSS의 새로운 기능과 같습니다 : 기능 쿼리를 사용하고 캐스케이드를 사용합니다. 지형지 물 쿼리는 매우 잘 지원 되며, 그렇지 않은 경우 Google에서 우선 순위를 지정할 수 있습니다. 예를 들어, 다음 행을 따라 뭔가를 작성합니다.

.your-selector {
  display: flex;
}

/* Your Grid code */
@supports (display: grid) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem 2rem;
}


이런 식으로 코드를 작성하면 브라우저가 Grid Layout을 이해하면 Flexbox 대신 브라우저를 사용할 것입니다. 또한 캐스케이드를 포함하기 때문에 기능 쿼리를 이해하지 못하는 브라우저는이를 무시하고 이미 필요한 정보를 가지고 있습니다. 우리는 평소보다 조금 더 스타일을 계획 할 필요가 있을지 모르지만, 그렇게함으로써 우리는 합리적인 fallbacks을 가진 멋진 레이아웃을 만들 수 있습니다.

또한 시간이 지남에 따라 CSS Grid에 대한 지원이 점점 더 많아 질 것입니다. 나중에 폴백을 삭제하고 모든 그리드 관련 CSS를 남겨 두는 것이 얼마나 훌륭한 지 생각해보십시오. 그리드에 대해 더 많이 알게되면, CSS의 줄이 줄고 많은 일들을 수행한다는 것을 알게 될 것입니다.

이 기사는 원래 개발자 및 웹 디자이너를위한 세계 최고의 잡지 인 net magazine에 실 렸습니다 .






728x90

댓글