CSS 그리드로 간결한 미디어 쿼리

Concise Media Queries with CSS Grid

미디어 쿼리는 일반적으로 웹 사이트에서 반응 형 레이아웃을 제어하는 ​​데 사용됩니다. 이 방법으로 레이아웃을 구성하는 것은 직관적입니다. 와이드 데스크탑 디스플레이에서는 열에 정보를 표시하고 화면 너비가 임계 값 아래로 감소함에 따라 요소를 세로로 쌓습니다. 현대 CSS로이 문제에 대한 해결책이 과거보다 쉬워졌습니다. 더 이상 display: table;꿈의 레이아웃을 달성하는 것과 같은 룰을 사용해서는 안됩니다 . flexbox와 같은 CSS 모듈과 몇몇 영리한 프레임 워크는 최소한의 코드로 그리드를 쉽게 만들었지 만, CSS 그리드를 사용하면 그리드 규칙을 한 번 작성하고 단일 규칙으로 모든 프레임 워크없이 원하는 화면 크기로 원하는 레이아웃을 얻을 수 있습니다.

예를 들어 사용자 프로필에 대한 일반적인 레이아웃을 살펴 보겠습니다. 프로필에는 사용자 이름, 아바타 및 짧은 전기가 있습니다. 마크 업은 다음과 같이 보일 수 있습니다.

Media queries are commonly used to control responsive layouts on websites. Organizing layouts this way is intuitive: On a wide desktop display, we want to present information in columns, and as screen width diminishes below a threshold, we stack elements vertically. With modern CSS, solutions to this problem have become easier than in the past. No longer must we use kludgey rules like display: table; to achieve the layout of our dreams. CSS modules like flexbox and several clever frameworks have made grids easy to achieve with minimal code, but with CSS grid we can write our grid rules once, and achieve the desired layout at any screen size with a single rule, and without any framework.

As an example, let’s take a common layout for a user profile. In a profile we have a user name, avatar, and short biography. Our markup might look something like this:

<div class="user-profile">
  <span class="user-profile__username">
    Rob Ott
  </span>

  <img src="avatar.jpg" class="user-profile__avatar"/>

  <p class="user-profile__bio">
    made of metal
    likes animals
    hates water skiing
  </p>

</div>

우리는 그것을 어떻게 구부리시겠습니까?

같은 문제를 풀려고하는 모든 종류의 미디어 쿼리를 보았습니다. 일반적인 방법은 display: flex; 특정 폭 위에 컨테이너에 규칙을 설정하는 미디어 쿼리를 기술하는 것입니다 .

How do we flex it?

I’ve seen media queries of all varieties trying to solve the same problem. A common method is to describe a media query which sets the rule display: flex; on a container above a certain width:

@media (min-width: 700px) {
  .user-profile {
    display: flex;
    ...
  }
}

이것은 초기에 의존 flex-direction인 flexbox의 존재의 row와의 초기 값 flex-wrap인 nowrap. 자식 요소가 차단 요소 일 때 display: flex;규칙이 더 이상 적용되지 않으면 자연스럽게 수직으로 쌓 입니다. 또는 flex-directionfor row또는 for 의 값을 바꾸는 쿼리를 작성할 수 column있습니다.

flexbox 솔루션의 단점은 2 행에 걸쳐있는 요소와 같이 2 축을 따라 배열 된 블록으로 복잡한 레이아웃 규칙을 구현하려면 다음을 수행해야합니다.

1. 둥지 요소
2. 여백 및 거터 (행과 열 사이의 공백)가 동일하게 유지되도록 쿼리를 작성하고,
3. order하위 구성 요소 의 규칙을 검토하여 올바르게 구성합니다.

무슨 두통이야! 복잡 한 레이아웃에 대해이 방법을 사용하면 미디어 쿼리가 빨리 중단됩니다.

grid-template-areas를 입력하십시오

CSS 그리드는 레이아웃을 신속하게 구성 할 때 이점이 있습니다. 심지어 간단한 레이아웃이라도 flexbox에 비해 CSS 그리드로 최소한의 노력 만 필요합니다. 이 grid-template-areas속성을 사용하면 미디어 쿼리 내에 단일 규칙을 사용하여 반응이 빠른 레이아웃을 작성할 수 있습니다. 이것은 grid-template-areas한 번에 두 축의 시각적 그리드 시스템을 정의 하기 때문 입니다. 보세요:

This relies on the initial flex-direction of a flexbox being row and the initial value of flex-wrap being nowrap. When the children are block elements, they will naturally stack vertically when the display: flex; rule no longer applies. Alternatively, we could write a query to swap the value of flex-direction for row or column.

