CSS 및 HTML만 사용하여 응답성이 빠르고 단계적으로 향상된 블록 레이아웃을 구성합니다.

며칠 전에 나는 내가 웹 사이트를 다시 설계하도록 설득하는 것을 발견했다.이 사이트는 제 형제guitar teaching business를 위해 만든 것입니다. 저는 몇 년 전에 학생이었을 때 이곳에서 일한 적이 있습니다.(만약 당신이 그 링크를 클릭하고 다시 일하기 전에 확인한다면, 네, 사이트에서 일을 해야 한다는 것을 알고 있습니다. 이것이 바로 제가 여기서 한 일입니다.)
재설계의 일부로서 저는 학생들의 추천서를 어떻게 배치해야 할지 생각하려고 했습니다. 이 추천서들은 길이/내용이 다를 수 있습니다. 저는 우연히 벽돌 구조를 사용해야 한다는 생각을 하게 되었습니다(벽돌을 생각하고 Pinterest를 생각하세요).

벽돌과 돌의 구조를 구축하는 데 많은 방법이 있는데 이 CSS 기교 문장은 몇 가지 옵션을 열거했다Approaches for a CSS Masonry Layout.
솔루션을 검토할 때 다음과 같은 규칙을 준수하고 싶습니다.

자바스크립트를 사용하여 레이아웃을 하는 큰 죄를 범하지 말아야 한다.

브라우저 지원을 기반으로 업그레이드 또는 다운그레이드를 경험할 수도 있습니다.

우리 뭐 짓고 있어?

사용grid-template-rows: masonry의 블록 레이아웃

예비 CSS 열

본고는 HTML과 CSS만 사용하여 다음과 같은 응답식 벽돌 카드 레이아웃을 구축하는 방법을 설명할 것이다.
마지막 시범은 Firefox에서만 사용할 수 있는 기능을 사용했고 그 뒤에 표지가 하나 있는데 본고는 이에 대해 상세하게 소개했다.
다음은 전체 데모 코드입니다.

CSS 격자가 이 정도는 할 수 있다고 생각하실 거예요.

CSS Grid는 매우 훌륭합니다. 간단한 석재 레이아웃 방법을 제공했다고 생각할 수도 있지만, 규범화된 초기 버전은 그 레이아웃을 진정으로 돕는 어떤 것도 제공하지 않습니다.
하지만 걱정 마세요. Firefox에서 요리하는 게 있어요!

Before I continue, the specification we're going to look into is experimental, and at the time of writing only is available in Firefox behind a flag, however, this article will outline how you could use the feature today and fallback to another approach for browsers without support.

Firefox에서 스톤 레이아웃 사용

지금은 2021년 1월입니다. Firefox 84.0.2를 사용하고 있습니다. 이것은 규범의 진전에 따라 이 로고를 사용하지 않아도 되고 다른 브라우저에서도 사용할 수 있습니다this link may have more information.
Firefox에서 활성화하기

주소 표시줄

에 about:config를 입력합니다.

경고 수락

검색 상자에서: layout.css.grid-template-masonry-value.enabled를 찾아 활성화합니다.

MDN에서 이 글을 찾을 수 있습니다: CSS Grid Layout > Masonry Layout
그것은 매우 유사한 예를 상세하게 소개했다.
이 소량의 CSS가 있으면 우리는 거의 우리가 원하는 레이아웃을 얻을 수 있어 사람을 흥분시킨다!하드 인코딩 사이즈가 있어서 개선하고 응답 블록 레이아웃을

우리들의 본보기를 세우다

새로운 예부터 시작하여 약간의 html과'lorem ipsum'부터 벽돌 구조를 위해'벽돌'을 생성합시다.
효과를 보려면 벽돌 레이아웃을 지원하는 브라우저에서 이 예시들을 보십시오. (Firefox를 작성할 때 표지 뒤에 있습니다.)
이 코드는 벽돌과 돌 모양의 레이아웃을 생성합니다. 화면이 축소되면 자동으로 한 열에 도달할 때까지 열 수를 줄일 것입니다.

만약 이 예를 실행한다면, 가장 깨끗한 가장자리가 없다는 것을 주의해야 한다. wonky bottom

No one likes a soggy wonky bottom.

축체규범은 새로운 속성을 사용할 수 있습니다: align-tracks, 이 문제를 해결하기 위해 stretch로 설정할 수 있습니다.align-tracks 또 다른 support modes가 있습니다. align-tracks의 잠재적인 문제에 주의하세요. 벽돌 구조를 원한다면 벽돌 하나가 여러 기둥을 뛰어넘을 수 있습니다. 이 일들이 규범의 진전에 따라 해결되기를 바랍니다.

.masonry {
      display: grid;
      gap: 1rem;
      grid-template-rows: masonry;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      /* no more wonky bottom */
      align-tracks: stretch;
}

