최신 CSS를 사용하여 반응 형 이미지 그리드를 구축합니다

이 기사는 반응 형 그리드 레이아웃의 열 사이의 간격을 마스터하는 기술을 탐색하여 반응 형 이미지 갤러리를 실용적인 예로 사용합니다.

반응 레이아웃에 대한 추가 통찰력을 얻으려면 Screencast : Flexbox에서 여러 열 레이아웃 생성을보십시오. 키 테이크 아웃 :

반응 형 이미지 갤러리에서 시연되는 것처럼 컬럼 간 간격을 정확하게 제어함으로써 맞춤형 응답 레이아웃이 달성 될 수 있습니다.

메소드는 반응 형 이미지 갤러리를 만듭니다. 부모의 글꼴 크기를 0으로 설정하면 기본 인라인 블록 간격이 제거됩니다. Flexbox는 일반적인 레이아웃 문제를 효율적으로 해결하여 모든 화면 크기에 걸쳐 동등한 높이 열을 생성하여 반응 형 이미지 그리드에서 열 간격 제어를 단순화합니다. 미디어 쿼리 및 CSS 그리드 레이아웃은 장치 특성 (화면 크기)에 따라 다른 CSS 규칙을 적용하여 반응 형 이미지 그리드를 활성화합니다.

반응 레이아웃 구축 : 더 큰 화면에서 갤러리는 다음과 비슷합니다

작은 화면에서 :
간단한 마크 업 :
• 몇 가지 레이아웃 방법이이를 달성합니다. 두 가지를 탐색하기 전에 요구 사항을 반복해 봅시다 : display: inline-block 중간 및 작은 화면에서 2 열 레이아웃 8px 컬럼 간 간격.
• 사용
:

메소드는 갤러리를 빌드합니다. 이 CSS를 고려하십시오 : <:> 설명 : 기본 인라인 블록 간격은 부모의 글꼴 크기를 0으로 설정하여 무시됩니다. 하위 요소 글꼴 크기는 재설정이 필요할 수 있습니다 (여기서는 아님) 작은 스크린에는 8px 간격이있는 2 열 레이아웃이 있습니다. 열 너비 계산 :

행당 총 컬럼 간 공간 : 1 * 8px = 8px (오른쪽 마진이 매번 열에서 제거되기 때문에 16px가 아닌 8px). <:> 열 폭 :

(4px = 8px / 2)

큰 화면에는 8px 간격이있는 4 열 레이아웃이 있습니다. 열 너비 계산 :

행당 총 컬럼 간 공간 : 3 * 8px = 24px (오른쪽 마진이 모든 네 번째 열에서 제거되기 때문에 32px가 아닌 24px). <:> 열 너비 :

(6px = 24px / 4)

메소드의 Codepen 데모를 참조하십시오Flexbox를 사용하는

> 솔루션에는 단점이 있습니다. 캡션을 추가하면 가 나타납니다 업데이트 된 마크 업 :

캡션이있는 대형 스크린 갤러리 :

inline-block 불평등 한 높이는 Flexbox로 해결됩니다. 부모 요소의 CSS를 업데이트하십시오 :

결과는 모든 화면에서 동일한 높이 열입니다. 큰 화면 예제 :

개선 된 캡션이있는 Flexbox를 사용하여 Codepen 데모를 참조하십시오 Flexbox의 속성은이 레이아웃을 직접 생성하지 않습니다. 및

<div>
  <a href="https://www.php.cn/link/14d2bc475177e1dde633b4ca1972d53c">
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Using Modern CSS to Build a Responsive Image Grid " />
  </a>
  <!-- ...more images... -->
</div>

는 마지막 행에 어색한 분포를 초래합니다. CSS :

아니요

가 필요합니다. 항목 분배를 처리합니다 속성을 ​​사용하여 Codepen 데모를 참조하십시오

결론 :

이 게시물은 반응 형 이미지 그리드에서 열 간격을 제어하는 ​​기술을 자세히 설명합니다.

가 충분하지만 Flexbox는 특히

div {
  font-size: 0;
}

a {
  font-size: 16px;
  display: inline-block;
  margin-bottom: 8px;
  width: calc(50% - 4px);
  margin-right: 8px;
}

a:nth-of-type(2n) {
  margin-right: 0;
}

@media screen and (min-width: 50em) {
  a {
    width: calc(25% - 6px);
  }

  a:nth-of-type(2n) {
    margin-right: 8px;
  }

  a:nth-of-type(4n) {
    margin-right: 0;
  }
}

에서 더 쉽고 편리합니다. Screencast에서 Flexbox 레이아웃에 대해 자세히 알아보십시오 : Flexbox에서 여러 열 레이아웃 생성.

(FAQS 섹션은 일반적인 반응 형 디자인 질문의 반복이기 때문에 간결하게 생략되었습니다.)

위 내용은 최신 CSS를 사용하여 반응 형 이미지 그리드를 구축합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!