응답형 이미지 그리드 생성 방법

응답형 이미지 그리드를 만드는 방법을 배웁니다。

응답형 이미지 그리드

화면 크기에 따라 네 장, 두 장 또는 전체 너비 이미지 간으로 전환할 수 있는 이미지 갤러리를 만드는 방법을 배웁니다：

직접 시도해 보세요

이미지 그리드 생성

第一步 - HTML 추가：

<div class="row">
  <div class="column">
    <img src="wedding.jpg">
    <img src="rocks.jpg">
    <img src="falls2.jpg">
    <img src="paris.jpg">
    <img src="nature.jpg">
    <img src="mist.jpg">
    <img src="paris.jpg">
  </div>
  <div class="column">
    <img src="underwater.jpg">
    <img src="ocean.jpg">
    <img src="wedding.jpg">
    <img src="mountainskies.jpg">
    <img src="rocks.jpg">
    <img src="underwater.jpg">
  </div>
  <div class="column">
    <img src="wedding.jpg">
    <img src="rocks.jpg">
    <img src="falls2.jpg">
    <img src="paris.jpg">
    <img src="nature.jpg">
    <img src="mist.jpg">
    <img src="paris.jpg">
  </div>
  <div class="column">
    <img src="underwater.jpg">
    <img src="ocean.jpg">
    <img src="wedding.jpg">
    <img src="mountainskies.jpg">
    <img src="rocks.jpg">
    <img src="underwater.jpg">
  </div>
</div>

第二步 - CSS 추가：

CSS Flexbox를 사용하여 응답형 레이아웃을 생성합니다：

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}
/* 네 개의 가로로 배치된 동일한 열을 만듭니다 */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}
.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}
/* 응답형 레이아웃 - 두 열 레이아웃을 만듭니다 */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}
/* 응답형 레이아웃 - 두 열이 가로로 배치되지 않고 쌓이도록 합니다 */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

직접 시도해 보세요

관련 페이지

강의:CSS Flexbox

강의:이미지 그리드 생성 방법