<!DOCTYPE html>

<html>

<head>

<title>Responsive image gallery</title>

*{

box-sizing: border-box;

}

.gallery{

border:1px solid #ccc;

}

.gallery img{

width: 100%;

height: auto;

}

.des{

padding: 15px;

text-align: center;

}

.responsive{

padding: 0 6px;

float: left;

width: 25%;

}

@media only screen and (max-width: 700px){

.responsive{

width: 50%;

margin:6px 0;

}

}

@media only screen and (max-width: 500px){

.responsive{

width: 100%;

}

}

</style>

</head>

<body>

<h1>Responsive image gallery</h1>

<div class="des">Add a Description of the image here</div>

</div>

</div>

<div class="des">Add a Description of the image here</div>

</div>

</div>

<div class="des">Add a Description of the image here</div>

</div>

</div>

<div class="des">Add a Description of the image here</div>

</div>

</div>

</body>

</html>

how to create responsive image gallery using html and css