CSS avoid column "spread" in container

Question

I use a very simple column layout using column-width equal to the width of the images that are inside. The problem is that, even with column-gap: 0, there still is a gap between the columns when the parent container isn't an exact multiple of the image width because the columns are "spread" across the container's width instead of being pushed in the middle of it like i'd want to.

Here's a fiddle showing my problem: https://jsfiddle.net/GaetanL/q16ja0mx/3/

* {
  margin: 0;
  padding: 0;
}

img {
  width: 100px;
}

.wrapper {
  background-color: red;
}

.group {
  column-width: 100px;
  column-gap: 0px;
  text-align: center;
}

.container {
  width: 450px;
  background-color: blue;
}

<div class="container">
  <div class="group">
    <div class="wrapper"><img src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"></div>
    <div class="wrapper"><img src="https://i.pinimg.com/originals/5b/b4/8b/5bb48b07fa6e3840bb3afa2bc821b882.jpg"></div>
    <div class="wrapper"><img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"></div>
    <div class="wrapper"><img src="https://s.w.org/plugins/geopattern-icon/random-post-for-widget.svg"></div>
    <div class="wrapper"><img src="https://images.theconversation.com/files/135969/original/image-20160830-26282-1tt17ym.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=496&fit=clip"></div>
    <div class="wrapper"><img src="https://www.dumpaday.com/wp-content/uploads/2018/06/random-pictures-10.jpg"></div>
    <div class="wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRYkflEQWLH5gOAEChBRsN0R11n1by_3c24sJRAcGumVARrZ1-k&usqp=CAU"></div>
    <div class="wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSRKJI1Jhsk6iHIUEdgpL2z5USE6S0B54iBIEUU76r1PHYL1_GV&usqp=CAU"></div>
    <div class="wrapper"><img src="https://miro.medium.com/max/11796/1*IC7_pdLtDMqwoqLkTib4JQ.jpeg"></div>
    <div class="wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRN0TyKB-bciZuiyX5ZzJyKGhLSjAPh-ZrUkhr6WJXJzY0qkteE&usqp=CAU"></div>
  </div>
</div>

For the vertical spacing: set your image to `display: block`. For your horizontal spacing: `column-width` behaves more like a minimum width suggestion. In your case you have 4 columns of `100px` (which is `400px`), in a `450px` container, meaning the remaining `50px` will be distributed in the columns' widths. — chriskirknielsen, Jun 19 '20 at 15:28

Temani Afif · Accepted Answer · 2020-06-19T15:51:21.590

You can solve this using CSS grid where you can consider the use of repeat(auto-fit, column_width); then you make your element span all the columns:

img {
  width: 100%;
  display:block; /* remove space between images */
}

.wrapper {
  background-color: red;
  /*display:flex use this to remove all the spaces*/
}

.group {
  column-width: var(--c);
  column-gap: 0px;
  text-align: center;
  grid-column: 1/-1; /* take all the columns*/
}

.container {
  --c:100px; /* column width*/

  width: 450px;
  background-color: blue;
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--c));
  justify-content: center;
  
  /*for the demo, resize and see the result */
  overflow:hidden;
  resize:horizontal;
}

<div class="container">
  <div class="group">
    <div class="wrapper"><img src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"></div>
    <div class="wrapper"><img src="https://i.pinimg.com/originals/5b/b4/8b/5bb48b07fa6e3840bb3afa2bc821b882.jpg"></div>
    <div class="wrapper"><img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"></div>
    <div class="wrapper"><img src="https://s.w.org/plugins/geopattern-icon/random-post-for-widget.svg"></div>
    <div class="wrapper"><img src="https://images.theconversation.com/files/135969/original/image-20160830-26282-1tt17ym.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=496&fit=clip"></div>
    <div class="wrapper"><img src="https://www.dumpaday.com/wp-content/uploads/2018/06/random-pictures-10.jpg"></div>
    <div class="wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRYkflEQWLH5gOAEChBRsN0R11n1by_3c24sJRAcGumVARrZ1-k&usqp=CAU"></div>
    <div class="wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSRKJI1Jhsk6iHIUEdgpL2z5USE6S0B54iBIEUU76r1PHYL1_GV&usqp=CAU"></div>
    <div class="wrapper"><img src="https://miro.medium.com/max/11796/1*IC7_pdLtDMqwoqLkTib4JQ.jpeg"></div>
    <div class="wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRN0TyKB-bciZuiyX5ZzJyKGhLSjAPh-ZrUkhr6WJXJzY0qkteE&usqp=CAU"></div>
  </div>
</div>

Wow, it works. I dont really understand everything, especially the grid-column: 1/-1 bit. The only thing is that group isn't horizontally centered inside container and margin-auto won't work. — Gaetan L., Jun 19 '20 at 15:48
Perfect! If you feel like it can you explain the 1/-1 thingy? Tried to look it up but the explanations flew over my head :D — Gaetan L., Jun 19 '20 at 15:53
@GaetanL. grid-column: 1/-1; means that we start from the first line to the end line so we take all the columns defined by the grid using repeat(auto-fit, var(--c)) ... it's the longhand of grid-column-start:1 grid-column-end:-1 — Temani Afif, Jun 19 '20 at 15:54
@GaetanL. check this: https://stackoverflow.com/a/57271867/8620333 it can help you understand — Temani Afif, Jun 19 '20 at 15:55
Ah shit I'm trying to apply this to my website but the images get cut in half (half on the bottom of one column and the rest on the next — Gaetan L., Jun 19 '20 at 16:06
@GaetanL. pay attention to the display applied to wrapper. If there is an issue make it inline-block — Temani Afif, Jun 19 '20 at 16:10

CSS avoid column "spread" in container

1 Answers1