You can use flexbox for the layout. Flex wrap and width will deal with the amount of items per row. You don’t need the row wrappers. Play around with the widths and heights as needed. I added some placeholder images.
You can use a relative wrapper (which can be the item itself) and an absolute child (title) for the text on top, also z-index for layering.
.tile {
/* TODO: MODULE_CARDS */
/* 1. Fill in the required properties. */
box-sizing: border-box;
padding: 20px;
margin-bottom: 10px;
position: absolute;
}
.tile img {
/* TODO: MODULE_CARDS */
/* 1. Fill in the required properties. */
height: 100%;
margin: 0;
padding: 0;
width: 100%;
border-radius: 25px;
z-index: 6;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
width: 120vh;
margin: auto;
}
.item {
padding: 0;
width: 25vh;
height: 40vh;
background-color: green;
border-radius: 25px;
position: relative;
}
.title {
position: absolute;
bottom: 10vh;
z-index: 7;
left: 30%
}
<div class="container">
<div class="item tile d-flex justify-content-center">
<span class="title">Place</span>
<img src="https://via.placeholder.com/250x400" alt="bengaluru" class="tile img">
</div>
<div class="item tile d-flex justify-content-center">
<span class="title">Place</span>
<img src="https://via.placeholder.com/250x400" alt="kolkata" class="tile img">
</div>
<div class="item tile d-flex justify-content-center">
<span class="title">Place</span>
<img src="https://via.placeholder.com/250x400" alt="goa" class="tile img">
</div>
<div class="item tile d-flex justify-content-center">
<span class="title">Place</span>
<img src="https://via.placeholder.com/250x400" alt="mumbai" class="tile img">
</div>
<div class="item tile d-flex justify-content-center">
<span class="title">Place</span>
<img src="https://via.placeholder.com/250x400" alt="singapore" class="tile img">
</div>
<div class="item tile d-flex justify-content-center">
<span class="title">Place</span>
<img src="https://via.placeholder.com/250x400" alt="dubai" class="tile img">
</div>
<div class="item tile d-flex justify-content-center">
<span class="title">Place</span>
<img src="https://via.placeholder.com/250x400" alt="malaysia" class="tile img">
</div>
<div class="item tile d-flex justify-content-center">
<span class="title">Place</span>
<img src="https://via.placeholder.com/250x400" alt="paris" class="tile img">
</div>
</div>
There are some bootstrap col classes for doing that. You can use those with responsive as well. Bootstrap gives a class named img-thumbnail for images. I’ve used that with a little bit of overriding by CSS with keeping your original CSS.
Here is the image of a working example:
Have a look at the snippet below:
Note: Maximize your screen to understand better. If you want to know more about bootstrap’s grid system, check this link out.
.thumb {
margin-top: 15px;
margin-bottom: 15px;
}
.img-thumbnail {
/* TODO: MODULE_CARDS */
/* 1. Fill in the required properties. */
border: none !important;
border-radius: 25px !important;
max-width: 100%;
height: 50vh !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="container">
<!-- TODO: MODULE_LAYOUT -->
<!-- 1. Create the grid like layout as required. -->
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vidhana_Soudha_sunset.jpg" alt="bengaluru"
class="img-thumbnail">
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vidhana_Soudha_sunset.jpg" alt="kolkata"
class="img-thumbnail">
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vidhana_Soudha_sunset.jpg" alt="goa"
class="img-thumbnail">
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vidhana_Soudha_sunset.jpg" alt="mumbai"
class="img-thumbnail">
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vidhana_Soudha_sunset.jpg" alt="singapore"
class="img-thumbnail">
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vidhana_Soudha_sunset.jpg" alt="dubai"
class="img-thumbnail">
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vidhana_Soudha_sunset.jpg" alt="malaysia"
class="img-thumbnail">
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vidhana_Soudha_sunset.jpg" alt="paris"
class="img-thumbnail">
</div>
</div>
I need a view as given in image below
2
.tile {
/* TODO: MODULE_CARDS */
/* 1. Fill in the required properties. */
box-sizing: border-box;
padding: 20px;
margin-bottom: 10px;
}
.tile img {
/* TODO: MODULE_CARDS */
/* 1. Fill in the required properties. */
border-radius: 25px;
max-width: 100%;
height: 50vh;
}
<div class="container">
<!-- TODO: MODULE_LAYOUT -->
<!-- 1. Create the grid like layout as required. -->
<div class = "row">
<div class = "tile d-flex justify-content-center">
<img src = "assets/bengaluru.jpg" alt = "bengaluru" class ="tile img" >
</div>
<div class = "tile d-flex justify-content-center">
<img src = "assets/kolkata.jpg" alt = "kolkata" class ="tile img" >
</div>
<div class = "tile d-flex justify-content-center">
<img src = "assets/goa.jpg" alt = "goa" class ="tile img" >
</div>
<div class = "tile d-flex justify-content-center">
<img src = "assets/mumbai.jpg" alt = "mumbai" class ="tile img" >
</div>
</div>
<div class = "row">
<div class = "tile d-flex justify-content-center">
<img src = "assets/singapore.jpg" alt = "singapore" class ="tile img" >
</div>
<div class = "tile d-flex justify-content-center">
<img src = "assets/dubai.jpg" alt = "dubai" class ="tile img" >
</div>
<div class = "tile d-flex justify-content-center">
<img src = "assets/malaysia.jpg" alt = "malaysia" class ="tile img" >
</div>
<div class = "tile d-flex justify-content-center">
<img src = "assets/paris.jpg" alt = "paris" class ="tile img" >
</div>
</div>
I need a help how to fix number of images for flexbox items per row. As the webpage should be responsive means adjusting number of images per row according to screen dimensions
you should probably move the image into your question rather than on imgur (external site)
