미디어 쿼리가 없는 반응형 육각 그리드

육각 격자를 만드는 방법을 자세히 설명하는 기사가 엄청나게 많다는 것을 알고 있지만 그 중 반응이 좋은 기사는 몇 개입니까? 그들 중 소수만이 많은 미디어 쿼리 또는 JS에 의존합니다.

다음은 모든 화면 크기에 잘 맞는 반응형 육각 격자를 갖는 CSS 전용 솔루션입니다. JS도 없고 미디어 쿼리도 없고 복잡한 html 코드도 없습니다. CSS의 몇 줄만.

자, 간다

설명

<div class="main">
  <div class="container">
    <div></div>
    <div></div>
    ...
  </div>
</div>

.main {
  --s: 100px;  /* size of a hexagon */
  --m: 4px;    /* space between each heaxgon */
  --r: calc(var(--s)*3*1.1547/2 + 4*var(--m));
  display:flex;
}
.container div {
  width: var(--s);
  height: calc(var(--s)*1.1547); 
  margin: var(--m);
  display: inline-block;
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
  margin-bottom: calc(var(--m) - var(--s)*0.2885); 
}
.container::before {
  content: "";
  width: calc(var(--s)/2 + var(--m));
  float: left;
  height: 100%;
  shape-outside: repeating-linear-gradient(     
                  transparent 0 calc(var(--r) - 3px),      
                  #fff        0 var(--r));
}

[기본]

특별한 것은 없습니다. 일부 CSS 변수를 정의하고 flexbox 컨테이너여야 하는 기본div입니다.

[컨테이너]

여기에 CSS가 없습니다. 이것은 height:100% 를 사용할 수 있게 해주는 플렉스 항목입니다.

[사업부]

우리의 육각형 아이템. 너비/높이는 변수 s ( 1.15 ~ 1/cos(30deg) )로 정의됩니다. clip-path를 사용하여 육각형 모양ref을 만듭니다. 마지막으로 margin-bottom를 적용하여 다음 줄( 0.2885 ~ tan(30deg)/2 )과 겹칩니다.

지금까지는 복잡한 것이 없습니다. 흥미로운 부분으로 이동합시다!

[컨테이너::이전]

육각형 항목이 특정 모양을 둘러싸도록 하여 줄 사이에 완벽한 들여쓰기를 생성할 수 있도록 shape-outside 적용할 부동 의사 요소입니다.

설명할 그림:



float 요소가 모든 컨테이너를 채워야 하므로 height:100% 를 사용하는 것은 간단합니다. 그리드의 각 "짝수"줄에는 육각형 항목 너비의 절반에 여백을 더한 것과 같은 들여쓰기가 필요합니다width:calc(var(--s)/2 + var(--m)).

각 2줄에 대해 논리를 반복해야 하며 2줄의 높이는 2 height of hexagon + 4 margin + 2 negative margin-bottom = 2xS/cos(30deg) + 4xM - 2xSxtan(30deg)/2입니다.

약간의 단순화 후에 우리는 (3xS)/(2xcos(30deg)) + 4xM를 얻었고 이것은 우리의 r 변수입니다. shape-outside는 [0, r - x] 내에서 투명하고 [r - x, r] 내에서 불투명한 반복 그라디언트를 생성합니다.

불투명한 부분(파란색 사각형으로 표시)은 두 번째 줄의 요소를 밀어 아름다운 반응 동작을 만듭니다.
x는 어떤 값이든 가질 수 있지만 첫 번째 줄을 밀어내는 것을 피하기에는 너무 크지 않습니다( 1px는 트릭을 수행해야 하지만 반올림 문제를 피하기 위해 더 큰 값을 사용합니다).

그게 다야!

반응형인 것 외에도 육각형 항목의 크기, 항목 사이의 여백을 쉽게 조정할 수 있으며 빈 div를 처리하기 때문에 내부에 내용을 추가할 수 있습니다.

더 많은 모양을 보려면 아래 게시물을 확인하세요.

육각형과 그 너머: 반응형 그리드 패턴, Sans Media 쿼리

Temani Afif for This is Learning ・ 6월 9일 ・ 18분 읽기

#css #html #webdev #tutorial