'How to stretch content outside the page layout

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 class="ig-feed">
  <div class="ig-feed__feed-container">
    <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.

htmlcss


Solution 1:[1]

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 class="ig-feed">
  <div class="ig-feed__feed-container">
    <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>

Solution 2:[2]

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 class="ig-feed">
  <div class="ig-feed__feed-container">
    <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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Evren
Solution 2 innocent

Related Questions