Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Lưới thư viện ảnh

Dùng khi cần bày nhiều ảnh một lúc và cho người xem chọn một ảnh để mở lớn.

Phương tiện

Xem trước trực tiếp

Nguồn

<ul class="dc-gallery" aria-label="3공구 9월 12일 사진 6장">
  <li class="dc-gallery__cell"><button type="button" class="dc-gallery__item"><span class="dc-sr">크게 보기 — 터파기 전경</span></button></li>
  <li class="dc-gallery__cell"><button type="button" class="dc-gallery__item"><span class="dc-sr">크게 보기 — 철근 배근</span></button></li>
  <li class="dc-gallery__cell"><button type="button" class="dc-gallery__item"><span class="dc-sr">크게 보기 — 거푸집 설치</span></button></li>
  <li class="dc-gallery__cell"><button type="button" class="dc-gallery__item"><span class="dc-sr">크게 보기 — 타설 전 점검</span></button></li>
  <li class="dc-gallery__cell"><button type="button" class="dc-gallery__item"><span class="dc-sr">크게 보기 — 양생 상태</span></button></li>
  <li class="dc-gallery__cell"><button type="button" class="dc-gallery__item"><span class="dc-sr">크게 보기 — 마감 확인</span></button></li>
</ul>
.dc-gallery {
  /* 가림막은 밝은 모드에서도 어둡다. --dc-text-on 은 다크 모드에서 검어지므로 여기엔 쓸 수 없다 */
  --dc-on-media: white;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--dc-3);
  margin: 0; padding: 0; list-style: none;
  font-family: var(--dc-font);
}
.dc-gallery__cell { min-width: 0; }
.dc-gallery__item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-r-sm);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--dc-brand) 28%, var(--dc-sunken)),
    var(--dc-sunken));
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--dc-fast), box-shadow var(--dc-fast);
}
.dc-gallery__cell:nth-child(3n + 2) .dc-gallery__item {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--dc-info) 28%, var(--dc-sunken)),
    var(--dc-sunken));
}
.dc-gallery__cell:nth-child(3n) .dc-gallery__item {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--dc-ok) 26%, var(--dc-sunken)),
    var(--dc-sunken));
}
.dc-gallery__item:hover { transform: translateY(-2px); box-shadow: var(--dc-sh-2); }
.dc-gallery__more {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, black 28%, var(--dc-overlay));
  color: var(--dc-on-media);
  font-size: 15px; font-weight: 700;
}
.dc-gallery__cell--wide { grid-column: span 2; grid-row: span 2; }
.dc-gallery__cell--wide .dc-gallery__item { aspect-ratio: auto; height: 100%; }
.dc-gallery__fig { margin: 0; display: flex; flex-direction: column; gap: var(--dc-2); }
.dc-gallery__cap { font-size: 12px; line-height: 1.4; color: var(--dc-text-sub); }

Cách dùng

  • Đặt chiều rộng ô tối thiểu thay vì số cột cố định để lưới tự xuống dòng
  • Mỗi ô là một thứ để bấm — dùng button và đặt tên cho ảnh mà nó mở
  • Quá khoảng mười ảnh, hãy gộp phần còn lại thành con số ở ô cuối

Điểm cần lưu ý

  • Cắt vuông dễ mất mặt người và chữ ghi tại hiện trường — kiểm tra phần bị cắt
  • Khoảng cách dưới 4px làm mất đường ranh, cả lưới trông như một ảnh

Tiếp theo