How to make grid gap responsible?

fatihbulbul7 0
Viewed 23

I have a note app, and this is my styling for note grid:

.notes-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px, 0.2fr)); 
  gap: 10px;
}

grid template columns was repeat(auto-fit,minmax(250px, 1fr)); before, but i want to make the gap responsive, not the size of notes.

I set an initial value for gap, and it is 10px. When grid starts to wrap, i want to change gap responsibly to fill blank area. I want to spread notes across the width to right of 'note3'

css-grid css
1 Answers

You need to play with alignment:

.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 0.2fr));
  gap: 10px;
  justify-content: space-between; /* added this */
}

.notes-grid > div {
  border-radius: 10px;
  height: 150px;
  background: red;
}
<div class="notes-grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Temani Afif0
Related