The drawback to the flexbox solution is that in order to achieve complex layout rules with blocks arranged along 2 axes, such as an element spanning 2 rows, we must:

1. nest elements
2. write queries to ensure margins and gutters (white space between rows and columns) remain equal,
3. trip over the order rules of child elements to correctly organize them.

What a headache! Media queries will quickly get out of hand if we take this approach for any complex layout.

Enter grid-template-areas

CSS grid definitely has the advantage when it comes to quickly organizing layouts. Even simple layouts require minimal effort with CSS grid compared to flexbox. With the grid-template-areas property, we can write responsive layouts with a single ruleinside a media query. That’s because grid-template-areas defines a visual grid system on both axes at the once. Take a look:

.grid {
  grid-template-areas:
    'avatar name'
    'bio    bio';
}

이 규칙은 컨테이너에 "name", "avatar"및 "bio"의 세 가지 영역이 있으며 첫 번째 행에 아바타와 사용자 이름이 나란히 배치 된 패턴과 두 번째 행에있는 bio 섹션 두 컬럼 모두. 이 규칙의 마법은 속성 값에 의해 열의 수가 추론된다는 것입니다. 하나 이상의 공백으로 구분 된 각 이름은 열을 정의하며 각 행은 동일한 수의 열을 정의해야합니다. 명확성을 위해 그리드의 결과를 시각화하기 위해 별도의 행에 행을 나누었습니다. 우리의 자식 요소는 그리드가 어느 영역에 나타나고 나머지는 컨테이너에 알려주기 만하면됩니다.

This rule tells the container that there are three areas: “name”, “avatar”, and “bio”, arranged in a pattern with the avatar and username side by side in the first row, and the bio section in a second row spanning both columns. The magic of this rule is that the number of columns is inferred by the property values. Each name separated by one or more spaces defines a column (and each row must define the same number of columns). For clarity, I broke up the rows onto separate lines to visualize the result of the grid. Our child elements simply need to tell the grid which area they appear in, and the container does the rest:

.user-profile__username {  grid-area: name;
}

.user-profile__avatar {
  grid-area: avatar;
}

.user-profile__bio {
  grid-area: bio;
}

그리드 템플릿을 재정렬하는 간단한 미디어 쿼리가 우리의 반응 형 레이아웃을 처리 할 것입니다.

Now a simple media query to rearrange the grid template will handle our responsive layout:

@media (max-width: 700px) {
  .grid {
    grid-template-areas:
      'name'
      'avatar'
      'bio';
  }
}

이제 우리 아이들은 최대 700px까지 뷰포트에 수직으로 쌓입니다!

요소를 재정렬 할 때 접근성을 염두에 두십시오.

요소를 시각적으로 재정렬하는 경우 액세스 가능성을 위해 논리적으로 문서 구조가 정렬되도록하는 것이 중요합니다. 다음 은 그리드 작업시 접근성을 유지하는 데 대한 몇 가지 생각입니다.

이제 사용자의 아바타를 이름 아래에 표시하려면 어떻게해야할까요? 같은 속성으로 영역을 재정렬 할 수 있습니다.

And now our children will stack vertically in a viewport up to 700px!

Keep accessibility in mind when reordering elements

When reordering elements visually, it’s important to ensure that the document structure is ordered logically for accessibility. Here are some thoughts on maintaining accessibility when working with grid.

Now, what if we want to show the user’s avatar first, with their name underneath? we can simply reorder the areas with the same property:

@media (max-width: 700px) {
  .grid {
    grid-template-areas:
      'avatar'
      'name'
      'bio';
  }
}

또한, 우리는 하나의 규칙으로 임의의 레이아웃에서 그리드 영역을 재배치 할 수 있으며, CSS 그리드 시스템 이 규칙 플릭으로 거터 를 처리하기 때문에 grid-gap우리는 자식 요소의 조건부 여백에 대해 걱정할 필요가 없습니다. 복잡한 응답 성 동작을 가진 레이아웃을 다음 번에 다룰 때 CSS 그리드를 선택하고 컴퓨터 앞에서 더 짧은 시간을 보내십시오.

Furthermore, we can rearrange the grid areas in any arbitrary layout with that single rule, and because the CSS grid system handles gutters with a flick of the grid-gap rule, we don’t have to worry about any conditional margins on our child elements. So the next time you tackle a layout with complex responsive behavior, choose CSS grid and spend less time in front of your computer.

출처 : https://robots.thoughtbot.com/concise-media-queries-with-css-grid