적절한 경우 CSS 그리드 사용(재검토)

이 게시물은 원래 silvestar.codes에 게시되었습니다.

이 솔루션은 작년 기사"Using CSS Grid where appropriate"에 대한 후속 게시물입니다. 목표는 항목 수를 알 수 없는 탐색 솔루션을 찾는 것입니다.

요약

CSS Grid로 내비게이션을 만드는 것은 틀림없이 최상의 솔루션이 아닙니다. 그러나 CSS Grid를 사용하려는 경우 두 가지 옵션이 제안되었습니다.

grid-auto-flow: row;를 사용하여 다음과 같이 그리드에 각 항목을 배치합니다.

.nav__item:nth-child(1) {
  grid-area: 1 / 1 / 2 / 2;
}

행과 열의 너비를 설정하기 위해 auto 키워드를 사용하여 명확한 그리드 정의:

.nav {
  display: grid;
  grid-auto-flow: row;
}
@media screen and (min-width: 320px) {
  .nav {
    grid-template-columns: repeat(4, auto);
    grid-template-rows: repeat(2, auto);
  }
}

두 예에서 엄격한 그리드를 정의하고 있습니다. 한 행의 여러 열이 엄격하게 정의됩니다.

https://codepen.io/CiTA/pen/dzogLV

새로운 솔루션

저는 1년 넘게 CSS Grid를 사용해 왔으며 그 과정에서 기능을 올바르게 사용하는 방법을 배웠습니다.

minmax() function ,

auto-fit keyword ,

grid-auto-flow property 및

미디어 쿼리를 피하는 방법 🎊.

코드

이전 솔루션을 분기하고 위에서 언급한 기능으로 업데이트했습니다. 다음은 최종 솔루션입니다.

https://codepen.io/CiTA/pen/pOgGqv

.nav--grid2 {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fit, minmax(60px, auto));
  justify-content: center;
}

이 코드 조각을 분석해 보겠습니다.

최소 최대()

minmax() 함수는 크기를 최소값과 최대값 사이의 범위로 정의합니다. 열과 행의 동적 크기를 정의할 수 있습니다.

이 속성을 사용하여 탐색 항목의 최소 및 최대 너비를 정의할 수 있습니다. 이 예에서는 다음 minmax 정의를 사용하고 있습니다.
minmax(60px, auto)
열의 너비는 최소 60px 이상이어야 하며 최대 콘텐츠 너비만큼 넓어야 합니다. 자세한 내용은 auto keyword을 참조하십시오.

자동 맞춤

auto-fit는 repeat() function에서 사용되는 반복 횟수로 사용해야 합니다. 항목이 비어 있을 때처럼 그리드에 가능한 한 많은 항목을 배치해야 한다고 합니다(🤔라고 생각합니다).

그리드 자동 흐름

grid-auto-flow는 항목을 배치하기 위한 그리드 알고리즘이 작동하는 방식을 제어하는 ​​속성입니다. 이 예에서는 dense keyword 을 사용하고 있습니다. 그리드는 더 큰 그리드 항목이 발생할 때 남을 수 있는 구멍을 채워야 한다고 말합니다.

정당화-내용

justify-content property 상자의 내용을 정렬합니다. justify-content: center를 사용하여 항목의 콘텐츠를 중앙에 정렬합니다.

보너스: 미디어 쿼리 없음

보시다시피 미디어 쿼리를 사용하지 않았습니다. 미디어 쿼리는 유용하고 그것 없이는 반응형 웹 디자인이 없을 것입니다.

마지막 생각들

CSS Grid는 여전히 내비게이션 요소에 대한 최선의 접근 방식이 아닐 수 있지만 작동합니다. 문제가 해결되더라도 항상 적절한 경우 CSS 그리드를 사용해 보십시오. 반항아라면 이 생각을 무시하고 그대로 사용하세요. 사용자가 만족하는 한 웹 솔루션을 구축할 때 규칙은 없습니다. 😎