CSS: 석조 레이아웃

조적배치란 무엇인가요?

MDN에서:

석조 레이아웃은 한 축은 전형적인 엄격한 그리드 레이아웃(주로 기둥)을 사용하고 다른 축은 석조 레이아웃을 사용하는 레이아웃 방법입니다. 조적 축에서는 짧은 항목 뒤에 간격을 두는 엄격한 그리드를 고수하기보다는 다음 행의 항목이 올라와 간격을 완전히 채웁니다.

pinterest.com의 레이아웃은 전형적인 예입니다.

CSS 도구 상자에서 무엇을 사용할 수 있나요?

그리드

간단한 HTML 마크업을 사용합니다.

<div>



<p>My first shot was grid & grid-template-column<br>
</p>

<pre class="brush:php;toolbar:false">.photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;

  img{
    width: 100%;
  }
}

반응성은 좋지만 각 이미지 아래에 공백이 있습니다.

열 개수

다음으로 열 개수 CSS 컨테이너 속성을 사용하세요.

column-count CSS 속성은 요소의 콘텐츠를 지정된 수의 열로 나눕니다.

.photos {
  column-count: 4;

  img{
    width: 100%;
    margin-bottom: 1rem;
  }
}

좋지 않아요.
현재 레이아웃은 원하는 대로 보이지만 이미지 크기가 조정되어 반응하지 않습니다. 미디어 쿼리를 사용하여 응답성을 제어할 수 있지만 보다 강력한 솔루션을 목표로 하고 있습니다.

열 사용

column CSS 단축 속성은 요소의 내용을 그릴 때 사용할 열 수와 해당 열의 너비를 설정합니다.

.photos {
  columns: 250px;

  img{
    width: 100%;
    margin-bottom: 1rem;
  }
}

한 줄의 코드. 대단해요!

어떻게 작동하나요?

각 열의 최소 너비는 250px입니다. 250px를 초과하는 추가 공간이 있는 경우 열이 확장되어 공간을 채웁니다. 공간이 줄어들면 그에 따라 열 수도 줄어듭니다.

엑스트라

레이아웃을 최대 X개 열로 설정하여 열 수를 제한할 수 있습니다.

.photos {
  columns: 250px 2;
  ...
  ...
}

사용

열
석조 이미지 레이아웃에만 국한되지 않습니다. 또한 이를 사용하여 텍스트 열의 스타일을 지정할 수도 있습니다(동일한 CSS, 다른 콘텐츠).

최종 생각

도움이 되었나요?
사용 사례는 무엇이었나요?

위 내용은 CSS: 석조 레이아웃의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!