I want grid items with a fixed width to span the full width of their parent container, leaving equal spacing between them. How can I achieve a similar layout using CSS Grid or Flexbox?
Here’s the example code I’m working with:
.wrapper { background-color: black; width: 500px; margin: 0 auto; padding: 0 30px;}.grid { display: grid; grid-template-columns: repeat(16, 1fr); justify-items: center; width: 100%; gap: 25px;}.grid-item { background-color: red; grid-column: span 4; width: 50px; height: 50px;}.grid-item:nth-child(5) { grid-column: 3 / span 4;}<div class="wrapper"><div class="grid"><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div></div></div>This is how it should look (with the first item aligned to the left and the fourth item aligned to the right edges of the parent view):Image may be NSFW.
Clik here to view.