/* some styling not important */
.brick {
    color: var(--Text, #F0F0F0);
    background: var(--Primary, #74baff);
    padding:1rem;
}

지금은 마술을 부리는 것 같고, 밑부분은 지금 곧다.

한 걸음 물러나는 게 어때요?

알겠습니다. 현재 우리는 브라우저에서만 일부 물건을 실행하고 있지만, 거기에서 발표하지 않았습니다. 이것은 이상적이지 않습니다.
이번에는 CSS 열을 사용하여 유사한 기능을 시도해 보겠습니다.
CSS 칼럼을 연구하여 이러한 벽돌과 돌의 구조를 실현하기 전에 나는 그것들을 사용한 적이 없다. 그들은 실제로는 매우 똑똑하고 호응할 수 있으며 미디어 조회가 필요하지 않다. 우리가 지금 바로 살펴보자.
이 예에서, 나는 CSS Custom Properties을 사용하기 시작할 것이다. 이것은 매우 유용해질 것이다. 점진적인 강화를 사용하면, 우리는 이 변수를 사용하여 크기와 다른 설정을 공유할 수 있다.
css의 경우 다음과 같은 열 속성을 사용합니다.

    column-gap: 1rem;
    column-fill: initial;
    column-width: 300px;

acolumn-width를 설정하면 열이 축소되기 전에 열의 최소 너비를 설정합니다. 이것은 작은 장치에서 CSS 격자와 같은 단일 열을 얻을 수 있음을 의미합니다.
특정 열 수를 설정하려면 column-count 속성을 사용할 수 있습니다.원하는 기능:
옵션 예:

/* larger */
@media (min-width: 1024px) {
  .masonry {
    column-count: 4;
  }
}

/* medium */
@media (max-width: 1023px) and (min-width: 768px) {
  .masonry {
    column-count: 3;
  }
}

/* small, anything smaller will be 1 column by default */
@media (max-width: 767px) and (min-width: 540px) {
  .masonry {
    column-count: 2;
  }
}

우리는 이렇게 하지 않을 것이다. 우리는 column-width만 이용하고 우리의 열을 최대 카드 폭으로 늘릴 수 있을 뿐이다.
이전과 같은 html에서 css를 변경했습니다.
결과는 매우 비슷하지만 두 가지 주요 차이가 있다.

항의 순서는 css 격자를 통해 줄을 건너는 것이 아니라 열을 따라 아래로 내려간다.기둥:⬇️ 격자:➡️

저희는 불안정한 밑바닥 뒷면이 있습니다(css열은 복구가 쉽지 않습니다)

첫 번째 차이는 거래가 깨진 것일 수도 있다. 이것은 용례에 달려 있다. 나에게 있어서 순서는 사실 결코 중요하지 않다.

점진적 증강

현재 우리는 미래에 어떻게 벽돌과 돌의 구조를 실현할 수 있는지 알고 있으며 css의 신기함@supports 키워드와 결합시킬 예비 방안을 제공했다.

@supports(grid-template-rows: masonry) {
    .masonry {
      display: grid;
      gap: var(--masonry-gap);
      grid-template-rows: masonry;
      grid-template-columns: repeat(auto-fill, minmax(var(--masonry-brick-width), 1fr));
      align-tracks: stretch;
    }

    .masonry > * {
        /* use this to reset the margin that the column variant set */
        margin-bottom: initial;
    }
}

마찬가지로 HTML을 변경하지 않고 css 격자를 사용하여 블록 레이아웃을 만듭니다@supports.

.masonry {
    --masonry-gap: 1rem;
    --masonry-brick-width: 300px;
    column-gap: var(--masonry-gap);
    column-fill: initial;
    column-width: var(--masonry-brick-width);
}

.masonry > * {
    break-inside: avoid;
    margin-bottom: var(--masonry-gap);
}

@supports(grid-template-rows: masonry) {
    .masonry {
      display: grid;
      gap: var(--masonry-gap);
      grid-template-rows: masonry;
      grid-template-columns: repeat(auto-fill, minmax(var(--masonry-brick-width), 1fr));
      align-tracks: stretch;
    }

    .masonry > * {
        margin-bottom: initial;
    }
}

/* some styling not important */
.brick {
    color: var(--Text, #F0F0F0);
    background: var(--Primary, #74baff);
    padding:1rem;
}

현재, 이 예에서 브라우저가 지원하는 내용에 따라 CSS 격자나 CSS 열 버전을 얻을 수 있습니다.grid-template-rows: masonry 현재와 더 많은 브라우저 발표 사이에 변화가 없다면, 우리는 몇 가지 CSS를 작성했습니다. 이것은 시간의 추이에 따라 자동으로 업그레이드되고, 수평 정렬이 아닌 밑바닥의 불안정하고 수직 정렬된 기술 채무/UX '결함'을 복구합니다.

상금 라운드

나의 실현에서 나는 벽돌과 돌의 배치에서 N개의'벽돌'마다 서로 다른 카드 배경을 가지고 놀고 있다.

.brick:nth-child(4n - 7) {
    background: #5A363A;
}

.brick:nth-child(4n - 6) {
    background: #82212C;
}

.brick:nth-child(4n - 5) {
    background: #3A3E41;
}

.brick:nth-child(4n - 4) {
    background: #292A2B;
}

CSS의 nth-child 속성을 사용하면 아주 교묘한 기교를 사용할 수 있습니다. 만약에 초보자라면 유용한 배경 자료를 읽을 수 있습니다.

How nth-child Works

Useful :nth-child Recipes

다음은 완전한 프레젠테이션입니다.
전편을 읽어 주셔서 감사합니다. 저는 이것이 유용하길 바랍니다. 언젠가 저희가 CSS에서 흔들리는 밑부분을 가볍게 처리할 수 있기를 바랍니다.