How to stretch content outside the page layout-CodePudding

I'm trying to create this design where the content stretch left and right of the browser window.

This is what I've tried:

.ig-feed{
  position: relative;
  height: 664px;
  overflow: hidden;
}

.ig-feed .ig-feed__feed-container{
  height: 260px;
  position: absolute;
  left: -146px;
  right: -146px;
  display: flex;
  justify-content: space-between;
}

<div >
  <div >
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
  </div>
</div>

My design takes a lot more space between the images due to justify-content: space-between;

How should I make it just take 20px between the images with stretch all the way to left and right.

My Jsfiddle

Please any help would be appreciated.

CodePudding user response：

You can add margin-right and depends on your screen size you can give responsive width values for your images

.ig-feed__feed-container a {
  margin-right: 20px;
 }

.ig-feed{
  position: relative;
  height: 664px;
  overflow: hidden;
}

.ig-feed .ig-feed__feed-container{
  height: 260px;
  position: absolute;
  left: -146px;
  right: -146px;
  display: flex;
}

.ig-feed__feed-container a {
  margin-right: 20px;
 }

<div >
  <div >
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
  </div>
</div>

CodePudding user response：

You can add a gap property with a value (adding 20px as you mentioned) to add a gap between them. I believe this is all you are looking for based on the design mentioned.

.ig-feed{
  position: relative;
  height: 664px;
  overflow: hidden;
}

.ig-feed .ig-feed__feed-container{
  height: 260px;
  position: absolute;
  left: -146px;
  right: -146px;
  display: flex;
  gap:20px;
  justify-content: space-between;
}

<div >
  <div >
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
    <a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
  </div>
</div>