<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
.parent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-basis: auto;
width: 100%;
height: 250px;
background-color: indigo;
}
.child {
width: 33.33333%;
height: 100px;
background-color: pink;
border: 1px solid indigo;
box-sizing: border-box;
}
.child:nth-child(3n+1):nth-last-child(2),
.child:nth-child(3n+1):nth-last-child(2) + div {
width: 50%;
}
.child:nth-child(3n+1):last-child {
width: 100%;
}
let responseG
const url = 'https://api.themoviedb.org/3/movie/popular?api_key=335b7e902b7b73259a92dc0ef724bb92&language=ru-RU&page=1'
const moiveRequest = fetch(url)
.then((r) => r.json())
.then(data => responseG = data)
moiveRequest.then((r)=> console.log(r))
new HtmlWebpackPlugin({
//пути отличаются
template: path.resolve(__dirname, './src/index.html'),
filename: 'index.html',
}),
new Dotenv(),
new HtmlWebpackPlugin({
//пути отличаются
template: 'src/index.html',
filename: 'index.html',
inject: 'body'
})
.r-p-m-item {
background: #ffffff;
box-shadow: 0px 0px 20px rgba(228, 236, 241, 0.7);
border-radius: 15px;
max-width: 535px;
width: 100%;
padding: 20px 30px;
position: relative;
//overflow нужен чтобы спрятать всё то, что выходит за рамки
overflow: hidden;
z-index: 200;
border: 1px solid red;
}
https://api.giphy.com/v1/gifs/trending?api_key=ключ&limit=число
Если к API нужен ключ (api_key), то смотри документацию как его получить.