--- id: css-image-gallery title: "CSS Image Gallery" category: "Frontend" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["image gallery", "photo gallery", "responsive gallery", "flexbox gallery", "CSS gallery"] duplicate_of: "" source_trust_level: "B" confidence_score: 0.89 created_at: 2026-06-23 updated_at: 2026-06-23 review_reason: "" merge_history: [] tags: ["css", "web", "frontend", "w3schools", "gallery", "flexbox", "responsive"] raw_sources: ["https://www.w3schools.com/css/css_image_gallery.asp"] applied_in: [] github_commit: "" --- # [[CSS Image Gallery]] ## 🎯 ν•œ 쀄 톡찰 (One-line insight) A CSS image gallery arranges a collection of images in an organized, often responsive layout using `display: flex` with `flex-wrap: wrap`, then adapts the per-item width with `@media` queries for different screen sizes. [S1] ## 🧠 핡심 κ°œλ… (Core concepts) - **Image gallery** β€” a collection of images displayed in an organized, and often responsive, way on a web page. [S1] - **Container structure** β€” a wrapping element (typically `
`) holds individual item containers (typically `
`), each containing an `` and optionally a description. [S1] - **Flexbox layout** β€” the gallery container uses `display: flex;` with `flex-wrap: wrap;`, an effective module for arranging images in rows or columns. [S1] - **Responsive sizing** β€” `@media` queries change the per-item width so the number of images per row adapts to the viewport width. [S1] - **Fluid images** β€” images are set to `width: 100%; height: auto;` so each scales to fit its item container. [S1] ## 🧩 μΆ”μΆœλœ νŒ¨ν„΄ (Extracted patterns) - **Flex-wrap grid** β€” `display: flex; flex-wrap: wrap;` on a container lets fixed/percentage-width items flow into rows and wrap automatically. [S1] - **Breakpoint width swap** β€” keep the markup constant and change only `.gallery-item` width at breakpoints (`calc(25% - 20px)` β†’ `calc(50% - 20px)` β†’ `calc(100% - 20px)`) to get 4 / 2 / 1 columns. [S1] - **Hover affordance** β€” darken the item border on `:hover` to signal interactivity. [S1] ## πŸ“– μ„ΈλΆ€ λ‚΄μš© (Details) **What is a CSS image gallery?** A CSS image gallery is a collection of images that is displayed in an organized, and often responsive way, on a web page. The HTML uses a container `
` wrapping individual `
` elements, each holding an `` and possibly a description. [S1] **Example 1 β€” Basic Image Gallery** The gallery container is a flex row that wraps; each item has a `5px` margin, a `1px` border (darkening on hover), and a fixed `180px` width. Images fill the item width, and the `.desc` caption is padded and centered: [S1] ```html
Cinque Terre
Cinque Terre
Forest
Green Forest
Northern Lights
Northern Lights
Mountains
Mountains
``` **Tip:** `display: flex;` is used for the image gallery above. This layout module is effective for arranging images in rows or columns. [S1] **Example 2 β€” Responsive Image Gallery** Adds `box-sizing: border-box` globally and uses percentage widths via `calc()`. Media queries re-arrange the images per the rule set: larger than 768px shows four side by side, smaller than 768px shows two, and smaller than 480px stacks them vertically (100%): [S1] ```html

Responsive Image Gallery

Resize the browser window to see the effect!

Cinque Terre
Cinque Terre
Forest
Green Forest
Northern Lights
Northern Lights
Mountains
Mountains
``` Media-query rules summarized on the page: if the screen is larger than 768px wide, show four images side by side; if smaller than 768px, show two side by side; if smaller than 480px, stack the images vertically (100%). **Tip:** You will learn more about media queries later in the CSS Tutorial. [S1] ## πŸ› οΈ 적용 사둀 (Applied in summary) The page's two examples β€” a fixed-width flex gallery and a responsive percentage-width gallery β€” are the applied demonstrations. No external project/commit applications found in the source. ## πŸ’» μ½”λ“œ νŒ¨ν„΄ (Code patterns) Flex-wrap gallery container (language: CSS): ```css div.gallery { display: flex; flex-wrap: wrap; justify-content: flex-start; } div.gallery-item img { width: 100%; height: auto; } ``` Responsive breakpoint width swap (language: CSS): ```css div.gallery-item { width: calc(25% - 20px); } @media only screen and (max-width: 768px) { div.gallery-item { width: calc(50% - 20px); } } @media only screen and (max-width: 480px) { div.gallery-item { width: calc(100% - 20px); } } ``` ## βš–οΈ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & updates) No contradictions found in the source. ## βœ… 검증 μƒνƒœ 및 신뒰도 - **μƒνƒœ:** draft - **검증 단계:** conceptual (μ‹€μ œ 적용 사둀 발견 μ‹œ applied/validated둜 승격 κ°€λŠ₯) - **좜처 신뒰도:** B (W3Schools β€” widely used educational reference, not a primary standards body) - **μ‹ λ’° 점수:** 0.89 - **쀑볡 검사 κ²°κ³Ό:** μ‹ κ·œ 생성 (New discovery) ## πŸ”— 지식 κ·Έλž˜ν”„ (Knowledge Graph) - **μƒμœ„/루트:** [[CSS Tutorial]] - **κ΄€λ ¨ κ°œλ…:** [[CSS Flexbox]], [[CSS Media Queries]], [[CSS Image Sprites]] - **μ°Έμ‘° λ§₯락:** Referenced when laying out collections of images responsively, such as portfolios or product grids. ## πŸ“š 좜처 (Sources) - [S1] W3Schools β€” CSS Image Gallery β€” https://www.w3schools.com/css/css_image_gallery.asp ## πŸ“ λ³€κ²½ 이λ ₯ (Change history) - 2026-06-23: Initial draft synthesized from the W3Schools "CSS Image Gallery" page (Astra wiki-curation, P-Reinforce v3.1 format).