CODEWITHSUNDEEP
csscss-grid
jh3215
jh3215

Reputation: 189

How do I make my CSS grid responsive and fills up my full container?

I have a problem right now with my grid that leaves this blank space on the sides (circled in red): enter image description here

It becomes even worse when I make the screen size smaller and the grid reformats itself: enter image description here

I want it so all my elements span the full width of my container and fill up this empty space so it'll be in line with my search bar. In other words, I don't want this extra space on both sides of my grid: enter image description here

This is my CSS grid code.

.grid {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    justify-content: center;

    /* grid-template-columns: repeat(auto-fit, minmax(226px, 360px)); */
    grid-template-columns: repeat(auto-fill, 226px);
}

As you can see I also tried the commented out line, but that doesn't work either. I also tried auto-fit instead, but it also doesn't do anything. And I tried width: 100% as well as gap: auto but neither of them work. How do I fill up this space with my grid? Below is a snippet with the same problem.

.full-card {
    background-color: #6a90c9;
    width: 226px;
    height: 289px;
}

.grid {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    justify-content: center;

    /* grid-template-columns: repeat(auto-fit, minmax(226px, 360px)); */
    grid-template-columns: repeat(auto-fill, 226px);
}
<div class="container" style="padding: 50px;">       
  <div class="grid">

            <div class="full-card">
            </div>
           <div class="full-card">
            </div>
           <div class="full-card">
            </div>
           <div class="full-card">
            </div>
      </div>
 </div>

Thanks in advance

Upvotes: 3

Views: 165

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23490

You can try with justify-content: space-between;

.container {
  display: flex;
  flex-direction: column;
}
.grid {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 226px);
}
.search {
  wisth: 100%;
  mergin-bottom: 5px;
}
<div class="container">
  <input class="search" type="text" placeholder="Search..." />
  <div class="grid">
    <img src="https://picsum.photos/250" />
    <img src="https://picsum.photos/250" />
    <img src="https://picsum.photos/250" />
    <img src="https://picsum.photos/250" />
  </div>
</div>

Upvotes: 3

Related Questions