Labels

CSS Image Gallery (Flexible Type)

We will use CSS media queries to create a flexible Image Gallery. It changes the shape, size, position etc. of the Images, depending on screen sizes.

Flexible Image Gallery

This example use media queries and flexbox to change the width of Images, when the screen size changes.

media queries are CSS styles, that is applied to the same elements, depending on screen sizes.

Resize the Browser to see the effect.

Responsive Image Grid

Resize the browser window to see the responsive effect.

Example

<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
}

.header {
text-align: center;
padding: 32px;
}

.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}

.column img {
margin-top: 8px;
vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
</style>

<!-- Photo Grid -->
<div class="row">
<div class="column">
<img src="wedding.jpg" style="width:100%">
<img src="love.jpg" style="width:100%">
<img src="falls.jpg" style="width:100%">
<img src="moon.jpg" style="width:100%">
<img src="love.jpg" style="width:100%">
<img src="moon.jpg" style="width:100%">
<img src="love.jpg" style="width:100%">
</div>

<div class="column">
<img src="view.jpeg" style="width:100%">
<img src="ocean.jpg" style="width:100%">
<img src="wedding.jpg" style="width:100%">
<img src="moon.jpg" style="width:100%">
<img src="love.jpg" style="width:100%">
<img src="view.jpeg" style="width:100%">
</div>

<div class="column">
<img src="wedding.jpg" style="width:100%">
<img src="love.jpg" style="width:100%">
<img src="falls.jpg" style="width:100%">
<img src="moon.jpg" style="width:100%">
<img src="love.jpg" style="width:100%">
<img src="moon.jpg" style="width:100%">
<img src="love.jpg" style="width:100%">
</div>

<div class="column">
<img src="view.jpeg" style="width:100%">
<img src="ocean.jpg" style="width:100%">
<img src="wedding.jpg" style="width:100%">
<img src="moon.jpg" style="width:100%">
<img src="love.jpg" style="width:100%">
<img src="view.jpeg" style="width:100%">
</div>
</div>

Example Explained

  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> - This Sets the viewport to the same as device width. This is required for the Flexible Image Grid to work properly.
  • * { box-sizing: border-box; } - This Sets the width of the element to include padding and borders.
  • .row { display: flex; flex-wrap: wrap; padding: 0 4px; } - This Sets the <div> element with class "row" to flexible div, which will change the layout depending on screen sizes with the help of media query.
  • .column { flex: 25%; max-width: 25%; padding: 0 4px; } - This Sets the <div> element with class "column", which is inside <div> element with class "row" to the width of 25%.
  • .column img { margin-top: 8px; vertical-align: middle; } - The vertical-align sets the vertical alignment of Images to the middle i.e all the Images will be aligned with taking it's middle as baseline.

Tags

Comments

Post a Comment