CODEWITHSUNDEEP
htmlcssflexboxgrid
Stib
Stib

Reputation: 96

Evenly spaced images using css grid

I need a responsive CSS grid, containing at most three columns and at least one, to have equal space around each column. This is easily done, with just one row, with flexbox and justify-content: space-evenly as seen here:

Even Spacing Using FlexBox

But I need multiple rows. So how can I get even column spacing with css grid?

Here is what I have currently with a grid. The far left and right margins are half the size of the inner margins

No Even Spacing With Grid

I've thought about using a flexbox for each row in the grid but the idea sounds like it could be more work than it's worth. Thanks

JSFiddle

Upvotes: 1

Views: 4598

Answers (1)

user7148391
user7148391

Reputation:

Equal space between the images vertically and horizontally

The images aren't the direct children of the grid/flex container so some adjustments need to be made to make the images take full width/height of their parents.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

img {
  /* at least fill the parent */
  min-width: 100%;
  /* don't exceed the parent */
  max-width: 100%;
}

a,[item] {
  display: inline-block;
}


/* Not needed */

body * {
  padding: 10px;
  border: 1px solid;
}
<div container>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
</div>

CSS Grid

Using css grid it should be easy to have 3 items per row and have even space all around.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

img {
  min-width: 100%;
  max-width: 100%;
}

a,[item] {
  display: inline-block;
}

/* Solution */
[container] {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap:20px; /* even spacing using grid-gap, You can use percentage values if you want*/
    padding:20px;
}


[item]{
    padding: 10px;
    background:red;
}


/* Not needed */

body * {
  padding: 10px;
  border: 1px solid;
}
<div container>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
</div>

Flexbox

Tricky requires a bit of care

First we need 3 items per row we can just say that like css grid so we calculate, we give each item a third of the overall width of the parent flex-basis:calc(100% / 3);

Second we add the space around using margins say margin:20px, Now the tricky bit is that margins add to width of the item so we need to substract that space from the overall width of the container then calculate the third which will become flex-basis(100% - (20px * 6)) / 3);

6 because each element will have 2 margins left/right 2 x 3=6

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

img {
  min-width: 100%;
  max-width: 100%;
}

a,[item] {
  display: inline-block;
}

/* Solution */
[container] {
    width: 100%;
    display: flex;
    flex-wrap:wrap;
   
}


[item]{
    padding: 10px;
    background:red;
    flex:0 0 calc((100% - (20px * 6)) / 3);
    margin:20px; 
}


/* Not needed */

body * {
  padding: 10px;
  border: 1px solid;
}
<div container>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
</div>

Upvotes: 1

Related Questions